ฉันกำลังมองหาวิธีที่จะเพิ่มการควบคุมชนิดใหม่ลงในแผงแสดงตัวอย่างแบบกำหนดเองแบบสด ฉันได้เห็นวิธีเพิ่มหัวข้อใหม่ลงในแผงโดยใช้ add_action( 'customize_register'...

การควบคุมที่ฉันต้องการนำไปใช้เป็นเครื่องมือเลือกสีชนิดอื่น ในโพสต์ก่อนหน้านี้เราจะเห็นวิธีการขยายคลาสหลักเพื่อเพิ่มวิดเจ็ต แต่สิ่งที่ฉันขาดนี่คือตะขอที่จะทำให้ฉันสามารถนำวัตถุของฉันเข้าสู่ขอบเขต - WP_Customize_Palette_Control ที่

คุณสามารถเห็นจุดเริ่มต้นของรหัสที่นี่ รหัสนี้อยู่ในfunctions.phpไฟล์ของธีมของฉัน

ขอบคุณสำหรับความช่วยเหลือใด ๆ ปล้น

เพิ่งปรับปรุงรหัส ตอนนี้ฉันต้องrequire_onceมาเรียน ดังนั้นตอนนี้ฉันไม่มีข้อผิดพลาด PHP แต่ HTML ควบคุมใหม่ของฉันไม่ปรากฏขึ้น

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

ตัวอย่างและคลาสสำหรับการใช้งาน

คุณสามารถดูในชุดรูปแบบปัจจุบันของฉันเป็นไปได้ที่จะใช้สิ่งนี้ นอกจากนี้คุณสามารถใช้คลาส ดูคลาสนี้ใน Github และตรวจสอบการfunctions.phpรวมนี้

เริ่ม & เริ่ม

คุณสามารถลงทะเบียนการตั้งค่าแบบกำหนดเองสำหรับ Theme Customizer ผ่านทาง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',
    ) ) );

}

การใช้งานในธีม:

ใช้มันเหมือนในตัวอย่างด้านล่าง↓:

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

การปรับ

คุณยังสามารถเปลี่ยนการควบคุม:

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

textเริ่มต้นการควบคุมประเภทคือ มันสร้างตัวควบคุมกล่องข้อความ ประเภทการควบคุมอื่นคือdropdown-pagesซึ่งสร้างรายการแบบหล่นลงของหน้า WordPress

แต่นั่นไม่ใช่ทั้งหมด มีอีกหลายจริง แต่เนื่องจากพวกเขากำหนดเองดังนั้นพวกเขาจึงประกาศแตกต่างกัน

สิ่งนี้ใช้ประโยชน์จาก 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]',
    ) )
);

หมายเหตุเพิ่มเติม:

• WP_Customize_Upload_Control- สิ่งนี้จะให้กล่องอัปโหลดสำหรับไฟล์ของคุณ อย่างไรก็ตามคุณอาจจะไม่ใช้สิ่งนี้โดยตรงคุณจะต้องขยายให้กว้างขึ้นเพื่อสิ่งอื่น ๆ เช่น: WP_Customize_Image_Control- ตัวเลือกนี้จะให้ตัวเลือกรูปภาพและกล่องตัวอัปโหลด มันขยายตัวควบคุมการอัพโหลด คุณสามารถเห็นมันทำงานบนชิ้นส่วนพื้นหลังที่กำหนดเองซึ่งผู้ใช้สามารถอัปโหลดไฟล์ใหม่เป็นภาพพื้นหลังได้
• WP_Customize_Header_Image_Control- เนื่องจากการปรับขนาดของส่วนหัวจึงต้องมีการจัดการและการแสดงผลพิเศษเล็กน้อยดังนั้นการWP_Customize_Header_Image_Controlขยาย
• WP_Customize_Image_Controlเพื่อเพิ่มฟังก์ชันการทำงานนั้น คุณสามารถดูได้ในส่วนหัวที่กำหนดเองซึ่งผู้ใช้สามารถอัปโหลดไฟล์ใหม่เพื่อเป็นภาพส่วนหัว

ท่านสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับ "ธีม Customizer" ในบล็อก Ottos

อัปเดต 11/06/2012

ตัวอย่างสดสำหรับความเป็นไปได้ในการอ่านและตัวอย่างเพิ่มเติมดูrepo แบบเปิดสำหรับซอร์สและ doku

อัพเดท 01/15/2013

เราได้สร้าง repo บนgitHub กับคลาสที่กำหนดเองเพื่อใช้ง่ายและพร้อม บางทีคุณสามารถใช้หรือพัฒนาด้วยความคิดและวิธีแก้ปัญหาของคุณเท่านั้น

ตกลงนี่เป็นวิธีการทำ แยกคลาสควบคุมของคุณออกเป็นไฟล์ใหม่หนึ่งไฟล์ขึ้นไป

คุณมีฟังก์ชั่นหรือวิธีการติดอยู่ที่ Customize_register ใช่ไหม? ในฟังก์ชั่นหรือวิธีการนั้นจำเป็นต้องมีเมื่อไฟล์ใหม่ของคุณก่อนที่จะเพิ่มการควบคุมที่กำหนดเองของคุณ PHP จะไม่บ่นเกี่ยวกับการกำหนดคลาสใหม่

หมายเหตุ: สิ่งนี้จะไม่ทำงานนอกกรอบ แต่แสดงเคล็ดลับ

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

คุณไม่เคยใช้คลาสของคุณ ลองส่งตัวอย่างใหม่ของคลาสของคุณไปที่เมธอด 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);

นอกจากนี้ฉันไม่คิดว่า WP รู้ว่าชื่อตัวเลือกสำหรับการตั้งค่าของคุณเป็นส่วนหนึ่งของอาร์เรย์ บางทีมันอาจจะดีกว่าที่จะมีแทนthemename_theme_options_color_schemethemename_theme_options[color_scheme]

คลาสที่การขยายของคุณอยู่ในการควบคุมการอัพโหลดรูปภาพ หากคุณกำลังสร้างเครื่องมือเลือกสีคุณควรขยายคลาสWP_Customize_Control

เพื่อความสมบูรณ์: ตัวอย่างเกี่ยวกับวิธีเพิ่มฟิลด์ตัวเลขใน Theme Customizer

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 ดังนั้นมันจะเป็น

class WP_Customize_Palette_Control extends \WP_Customize_Image_Control

เนื่องจากแบ็กสแลชสันนิษฐานว่า WP_Customize_Image_Control ไม่เหมือนกัน Namespace

แจ้งให้เราทราบหากช่วยได้