wordpress appearance widgets 侧边栏 详解

wordpress自带的，widgets功能还是很强大的，它能帮助我们实现侧边栏的完全定制。

一，修改主题下的functions.php，添加一个新的侧边栏

function sidebar_widgets_init() {

    register_sidebar( array(
        'name' => __( 'Primary Widget Area', 'twentyten' ),
        'id' => 'primary-widget-area',
        'description' => __( 'The primary widget area', 'twentyten' ),
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Test Widget Area', 'twentyten' ),
        'id' => 'test-widget-area',
        'description' => __( 'The test widget area', 'twentyten' ),
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

}

add_action( 'widgets_init', 'sidebar_widgets_init' );

如果下图：

widget

这样就会产生，一个新sidebar，不同的页面显示不同的sidebar，也可以同一个页面显示，多个sidebar。

二，往新增的Test Widget Area，添加widget，从左边的widget例表中拖动到Test Widget Area就行了。地址是http://localhost/wp-admin/widgets.php

三，在主题下的sidebar.php中，调用Test Widget Area

<?php

    if ( is_active_sidebar( 'test-widget-area' ) ) : ?>

        <div id="test" role="complementary">
            <ul>
                <?php dynamic_sidebar( 'test-widget-area' ); ?>
            </ul>
        </div>

<?php endif; ?>

这样在前台就显示，新增的Test Widget Area侧边栏了。有的时候，默认的widget，并不能满足我们的需求，这个时候，我们就要自定义widget了。

四，如何增加widget，小工具

修改wp-includes/default-widgets.php

class WP_Test_Menu_Widget extends WP_Widget {

    function __construct() { //定义一个widget
        $widget_ops = array( 'description' => __('Use this widget to add one of your custom menus as a widget.') );
        parent::__construct( 'test_menu', __('Test Menu'), $widget_ops );
    }

    function widget($args, $instance) {  //这个方法是供前台调用显示
        。。。。。。。。。。。。。。
    }

    function update( $new_instance, $old_instance ) { //这个方法是供后台，保存数据用的
        。。。。。。。。。。。。。。。。。。。。
    }

    function form( $instance ) {//这个方法是在后台显示这个widget，拖动后
        。。。。。。。。。。。。。。。。。
    }
}

add widget

这样就新增了一个widget