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

我目前正在开发Wordpress主题, 使用主题定制器让用户对其进行自定义, 但是我遇到了麻烦。
对于页脚, 我创建了各种小部件, 其中包含不同的内容, 例如” 最近的帖子” 或实时Twitter Feed。
我希望用户能够按照他们想要的顺序组织他们, 但是我无法确定如何去做。我找到了另一个主题(Zerif Lite), 它可以让你做到这一点(请参见下图), 但是我遍历了所有代码, 无法解决问题, 没有添加” 我们的焦点部分小部件” 部分。
我以类似的方式组织了主题, 有多个小组, 各有各节, 我希望这些节之一包含这一主题。

文章图片
编辑：
并非每个人似乎都能解决我的问题。我知道如何创建小部件
我知道如何创建小部件。我希望主题定制器中有一个区域供用户移动, 不仅是我创建的区域, 还包括标签云之类的其他默认区域。
【WordPress主题定制器-添加区域供用户移动和组织小部件】编辑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挂钩)开始使用：