因为WordPress
让我们从现在喜欢建站

WordPress Bootstrap框架制作主题系列 – 自定义侧栏小工具样式

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

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

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

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

// Widget By cnwper.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
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)以及其他的定义小工具。

未经允许不得转载:WordPress笔记 » WordPress Bootstrap框架制作主题系列 – 自定义侧栏小工具样式