让 WordPress 主题支持侧边栏切换
作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求.
可能一些朋友曾为选用双栏主题 (单侧边栏) 还是三栏主题 (双侧边栏) 而烦恼过. 下面我们以 Classic 主题为例, 谈谈如何在主题中方便地切换单侧边栏和双侧边栏. 最后我会提供修改后的主题.
在阅读本教程之前, 你必须对下列主题技巧有一定的认识.
1. 知道如何为主题添加管理选项
2. 知道如何让主题支持 Widget
添加管理选项:
通过 为主题添加管理选项 一文, 我们已经学会如何为主题添加一个选项.
可以使用管理项来控制侧边栏的数量, 在主题文件中获取侧边栏的数量, 对不同的数量作出不同的处理, 以达到在不同数量侧边栏之间切换的目的.
// 侧边栏数量, 默认为单侧边栏 $options['sidebar'] = 1;
// 获得最新提交的值 $options['sidebar'] = $_POST['sidebar'];
<select name="sidebar" size="1"> <!-- 单侧边栏 --> <option value="1" <?php if($options['sidebar'] != 2) echo ' selected '; ?>><?php _e('Single', 'classic'); ?></option> <!-- 双侧边栏 --> <option value="2" <?php if($options['sidebar'] == 2) echo ' selected '; ?>><?php _e('Double', 'classic'); ?></option> </select> <?php _e('sidebar(s)', 'classic'); ?>.
添加 Widget 支持:
因为要在单侧边栏和双侧边栏中切换, 所以我们需要对不同的两种模式定义两个 Widget 初始化的分支.
这里比较特殊, 为了在代码中正确获取 Widget 信息, 就算是单侧边栏也需要起一个别名. 就像代码中的 Sidebar_single. 当侧边栏个数为 1 时, 登记 Sidebar_single. 当侧边栏个数为 2 时, 登记 Sidebar_top 和 Sidebar_bottom.
// Widgets $options = get_option('classic_options'); // 单侧边栏 if(function_exists('register_sidebar') && $options['sidebar'] == 1) { register_sidebar(array( 'name' => 'Sidebar_single', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); // 双侧边栏 } else if(function_exists('register_sidebar') && $options['sidebar'] == 2) { register_sidebar(array( 'name' => 'Sidebar_bottom', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); register_sidebar(array( 'name' => 'Sidebar_top', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); }
修改侧边栏结构:
首先要明确, 我们现在需要双侧边栏结构. 怎样将双侧边栏变为单侧边栏呢? 只要将前一个侧边栏的结束标签和后一个侧边栏的开始标签删除, 两个侧边栏就合并为一个侧边栏了. 单纯的文字很难将我的想法和实现表达出来, 你可以接着看下面的代码和示例图片.
<ul class="sidebar_1"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_single') ) : // single ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_top') ) : // top ?> <!-- TODO: 顶部侧边栏内容 --> <?php endif; // top ?> <?php if ($options['sidebar'] >= 2) : ?> </ul> <ul class="sidebar_2"> <?php endif; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_bottom') ) : // bottom ?> <!-- TODO: 底部侧边栏内容 --> <?php endif; // bottom ?> <?php endif; // single ?> </ul>
OK, 这就是侧边栏代码结构了. 它可以完美得实现单双侧边栏间的切换. 但它是怎么工作的呢? 我将在后面用图片列出它的 6 种可能出现的状态.
因为主题已经支持 Widget 了, 所以代码中 function_exists('dynamic_sidebar') === true, 则 !function_exists('dynamic_sidebar') === false.
记得添加 Widget 支持时写的代码吗? 侧边栏为 1 时 sidebar_single 有效, 侧边栏为 2 时, sidebar_top 和 sidebar_bottom 有效. 这是贯穿整个思路的关键.
备注:
红色: 表示选中代码的值是 false, 不通过
绿色: 表示选中代码的值是 true, 通过
蓝色: 表示选中部分将被选用的 widgets 所取代
灰色: 表示选中部分代码将会失效
状态一: 单侧边栏, 没使用 Widget
状态二:双侧边栏, 没使用 Widget
状态三: 单侧边栏, 使用 Widget
状态四: 双侧边栏, 顶部侧边栏使用 Widget
状态五: 双侧边栏, 底部侧边栏使用 Widget
状态六: 双侧边栏, 顶部和底部侧边栏都使用 Widget
看完教程, 你大概已经知道怎么弄, 也知道为什么要这么弄了.
可能你还会问: 为什么要用上下两个侧边栏, 而不用左右两个侧边栏? (貌似左右栏用得更多) 是的, 我知道大部分人都在用左右栏, 但我只想用一个简单的例子告诉大家如何切换, 而要将上下两侧边栏换为居左居右并不会很难, 只需要修改一下 CSS 代码, 也许你可以看看我的主题 Blocks 是怎么实现的.
演示主题:
下载: classic_with_sidebar_switcher







太棒了!
日后,可以集成到WordPress主题中了!
技术文章,呵呵
你很不自信啊..
事实上, 你的文章确实写的不够详细.. 没准将来我会改一下自己发布..
一团雾水,呵呵,看来我是不打算看懂的了,支持一下:)
@老N
代码比较简单, 可能要先理一理逻辑. 三个星自由它的道理.
@锐风
哈~ 你竟然看明白了...
非常感谢, 我的 simple9th 已经加上了该功能!
其实米那么玄乎..
某人提供的那段 php 代码你根本就不必去研究..
你只需要把 html 的结构构建好久米沙问题了..
好好,好复杂啊……
PS. 为啥AJAX Comment edit 和 Ctrl+Enter 都没有了……
mg12每次教材都很赞~做个合集嘛~
见鬼!! 我的新主题也准备加这个功能.. mg12 同志你怎么和我想一起了... 啊..
害得最后成我抄袭了..
目前还没用多栏
做一个多功能主题也不错哦,呵呵~~
正合烦恼边栏而又不想换主题的同学...
第一张图挂了
@Alan
Sorry, 最后三个图片做错了, 现在已经修正...
原来坐了沙发,沙发板凳都坐了吧
坐板凳来学习