如何使用主题选项定制器在节中创建节

时间:2017-06-22 作者:Zach Smith

很难找到在线文章,甚至在WP codex中,为主题选项在节内创建节。下面的屏幕截图显示了我正在尝试创建的内容:enter image description here

我有下面创建这样的简单代码,但我不知道如何在节中创建节。任何帮助都将不胜感激,并帮助未来的开发人员。

function site_customize_register( $wp_customize ) {
    /**
     * section
     */
    //so called "parent" section
    $wp_customize->add_section("homepage_options",[
        "title" => __("Homepage Options", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);
    //so called "parent" section
    $wp_customize->add_section("homepage_options_donate_now",[
        "title" => __("Donate Now", "customizer_homepage_options_section"),
        "priority" => 10,
    ]);

    /**
     * setting
     */
    $wp_customize->add_setting("four_image_cta_block", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_two", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_three", [
        "default" => "",
        "transport" => "postMessage",
    ]);
    $wp_customize->add_setting("four_image_cta_block_four", [
        "default" => "",
        "transport" => "postMessage",
    ]);

    /**
     * control
     */
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block",
        [
            "label" => __("First Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_two",
        [
            "label" => __("Second Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_two",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_three",
        [
            "label" => __("Third Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_three",
            "type" => "textarea",
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        "four_image_cta_block_four",
        [
            "label" => __("Fourth Item Link Text", "customizer_four_image_cta_block_label"),
            "section" => "homepage_options",
            "settings" => "four_image_cta_block_four",
            "type" => "textarea",
        ]
    ));

}

2 个回复
最合适的回答,由SO网友:TheGentleman 整理而成

似乎没有一种简单的方法可以做到这一点。环顾四周,我发现有两种方法可以做到这一点。

在我看来,第一种不太优雅的方法是将HTML注入到该部分的description 参数然后,您可以将一些JS连接到自定义HTML,使其按您想要的方式工作。

第二种方法是扩展内置WP_Customize_Control 类创建一个显示/隐藏另一组控件的控件。类似于

class Expand_Other_Control extends WP_Customize_Control{
    public $type = \'button\';
    protected $controlledElements = array();

    public function __construct($manager, $id, $args = array()){
        parent::construct($manager,$id,$args);
        if( isset($args[\'settings\']) ){
            $this->controlledElements = $args[\'settings\'];
            //$this->settings may or may not be an array, we need it to be an array for our custom render function
            is_array($this->controlledElements) or $this->controlledElements = array($this->controlledElements);
        }
    }

    public function render_content(){
        echo \'<button class="expand" data-elements="\'.json_encode($this->controlledElements).\'>Expand \'. $this->label . \'</button>\';

    }
}
那么您可以这样使用它:

$wp_customize->add_control(
    new Expand_Other_Control (
        $wp_customize,
            \'your_setting_id\',
            array(
                \'label\'          => __( \'Button\'s Label\' ),
                \'section\'        => \'your_section_id\',
                \'settings\'       => \'your_setting(s)_id\',        
        )
    )
);
请注意,这更像是一个即兴的概念验证。您仍然需要创建自己的JS来完成所有这些工作,这需要一些修改和验证。

SO网友:BinaryMoon

您可以使用add_panel 这样做。创建一个面板,然后向其中添加部分以创建子面板。

$wp_customize->add_panel( \'panel_id\', array(
    \'priority\'       => 10,
    \'capability\'     => \'edit_theme_options\',
    \'theme_supports\' => \'\',
    \'title\'          => \'\',
    \'description\'    => \'\',
) );

$wp_customize->add_section( \'homepage_options_donate_now\', array(
    \'title\' => __( \'Donate Now\', \'customizer_homepage_options_section\' ),
    \'priority\' => 10,
    \'panel\' => \'pabel_id\',
) );

结束

相关推荐

Responsive Admin Themes

我在看这个管理主题的示例(http://themepixels.com/main/themes/demo/webpage/shamcey/dashboard.html). 至于标签为“Navigation”的左侧管理栏,有没有一种方法可以在不使用插件的情况下实现这种类型的左侧仪表板管理菜单?我想用css、js或Jquery来实现这一点,任何处理编码的东西都可以。