Özelleştirme canlı önizleme paneline yeni bir kontrol türü eklemenin bir yolunu arıyorum . Panelini kullanarak nasıl yeni bölümler ekleyeceğimi gördüm. add_action( 'customize_register'...

Uygulamak istediğim kontrol farklı türde bir renk seçici. Gelen Bir önceki yazı biz widget eklemek için çekirdek sınıfları genişletmek için nasıl, ama ne burada eksikliği kapsam içine benim nesneyi getirmemi sağlayacak bir kanca olduğunu - WP_Customize_Palette_Control. at

Görebilirsiniz burada kod başlangıçlar . Bu kod functions.phptemamın dosyasında.

Herhangi bir yardım için teşekkürler. soymak

Kodu yeni güncelledim. Şimdi require_oncedersleri getirmem gerekiyor. Şimdi hiçbir PHP hatam yok ama yeni HTML kontrolüm görünmüyor.

<?php

require_once( ABSPATH . WPINC . '/class-wp-customize-setting.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-section.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-control.php' );

class WP_Customize_Palette_Control extends WP_Customize_Image_Control {  
        public $type    = 'palette';
        public $removed = '';
        public $context;

        public function enqueue() {
                //wp_enqueue_script( 'wp-plupload' );
        }

        public function to_json() {
                parent::to_json();

                $this->json['removed'] = $this->removed;

                if ( $this->context )
                        $this->json['context'] = $this->context;
        }

        public function render_content() {
                ?>
                <label>
                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                        <div>
                                <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
                                <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
                        </div>
                </label>
                <?php
        }
}

//new WP_Customize_Palette_Control();


//add_action('customize_controls_init', 'WP_Customize_Palette_Control');

// add an option to the customize panel

function sci_customize_controls_init($wp_customize) {
    $wp_customize->add_section( 'themename_color_scheme', array(
        'title'          => __( 'Color Scheme', 'themename' ),
        'priority'       => 35,
    ) );

    $wp_customize->add_setting( 'themename_theme_options[color_scheme]', array(
    'default'        => 'some-default-value',
    'type'           => 'option',
    'capability'     => 'edit_theme_options',
) );


$wp_customize->add_control( 'themename_color_scheme', array(
    'label'      => __( 'Color Scheme', 'themename' ),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[color_scheme]',
    'type'       => 'palette',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
        ),
) );

}

add_action( 'customize_register', 'sci_customize_controls_init' );

Kullanım için örnek ve sınıf

Şu anki temamda bunu nasıl kullanabileceğimi görebilirsiniz. Ayrıca sınıfı kullanabilirsiniz. Bu sınıfa bakın, bunun için Github'da bir kontrol edin functions.php.

Başlat ve başlat

Tema özelleştirici için özel ayarlarınızı customize_register kanca ile kaydedebilirsiniz :

add_action( 'customize_register', 'themedemo_customize' );
function themedemo_customize($wp_customize) {

    $wp_customize->add_section( 'themedemo_demo_settings', array(
        'title'          => 'Demonstration Stuff',
        'priority'       => 35,
    ) );

    $wp_customize->add_setting( 'some_setting', array(
        'default'        => 'default_value',
    ) );

    $wp_customize->add_control( 'some_setting', array(
        'label'   => 'Text Setting',
        'section' => 'themedemo_demo_settings',
        'type'    => 'text',
    ) );

    $wp_customize->add_setting( 'some_other_setting', array(
        'default'        => '#000000',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'some_other_setting', array(
        'label'   => 'Color Setting',
        'section' => 'themedemo_demo_settings',
        'settings'   => 'some_other_setting',
    ) ) );

}

Tema içi kullanım:

Aşağıdaki örnekte olduğu gibi kullanın ↓:

echo 'some_setting => ' .get_theme_mod( 'some_setting', 'default_value' )."\n";
echo 'some_other_setting => ' .get_theme_mod( 'some_other_setting', '#000000' )."\n";
echo 'non_existent_setting => '.get_theme_mod( 'non_existent_setting', 'default_value' )."\n";

Düzeltmeler

Ayrıca kontrolü de değiştirebilirsiniz:

$wp_customize->add_control( 'themename_color_scheme', array(
    'label'      => __( 'Color Scheme', 'themename' ),
    'section'    => 'themename_color_scheme',
    'settings'   => 'themename_theme_options[color_scheme]',
    'type'       => 'radio',
    'choices'    => array(
        'value1' => 'Choice 1',
        'value2' => 'Choice 2',
        'value3' => 'Choice 3',
        ),
) );

Varsayılan kontrol tipi text. Bir metin kutusu kontrolü yaratır. Başka bir kontrol tipi ise dropdown-pages, WordPress Sayfalarının açılır bir listesini oluşturur.

