WordPress主题定制器-添加区域供用户移动和组织小部件

我目前正在开发Wordpress主题, 使用主题定制器让用户对其进行自定义, 但是我遇到了麻烦。

对于页脚, 我创建了各种小部件, 其中包含不同的内容, 例如”最近的帖子”或实时Twitter Feed。

我希望用户能够按照他们想要的顺序组织他们, 但是我无法确定如何去做。我找到了另一个主题(Zerif Lite), 它可以让你做到这一点(请参见下图), 但是我遍历了所有代码, 无法解决问题, 没有添加”我们的焦点部分小部件”部分。

我以类似的方式组织了主题, 有多个小组, 各有各节, 我希望这些节之一包含这一主题。

编辑：

并非每个人似乎都能解决我的问题。我知道如何创建小部件

我知道如何创建小部件。我希望主题定制器中有一个区域供用户移动, 不仅是我创建的区域, 还包括标签云之类的其他默认区域。

编辑2：@Codeartist, 我正在使用Wordpress 4.3.1, 这是我在functions.php中的代码

function widgets_init_mysite() {
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ), 'id' => 'sidebar-1', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
}

add_action( 'widgets_init', 'widgets_init_mysite' );

function mytheme_customizer( $wp_customize ) {

    $wp_customize->add_panel( 'panel_for_widgets', array(
        'priority'       => 70, 'title'          => __('Panel for widgets', 'codeartist'), 'capability'     => 'edit_theme_options', ));

    $wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->panel = 'panel_for_widgets';

}

add_action( 'customize_register', 'mytheme_customizer' );

#1

在查看完zerif_customizer.js的内容后, 我发现Zerif Lite通过JavaScript将小部件面板部分添加到主题定制器中。

要在Zerif Lite的子主题中执行相同的操作…

在你的functions.php文件中：

function mytheme_customizer_live_preview() {
    wp_enqueue_script( 
        'mytheme-themecustomizer', //Give the script an ID
        get_stylesheet_directory_uri() . '/js/theme-customizer.js', //Point to file
        array( 'jquery' ), //Define dependencies
        true                                                        //Put script in footer?
    );
}
add_action( 'customize_controls_enqueue_scripts', 'mytheme_customizer_live_preview' );

然后在你的主题中放入一个新的JavaScript文件, 其中文件名和路径必须与上面函数中的第二个参数匹配：

jQuery(document).ready(function() {
    /* Move our widgets into the widgets panel */
    wp.customize.bind('ready', function() {
        wp.customize.section( 'sidebar-widgets-sidebar-mysection' ).panel( 'panel_mysection' );
        wp.customize.section( 'sidebar-widgets-sidebar-mysection' ).priority( '2' );
    });
});

当然, panel_mysection必须已经按照以下方式存在：

$wp_customize->add_panel( 'panel_mysection', array(
    'priority' => 33, 'capability' => 'edit_theme_options', 'title' => __( 'Mysection section', 'mytheme' )
));

并且sidebar-mysection小部件部分必须已经存在：

class zerif_mysection extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'ctUp-ads-widget', __( 'Zerif - Mysection widget', 'zerif-lite' )
        );
    }
}
function mytheme_register_widgets() {
    register_widget('zerif_mysection');
    register_sidebar(
        array (
            'name'          => 'Mysection section widgets', 'id'            => 'sidebar-mysection', 'before_widget' => '', 'after_widget'  => ''
        )
    );
}
add_action('widgets_init', 'mytheme_register_widgets');

#2

我正在尝试新近更新的二十一主题。

在function.php中, 注册了一些侧边栏：

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ), 'id' => 'sidebar-1', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

register_sidebar( array(
    'name' => __( 'Showcase Sidebar', 'twentyeleven' ), 'id' => 'sidebar-2', 'description' => __( 'The sidebar for the optional Showcase Template', 'twentyeleven' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

register_sidebar( array(
    'name' => __( 'Footer Area One', 'twentyeleven' ), 'id' => 'sidebar-3', 'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

register_sidebar( array(
    'name' => __( 'Footer Area Two', 'twentyeleven' ), 'id' => 'sidebar-4', 'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

register_sidebar( array(
    'name' => __( 'Footer Area Three', 'twentyeleven' ), 'id' => 'sidebar-5', 'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );

每个侧边栏都有自己的唯一ID。如果在主题中启用了小部件和侧栏, 则默认的”小部件”面板将由Wordpress在定制器屏幕上创建。然后, 将为每个侧边栏创建一个放置在”小部件”面板中的部分。该部分具有基于边栏ID的ID。这个ID看起来像这样

sidebar-widgets-[sidebar-id]

其中sidebar-id是相应边栏的ID。

你所有的代码都应放在” customize_register”钩子中的functions.php中(或在插件内部)

add_action( 'customize_register', 'codeartist_customize_register' );
function codeartist_customize_register($wp_customize) {
    //Put your code here
}

因此, 基本上, 我们需要做的是创建新面板

$wp_customize->add_panel( 'panel_for_widgets', array(
    'priority'       => 70, 'title'          => __('Panel for widgets', 'codeartist'), 'capability'     => 'edit_theme_options', ));

然后在该面板中移动代表侧边栏的所有部分。

$wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-2' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-3' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-4' )->panel = 'panel_for_widgets';
$wp_customize->get_section( 'sidebar-widgets-sidebar-5' )->panel = 'panel_for_widgets';

在”二十一”中, 有五个侧边栏, 因此我们移动了五个部分。

最后, 每个部分的名称与相应边栏的名称相同。要更改该部分的说明, 你可以执行以下操作。

$wp_customize->get_section( 'sidebar-widgets-sidebar-1' )->description= __('New description', 'codeartist');

不幸的是, 关于get_section的文档并不多, 但是这里是指向Codex的链接：https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/get_section

#3

你要使用的是WordPress中的主题自定义程序, 它具有一组独特的钩子和一个API。

通过使用此挂钩(customize_register挂钩)开始使用：

customize_register

围绕主题定制器构建了一个相当健壮的API, 在使用它时, 你可以参考此手册以获取文档：

Theme Options – The Customizer API