php - Wordpress Theme Customizer - 添加区域供用户四处移动和组织小部件

Question

我目前正在开发一个 Wordpress 主题，使用主题定制器让用户自定义它，但我遇到了困难。

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

我希望用户能够按照他们想要的顺序组织它们，但我不知道该怎么做。我找到了另一个主题(Zerif Lite)，它可以让你做到这一点(见下图)，但是我检查了所有的代码但无法解决他们做到的，没有添加“我们的焦点部分小部件”部分.

我以类似的方式组织了我的主题，有各种面板和部分，我希望其中一个部分包含它。

编辑:

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

我知道如何创建小部件。我想要主题定制器中的一个区域供用户四处移动，不仅是我创建的区域，还有其他默认区域，例如 Tag Cloud。

编辑 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' );

Answer 1

我正在试验最新更新的二十一主题。

在 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” Hook 中的 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