WordPress双侧边栏实现

制作WordPress主页时，由于不是所有主题都带有两个侧栏，有可能会遇到单个侧边栏不够用的情况：当侧边栏内容过多时，就会显得很长。因此我研究了一下如何为单侧栏主题再加上一个侧栏。（本文针对的是我自己用的主题，仅代表一种思路，若代码能力不强，一点WordPress框架都不懂建议还是别改了）

我的WordPress使用的主题是LineDay，默认文章页在左侧，带有右侧栏。默认的主题格外空旷，两边都有很大的边距，感觉有点浪费，因此考虑把宽度弄大一点，再带上一个左侧栏，放一些无关紧要的东西，同时在手机端下隐藏左侧栏。

首先需要简单了解WordPress侧边栏的生成原理。我了解到需要先在主题文件下的functions.php里注册一个sidebar，下面是我找到的一个示例：

if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'sidebar1',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
));

但我随手粘贴上去，发现样式不对（样式对就怪了），因此我找到了我的主题文件里类似的一段代码，即为主题自带的侧边栏样式：

register_sidebar( array(
        'name'          => __( 'Sidebar', 'lineday' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h1 class="widget-title">',
        'after_title'   => '</h1>',
    ) );

将其复制到functions.php文件里，然后将id原先的sidebar-1改成sidebar-2即可。以上这段代码出现在主题文件的library文件夹下widgets.php文件里。

接下来需要在模板文件中导入这个侧栏。方法也很简单，先来摸透导入侧边栏的原理，主题文件里有一个sidebar.php的文件，打开一看发现只有一句看似有用的代码：

<div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
	<?php dynamic_sidebar('sidebar-1'); ?>
</div>

另外还有一个page.php的文件，其中有一句<?php get_sidebar(); ?>

通过官方文档了解到get_sidebar()函数的用法是这样的：get_sidebar($name)可以调用引入sidebar-name.php文件，默认为None。

于是我重新建立了sidebar-left.php与sidebar-right.php文件，分别引入以下两段代码：

<?php
/**
 * The sidebar containing the main widget area.
 *
 * @package _s
 */
if (!is_active_sidebar('sidebar-1')) {
	return;
}
?>
<div id="secondary" class="widget-area hidden-xs hidden-sm col-md-3" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
	<?php dynamic_sidebar('sidebar-1'); ?>
</div>
<!-- #secondary -->

<?php
/**
 * The sidebar containing the main widget area.
 *
 * @package _s
 */
if (!is_active_sidebar('sidebar-2')) {
	return;
}
?>
<div id="tertiary" class="widget-area col-sm-12 col-md-3" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
	<?php dynamic_sidebar('sidebar-2'); ?>
</div>
<!-- #teritary -->