如何扩展WP_Customize_Control

时间：2012-07-16 作者：Rob

我正在寻找一种方法，向“自定义实时预览”面板添加一种新的控件。我已经了解了如何使用add_action( \'customize_register\'...

我要实现的控件是另一种颜色选择器。在里面a previous post, 我们看到了如何扩展核心类来添加小部件，但我这里缺少的是一个钩子，它可以让我将对象引入范围—WP\\U Customize\\U Palette\\U Control。在

您可以看到beginnings of the code here. 此代码位于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\' );

5 个回复

SO网友:bueltge

示例和用法类

您可以在我当前的主题中看到如何使用此主题。您还可以使用该类。看到这个了吗class 在Github上，检查functions.php 对于包括此。

启动（&A）；初始化您可以通过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 添加该功能。您可以在自定义标题上看到itin操作，用户可以在其中上载新文件作为标题图像

您可以在中找到有关“主题定制器”的更多信息ottos blog.

Update 11/06/2012

有关阅读可能性和更多示例，请参阅open repo 源代码和doku。

Update 01/15/2013

我们已经在github with custom class 使用它，简单易用。也许你只能使用它，或者提出你的想法和解决方案。

SO网友:Géza Mikló

好的，下面是如何做到这一点。将控件类分隔为一个或多个新文件。

您有一个挂接在customize\\u 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

SO网友:onetrickpony

你从来没有用过你的课。尝试将类的新实例传递给add\\u控件方法：

$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 班

SO网友:kaiser

为了完整起见：一个关于如何向主题定制器添加数字字段的示例。

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

SO网友:ipp

我认为您必须在自定义WP\\U之前添加反斜杠。所以，它将是

class WP_Customize_Palette_Control extends \\WP_Customize_Image_Control

，因为backslash 假设WP\\u Customize\\u Image\\u控件不是来自same 命名空间

如果有帮助，请告诉我

结束

小码农CODE

如何扩展WP_Customize_Control

示例和用法类

相关推荐