让 WordPress 主题支持侧边栏切换

Aug 23rd, 2008 Add Comment
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

image

状态二:双侧边栏, 没使用 Widget

image

状态三: 单侧边栏, 使用 Widget

image

状态四: 双侧边栏, 顶部侧边栏使用 Widget

image

状态五: 双侧边栏, 底部侧边栏使用 Widget

image

状态六: 双侧边栏, 顶部和底部侧边栏都使用 Widget

image

看完教程, 你大概已经知道怎么弄, 也知道为什么要这么弄了.
可能你还会问: 为什么要用上下两个侧边栏, 而不用左右两个侧边栏? (貌似左右栏用得更多) 是的, 我知道大部分人都在用左右栏, 但我只想用一个简单的例子告诉大家如何切换, 而要将上下两侧边栏换为居左居右并不会很难, 只需要修改一下 CSS 代码, 也许你可以看看我的主题 Blocks 是怎么实现的. :wink:

演示主题:

下载: classic_with_sidebar_switcher

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 让 WordPress 主题支持侧边栏切换

  1. http://0.gravatar.com/avatar/228e2a91b95e05febdb39b8d462d902b?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    太棒了!

    日后,可以集成到WordPress主题中了!

  2. http://0.gravatar.com/avatar/8bc5a10d6cd90aec2d2e24b53042856f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    技术文章,呵呵 :smile:

  3. http://1.gravatar.com/avatar/7060dfb9a4706f749898fb7b915aa5da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    mg12:
    @老N
    代码比较简单, 可能要先理一理逻辑. 三个星自由它的道理.
    @锐风
    哈~ 你竟然看明白了...

    你很不自信啊..

    事实上, 你的文章确实写的不够详细.. 没准将来我会改一下自己发布..

  4. http://0.gravatar.com/avatar/09fe0e23139c093cdb32752ee9175119?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    一团雾水,呵呵,看来我是不打算看懂的了,支持一下:)

  5. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @老N
    代码比较简单, 可能要先理一理逻辑. 三个星自由它的道理.

    @锐风
    哈~ 你竟然看明白了...

  6. http://1.gravatar.com/avatar/7060dfb9a4706f749898fb7b915aa5da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    非常感谢, 我的 simple9th 已经加上了该功能!

  7. http://1.gravatar.com/avatar/7060dfb9a4706f749898fb7b915aa5da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    老N:
    好好,好复杂啊……

    其实米那么玄乎..
    某人提供的那段 php 代码你根本就不必去研究..

    你只需要把 html 的结构构建好久米沙问题了..

  8. http://0.gravatar.com/avatar/2de66d92ac8d311a1d1fce594004db30?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    好好,好复杂啊……

  9. http://1.gravatar.com/avatar/10e5731d1a8aed7f69f55e9f6dbc92d7?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    PS. 为啥AJAX Comment edit 和 Ctrl+Enter 都没有了…… :cry:

  10. http://1.gravatar.com/avatar/10e5731d1a8aed7f69f55e9f6dbc92d7?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    mg12每次教材都很赞~做个合集嘛~

  11. http://1.gravatar.com/avatar/7060dfb9a4706f749898fb7b915aa5da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    见鬼!! 我的新主题也准备加这个功能.. mg12 同志你怎么和我想一起了... 啊..
    害得最后成我抄袭了..

  12. http://1.gravatar.com/avatar/7c9412d8d9386b950a3ebfe8bfedc053?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    目前还没用多栏

  13. http://0.gravatar.com/avatar/60a27f1b87afcbe5359820fa7d590b62?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    做一个多功能主题也不错哦,呵呵~~

  14. http://0.gravatar.com/avatar/28abf68414bf71deaba661b7ba1c332e?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    正合烦恼边栏而又不想换主题的同学...

    第一张图挂了

  15. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @Alan
    Sorry, 最后三个图片做错了, 现在已经修正...

  16. http://1.gravatar.com/avatar/bc0c69a6bf72455c4abb653a1d70747a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    原来坐了沙发,沙发板凳都坐了吧 :lol:

  17. http://1.gravatar.com/avatar/bc0c69a6bf72455c4abb653a1d70747a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    坐板凳来学习

  1. Loading...