我正在寻找一种向自定义实时预览面板添加新控件的方法。我已经看到了如何使用来向面板添加新部分 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对包括此。

启动和初始化

您可以通过customize_register 挂钩注册主题定制器的定制设置：

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添加该功能。您可以在自定义标头上看到它的运行情况，用户可以在其中上传新文件作为标头图像。

您可以在ottos博客中找到有关“ Theme Customizer”的更多信息。

更新11/06/2012

实时示例，供您阅读，以及更多示例，请参阅开放源代码和doku。

更新01/15/2013

我们在github上创建了一个带有自定义类的存储库，以方便，方便地使用它。也许您只能使用它，或者提出您的想法和解决方案。

好的，这是这样做的方法。将控件类分离到一个或多个新文件。

您有一个连接到custom_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_scheme不要使用themename_theme_options[color_scheme]。

您扩展的类属于图像上传控件。如果要创建颜色选择器，则可能应该扩展WP_Customize_Control类。

仅出于完整性考虑：有关如何向主题定制器添加数字字段的示例。

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不是来自相同的命名空间

让我知道是否有帮助