利用WordPress Bootstrap前端框架制制作主题 – 设置侧栏小工具样式

如果我们在使用原生态Bootstrap前端框架制作WordPress主题的时候，相对来说还是比较容易的，本身Bootstrap有自带很多的固定样式，我们只需要将Bootstrap规定的样式和标签融入到WordPress模块中即可，包括我们在前面有一篇文章（使用WordPress Nav Walker类制作Bootstrap样式导航菜单），我们是可以比较轻松的实现菜单的下拉效果和样式。

在这篇文章中，我们需要实现的是WordPress侧栏小工具。比如，我们可以自定义推送侧栏小工具，融合Bootstrap前端样式，我们看看是如何实现的。

第一、添加自定义小部件模块

我们在实现自定义侧栏小工具之前，是需要先定义个小工具模块，要不我们也无法将小工具拖过去。

// Widget By laobuluo.com
function init_widgets($id){
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar',
        'before_widget' => '<div class="panel panel-default">',
        'before_title' => '<div class="panel-heading"><h3 class="panel-title">',
        'after_title' => '</h3></div>',
        'after_widget' => '</div>'
    ));
}
add_action('widgets_init', 'init_widgets');

这里我们在Functions.php 定义，可以在后台小工具看到。

现在我们实现侧栏可以自定义工具。

第二、适配自定义分类样式

如果我们这个时候讲分类、最新文章、归档等拖到小工具里的话，我们在前端的侧栏是看到错位的样式。我们还需要自定义才可以。这里我们先示范一个分类样式模块定义。

1、复制模块文件

我们到"wp-includes\widgets"目录中复制"class-wp-widget-categories.php"，放到我们的当前主题inc目录中。

然后我们需要编辑文件：

将：

class WP_Widget_Categories extends WP_Widget

换成：

class WP_Widget_Categories_Custom extends WP_Widget

然后将113行"<ul>"换成"<ul class="list-group">"。

2、添加定义类

// Adds 'list-group-item' to categories li
function add_new_class_list_categories($list){
    $list = str_replace('cat-item', 'cat-item list-group-item', $list);
    return $list;
}

add_filter('wp_list_categories', 'add_new_class_list_categories');

我们到当前Functions.php中添加。

3、引用小工具

require_once('inc/class-wp-widget-categories.php');

需要在Functions.php引用。

4、注册侧栏

//Register Widgets laobuluo.com
function wordstrap_register_widgets(){
	register_widget('WP_Widget_Categories_Custom'); 	
}
add_action('widgets_init', 'wordstrap_register_widgets');

这样之后，我们才可以看到实际的效果。

同样的原理，我们可以定义最新文章（class-wp-widget-recent-posts.php）、最新评论（class-wp-widget-recent-comments.php）以及其他的定义小工具。