如何将自定义控件类型扩展到列表页

时间:2013-04-29 作者:Dre

I have:我当前正在使用$wp_customize 向自定义主题区域添加选项。

My Goal:我的目标是$wp_customize 这样我就可以将可用页面列表显示为复选框。我一直在使用Otto\'s tutorial, 但它只覆盖文本区域。我知道有一个下拉页面控件类型,但我希望能够将页面显示为复选框列表,而不是选择元素。到目前为止,我已经做到了以下几点:

add_action( \'customize_register\', \'my_theme_customize_register\' );

function my_theme_customize_register($wp_customize) {

     // CREATE A CLASS FOR DISPLAYING PAGES AS OPTIONS
    class Customize_Pages_Control extends WP_Customize_Control {
        public $type = \'pages\';
        public function render_content() {
            $pages = get_pages(); ?>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <?php
            foreach ($pages as $page) { ?>
                <label>
                    <input type="checkbox" value="<?php $page->ID ?>" data-customize-setting-link="<?php $page->ID ?>">
                    <?php echo $page->post_title; ?>
                </label> <?php
            }
        }
    }
    // ADD SECTION
    $wp_customize->add_section( \'home_page\', array( 
        \'title\' => __( \'Home Page\' ), 
        \'priority\' => 37, 
    ) );
    // ADD SETTING & CONTROL
    $wp_customize->add_setting( \'slideshow_pages\' , array(
        \'capability\'    => \'edit_theme_options\',
    ) );
    $wp_customize->add_control( new Customize_Pages_Control ( $wp_customize, \'slideshow_pages\', array(
        \'label\' => __( \'Add pages to slideshow\' ),
        \'section\' => \'home_page\',
        \'settings\' => \'slideshow_pages\',
        \'type\' => \'pages\',
    ) ) );
}
这成功地在选项菜单中添加了控件并列出了页面,但我不知道在用户勾选框后如何实际保存更改。同样,我当前无法使用已保存的任何数据(即,我无法检查主题本身中已选择的页面)

非常感谢您的帮助或指点

1 个回复
SO网友:Dre

我意识到我没有完全理解link() 作用现在我意识到,它将控件链接到正确的设置,使得尝试将多个控件指向一个设置时出现问题。我修改了原来的函数,添加了一个隐藏的输入,它将保存我的最终值以及复选框。然后,我将一个小javascript排入队列,该javascript检查复选框的更改,将值添加到隐藏的输入中,并触发一个单击事件,以便更新页面:

class Customize_Pages_Control extends WP_Customize_Control {
    public $type = \'pages\';
    public function enqueue() { // Enqueue script
        wp_register_script( \'lma-page-selector\', get_stylesheet_directory_uri() . \'/library/js/libs/lma-page-selector.js\', array(), \'\', false );
        wp_enqueue_script( \'lma-page-selector\' );
    }
    public function render_content() {
        $pages = get_pages(); ?>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 
        <input type="hidden" value="" <?php $this->link()?>/> <?php // Field to hold final values

        foreach ($pages as $page) { // Loop through pages and add checkboxes 
        ?>
        <label>
            <input type="checkbox" value="<?php echo $page->ID ?>">
            <?php echo $page->post_title; ?>
        </label> <?php
        }
    }
}
以及javascript:

jQuery(document).ready(function($) {
    $(\'.customize-control-pages input[type="checkbox"]\').change(function() {
        var vals = $(\'.customize-control-pages input:checked\').map(function() {
            return $(this).val();
        }).get().join(\',\');
        $(\'.customize-control-pages input[type="text"]\').val(vals).trigger(\'change\');
    }); 
});
对我来说,这感觉很糟糕,但似乎奏效了。我仍然需要在那里添加一些消毒,但这只是一个开始。希望有人会觉得有用

结束

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件,但我的样式表没有包含在<head>.. 这是我的代码:add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register