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

我目前正在开发一个wordpress 主题,使用Theme Customizer让用户自定义它,但我已经卡住了.

对于页脚,我创建了各种小部件,包含不同的内容,如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' );

在查看zerif_customizer.js之后,我发现Zerif Lite正在通过JavaScript将widget面板部分添加到Theme Customizer中.

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

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

猜你在找的PHP相关文章