Ama hepsi bu kadar değil. Aslında birkaç tane daha var, ama çok özel oldukları için farklı ilan edildiler.

Bu, OOP’tan yararlanır:

$wp_customize->add_control(
    new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( 'Link Color', 'themename' ),
        'section'  => 'themename_color_scheme',
        'settings' => 'themename_theme_options[link_color]',
    ) )
);

Ek Notlar:

• WP_Customize_Upload_Control- Bu size dosyalar için bir yükleme kutusu verir. Bununla birlikte, muhtemelen bunu doğrudan kullanmayacaksınız, başka şeyler için genişletmek isteyeceksiniz… gibi: WP_Customize_Image_Control- Bu size resim toplayıcı ve yükleyici kutusunu verir. Yükleme denetleyicisini genişletir. Bir kullanıcının arkaplan resmi olarak yeni bir dosya yükleyebileceği özel arkaplan parçasında çalışırken görebilirsiniz.
• WP_Customize_Header_Image_Control- Başlık parçasının yeniden boyutlandırma eylemi nedeniyle, biraz özel kullanım ve gösterime ihtiyacı vardır WP_Customize_Header_Image_Control;
• WP_Customize_Image_ControlBu işlevselliği eklemek için Bir kullanıcının başlık görüntüsü olarak yeni bir dosya yükleyebileceği özel başlık parçasında eylemi görebilirsiniz.

Ottos blogunda "Theme Customizer" hakkında daha fazla bilgi bulabilirsiniz .

Güncelleme 11.06.2012

Okuma olanakları ve daha fazla örnek için Canlı Örnek , kaynak ve doku için açık depoya bakın.

Güncelleme 01/15/2013

Kolay ve hazır kullanmak için özel bir sınıfla github'ta bir repo oluşturduk . Belki sadece onu kullanabilir veya fikir ve çözümlerinizle ilerleyebilirsiniz.

Tamam, işte bunun nasıl yapılacağı. Kontrol sınıflarınızı bir veya daha fazla yeni dosyaya ayırın.

Customize_register'a bağlı bir işleve veya yönteme sahipsiniz, değil mi? Bu fonksiyon veya yöntemde, özel kontrollerinizi eklemeden hemen önce yeni dosyalarınızı bir kez gerektirir. Sonra PHP sınıfları yeniden tanımlama konusunda şikayet etmez.

Not: Bu kutunun dışında çalışmayacak, ancak püf noktasını gösterir.

add_action('customize_register', array('myAddControl', 'customize_register') );

class myAddControl{
public function customize_register()
{
    global $wp_customize;


            //This will do the trick
    require_once(dirname(__FILE__).'/class-gctfw-theme-control.php');


    $wp_customize->add_section( 'gctfw_switch_theme' , array(
        'title'      => 'Switch theme',
        'priority'   => 25,
    ) );

    $wp_customize->add_setting( 'gctfw_select_theme' , array(
        'default'     => $wp_customize->theme()->get('Name'),
        'transport'   => 'refresh',
        'capabilities' => 'manage_options'
    ) );

    $myControl = new gctfw_Theme_Control( $wp_customize, 'gctfw_select_theme', array(
        'label'        => __( 'Select theme', 'mytheme' ),
        'section'    => 'gctfw_switch_theme',
        'settings'   => 'gctfw_select_theme',
    ) ) ;
    $wp_customize->add_control( $myControl );
    }
}//class

Asla sınıfını kullanmıyorsun. Sınıfınızın yeni bir örneğini add_control yöntemine geçirmeyi deneyin:

$control_args = array(
  // your args here
); 

$my_control = new WP_Customize_Palette_Control(
                $wp_customize, 'themename_color_scheme', $control_args);

$wp_customize->add_control($my_control);

Ayrıca, WP'nin ayarınız için seçenek adının bir dizinin parçası olduğunu bildiğini sanmıyorum. Belki de themename_theme_options_color_schemeyerine daha iyidir themename_theme_options[color_scheme].

Uzattığınız sınıf resim yükleme kontrolüne aittir. Bir renk seçici oluşturuyorsanız, muhtemelen WP_Customize_Control sınıfını genişletmelisiniz .

Sadece tamlık için: Theme Customizer'a nasıl sayı alanı ekleneceğine bir örnek.

class Customize_Number_Control extends WP_Customize_Control
{
    public $type = 'number';

    public function render_content()
    {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input type="number" size="2" step="1" min="0" value="<?php echo esc_attr(  $this->value() ); ?>" />
        </label>
        <?php
    }
}

WP_Customize'dan önce ters eğik çizgi eklemeniz gerektiğini düşünüyorum. Bu yüzden olacak

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

Çünkü ters eğik çizgi , WP_Customize_Image_Control'ün aynı Ad alanından olmadığını kabul etti

Yardımcı olup olmadığını bana bildirin