Bagaimana cara memperpanjang WP_Customize_Control


27

Saya mencari cara untuk menambahkan jenis kontrol baru ke panel pratinjau siaran langsung yang dapat disesuaikan . Saya telah melihat cara menambahkan bagian baru ke panel menggunakan add_action( 'customize_register'...

Kontrol yang ingin saya terapkan adalah pemilih warna yang berbeda. Dalam posting sebelumnya , kita melihat bagaimana memperluas kelas inti untuk menambahkan widget, tetapi yang saya tidak miliki di sini adalah sebuah kait yang akan memungkinkan saya untuk membawa objek saya ke ruang lingkup - WP_Customize_Palette_Control. Di

Anda dapat melihat awal kode di sini . Kode ini ada di functions.phpfile tema saya.

Terima kasih atas bantuannya. rampok

Baru saja memperbarui kodenya. Sekarang saya harus require_oncemembawa masuk kelas. Jadi sekarang saya tidak memiliki kesalahan PHP tetapi kontrol HTML baru saya tidak muncul.

<?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' );

3
Poin minor, tetapi kecuali kontrol Anda menuju ke inti WordPress, jangan gunakan awalan WP_. Gunakan plugin / nama tema Anda sendiri sebagai awalan untuk nama kelas.
Otto

Jawaban:


14

Contoh dan kelas untuk penggunaan

Anda dapat melihat pada tema saya saat ini, bagaimana mungkin untuk menggunakan ini. Anda juga dapat menggunakan kelas. Lihat kelas ini di Github dan periksa functions.phpuntuk menyertakan ini.

Mulai & init

Anda dapat mendaftarkan pengaturan khusus Anda untuk penyesuai tema melalui customize_register hook:

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',
    ) ) );

}

Penggunaan dalam Tema:

Gunakan itu, seperti dalam contoh di bawah ini ↓:

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";

Penyesuaian

Anda juga dapat mengubah kontrol:

$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',
        ),
) );

Tipe kontrol default adalah text. Ini menciptakan kontrol kotak teks. Tipe kontrol lain adalah dropdown-pages, yang membuat daftar dropdown dari Halaman WordPress.

Tapi itu belum semuanya. Sebenarnya ada beberapa lagi, tetapi karena mereka begitu adat, mereka dinyatakan berbeda.

Yang ini memanfaatkan OOP:

$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]',
    ) )
);

Catatan tambahan:

  • WP_Customize_Upload_Control- Ini memberi Anda kotak unggah untuk file. Namun, Anda mungkin tidak akan menggunakan ini secara langsung, Anda ingin memperpanjangnya untuk hal-hal lain ... seperti: WP_Customize_Image_Control- Ini memberi Anda pemetik gambar dan kotak pengunggah. Itu memperpanjang controller unggahan. Anda dapat melihatnya beraksi di bagian latar belakang khusus, tempat pengguna dapat mengunggah file baru menjadi gambar latar.
  • WP_Customize_Header_Image_Control- Karena tindakan mengubah ukuran potongan tajuk, perlu sedikit penanganan dan tampilan khusus, sehingga WP_Customize_Header_Image_Controlmemperluas
  • WP_Customize_Image_Controluntuk menambahkan fungsionalitas itu. Anda dapat melihatnya beraksi di bagian tajuk khusus, tempat pengguna dapat mengunggah file baru menjadi gambar tajuk.

Anda dapat menemukan lebih banyak tentang "Penyesuai Tema" di ottos blog .

Pembaruan 11/06/2012

Contoh Langsung untuk kemungkinan membaca dan lebih banyak contoh, lihat repo terbuka untuk sumber dan doku.

Perbarui 01/15/2013

Kami telah membuat repo di github dengan kelas khusus untuk menggunakannya, mudah dan siap. Mungkin Anda hanya bisa menggunakannya atau maju dengan ide dan solusi Anda.


4

Ok, begini caranya. Pisahkan kelas kontrol Anda ke satu atau lebih file baru.

Anda memiliki fungsi atau metode yang terkait dengan customize_register, bukan? Dalam fungsi atau metode itu perlu sekali file baru Anda sebelum menambahkan kontrol kustom Anda. Maka PHP tidak akan mengeluh tentang mendefinisikan ulang kelas.

Catatan: Ini tidak akan berhasil di luar kotak, tetapi menunjukkan triknya.

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

3

Anda tidak pernah menggunakan kelas Anda. Coba lewati instance baru dari kelas Anda ke metode add_control:

$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);

Juga, saya tidak berpikir WP tahu bahwa nama opsi untuk pengaturan Anda adalah bagian dari array. Mungkin lebih baik memilikinya themename_theme_options_color_schemedaripada themename_theme_options[color_scheme].

Kelas ekstensi Anda menjadi milik kontrol unggah gambar. Jika Anda membuat pemilih warna, Anda mungkin harus memperluas kelas WP_Customize_Control .



1

Hanya untuk kelengkapan: Contoh tentang cara menambahkan bidang angka ke Penyesuai Tema.

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
    }
}

Saya tidak berpikir itu perlu, Anda hanya dapat lulus numbersebagai typeuntuk Kontrol default, dan gunakan input_attrsuntuk lulus step, dll
Ian Dunn

@IanDunn Bolehkah Anda menambahkan contoh sebagai jawaban tambahan? Terima kasih!
kaiser

0

Saya pikir Anda harus menambahkan backslash sebelum WP_Customize. Jadi itu akan terjadi

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

, Karena backslash mengasumsikan bahwa WP_Customize_Image_Control bukan dari Namespace yang sama

Beri tahu saya jika itu membantu

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.