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

Question

我目前正在开发一个WordPress主题，使用主题定制器让用户自定义它，但我已经卡住了。

对于页脚，我创建了各种小部件，包含不同的内容，如Recent Posts或Live Twitter Feed。

我希望用户能够按照他们想要的顺序组织它们，但我无法弄清楚如何做到这一点。我发现了另一个主题（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

我正在尝试新近更新的Twenty Eleven主题。

在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在定制器屏幕上创建。然后，对于每个侧边栏，将创建放置在小部件中的部分＆＃39;面板。该部分的ID基于侧边栏ID。那个id看起来像这样

sidebar-widgets-[sidebar-id]

sidebar-id是相应侧栏的ID。

您的所有代码都应该放在＆custom; [custom_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';

在Twenty Eleven中有五个侧边栏，所以我们移动五个部分。

最后，每个部分的名称与相应侧边栏的名称相同。要更改该部分的描述，您可以执行以下操作。

$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

Answer 2

你正在寻找的是WordPress中的主题定制器，它有一组独特的钩子和围绕它的API。

使用此钩子开始使用，customize_register钩子：

https://developer.wordpress.org/reference/hooks/customize_register/

围绕主题定制器构建了一个相当强大的API，您可以在使用它时参考本手册获取文档：

https://developer.wordpress.org/themes/advanced-topics/customizer-api/

Answer 3

在查看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');