Wordpress 主题定制器 - 添加区域供用户移动和组织小部件 [英] Wordpress Theme Customizer - Add area for users to move around and organize widgets

问题描述

我目前正在开发一个 Wordpress 主题，使用主题定制器让用户定制它，但我卡住了.

I am currently developing a Wordpress Theme, using the Theme Customizer to let users customize it, but I have got stuck.

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

For the footer, I have created various widgets, containing different things like Recent Posts, or a Live Twitter Feed.

我希望用户能够按照他们想要的顺序组织它们，但我不知道如何去做.我找到了另一个主题(Zerif Lite)，它可以让你做到这一点(见下图)，但是我浏览了所有代码，但无法弄清楚他们做到了，没有添加我们的焦点部分小部件"部分.

I want the users to be able to organize them, in the order they want, yet I cannot work out how to do it. I found one other theme (Zerif Lite), that lets you do this (see image below), however I went through all the code and couldn't work out they did it, there was nothing adding the 'Our focus section widgets' section.

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

I have organized my theme similarly, there are various Panels, with Sections, and I want one of those sections to contain it.

似乎不是每个人都明白我的问题.我知道如何创建小部件

Not everyone seems to get my problem. I KNOW how to create Widgets

我知道如何创建小部件.我希望主题定制器中有一个区域供用户移动它们，不仅是我创建的区域，还有标签云等其他默认区域.

I know how to create Widgets. I want an area in the Theme Customizer for users to move them around, not just the ones I created, but also other default ones like the Tag Cloud.

编辑 2:@Codeartist，我使用的是 Wordpress 4.3.1，这是我在 functions.php

EDIT 2: @Codeartist, I am using Wordpress 4.3.1, and here is my code in 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' );

推荐答案

在查看 zerif_customizer.js 后，我发现 Zerif Lite 正在通过 JavaScript 将小部件面板部分添加到主题定制器.

After looking inside zerif_customizer.js, I discovered that Zerif Lite is adding the widget panel sections to the Theme Customizer via JavaScript.

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

To do the same in a child theme of 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 文件，其中文件名和路径必须与上述函数中的第二个参数匹配:

Then put a new JavaScript file in your theme, where the filename and path must match the second parameter from the function above:

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 必须已经存在，如下所示:

Of course, panel_mysection must already exist as per something like this:

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

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

And the sidebar-mysection widget section must already exist:

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

这篇关于Wordpress 主题定制器 - 添加区域供用户移动和组织小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！