WordPress 不同页面显示不一样的侧边栏

Mar 14th, 2009 Translate Leave a comment Go to comments

本文将告诉你如何在 WordPress 不同的页面显示不同的侧边栏内容. 如: 可以在首页显示 Archives, 但要在其他页面显示 Categories. 为什么要这么做呢? 因为访客在不同的页面会对不一样的内容感兴趣, 在首页可能他们愿意看到目录和索引等内容, 而在单篇文章则会对文章相关内容更加关注. 所以我们可以通过不同的侧边栏 Widgets 来引导访客.

这是个极其简单的主题加工, 本不想多言, 但貌似有些朋友还是不太了解, 所以专门发个文章说说, 老鸟请绕行.

首先要说明的是, 以下操作目前只能通过修改 sidebar.php 或相关代码达到目的. 目前还没发现有这样的插件, 我不知道开发这样一个针对 Widget 的插件是否有价值, 但有兴趣的朋友可以一试.

Okay, 下面我们来个例子吧, 假如现在的 Widget 结构如下: 

1
2
3
4
5
6
7
8

<div class="widget xxx_widget">
	<h3>Widget Title</h3>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</div>

如果我们要在首页显示 Archives, 单篇文章显示 Categories, 其他页面显示 Meta, 则需要改动代码如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php if (is_home()) : ?>
	<div class="widget archives_widget">
		<h3>Archives</h3>
		<ul>
			<?php wp_get_archives(); ?>
		</ul>
	</div>
<?php else if (is_single()) : ?>
	<div class="widget categories_widget">
		<h3>Categories</h3>
		<ul>
			<?php wp_list_cats(); ?>
		</ul>
	</div>
<?php else : ?>
	<div class="widget meta_widget">
		<h3>Meta</h3>
		<ul>
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
		</ul>
	</div>
<?php endif; ?>

不知道你是否已经注意到, 其实关键在 is_home() 和 is_single() 方法的调用, 通过 if 语句限制显示条件. 你可以将它们换成其他限制条件, 以达到不页面的不同地方显示不同内容的目的, 而不仅仅是侧边栏. 还可以参考一下我发布过的那些主题里 archive.php 文件里 Archive 页面的标题是怎么实现的, 只要这个你弄懂了, 其他的就小菜一碟了.

WordPress 已经为我们提供了足够多的页面筛选方法, 以下一些相关资料:
Codex 关于页面限制方法的说明: WordPress Codex - Conditional Tags
你也可以打开 wp-includes/query.php 查看 WordPress 的源代码.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: WordPress 不同页面显示不一样的侧边栏
  1. +2 diggs+2 / -0+1-1
    yinheli | #1
    Mar 14th, 2009 at 21:43

    沙发..
    对了边侧栏最新日志是否可以直接用wp_get_recent_posts(数量)?

    Reply | Quote
  2. 0 diggs+0 / -0+1-1
    LouisMc | #2
    Mar 14th, 2009 at 21:46

    导航条也修改了哦~

    Reply | Quote
  3. +1 digg+1 / -0+1-1
    渴望飞翔的鱼 | #3
    Mar 14th, 2009 at 22:21

    谢谢mg12，辛苦了

    Reply | Quote
  4. +1 digg+1 / -0+1-1
    ibuffalo | #4
    Mar 14th, 2009 at 22:33

    很受启发。如果有时间，一定要试试下。问一下，像你例子里这样子后，如果再在后台添加widgets，是否每个页面都显示呢？

    Reply | Quote
  5. +1 digg+1 / -0+1-1
    ucax | #5
    Mar 14th, 2009 at 23:21

    謝謝很受用。

    Reply | Quote
  6. 0 diggs+0 / -0+1-1
    流星 | #6
    Mar 14th, 2009 at 23:24

    我也想问ibuffalo问题
    我都后台添加的widget

    Reply | Quote
  7. 0 diggs+0 / -0+1-1
    mg12 | #7
    Mar 15th, 2009 at 00:01

    @yinheli
    没有这个函数吧, 我是用 get_posts 获取后自己加工的.

    @LouisMc
    Nice 吧. 哇哈哈~

    @渴望飞翔的鱼
    不谢.

    @ibuffalo, @流星
    不行, 但是你可以加到 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('north_sidebar') ) 以外部分, 就不会被后台 Widgets 功能影响, 但是像一般的方式是不行的, 希望有人做这样的插件吧.

    Reply | Quote
  8. -1 diggs+0 / -1+1-1
    Willy | #8
    Mar 15th, 2009 at 02:01

    In english, please!!! :arrow:

    Reply | Quote
  9. +1 digg+1 / -0+1-1
    willerce | #9
    Mar 15th, 2009 at 02:13

    我用另外一个方法实现了，貌似比你这麻烦。 :???:
    http://willerce.com/post/24/

    Reply | Quote
  10. +1 digg+1 / -0+1-1
    达米安 | #10
    Mar 15th, 2009 at 09:18

    HOHO... 我有时跑到你这来, 直接研究你这里的源码, "偷" 到不少好东西! :razz:

    PS: 现在这样的导航, 灰常 nice! :shock:

    Reply | Quote
  11. 0 diggs+0 / -0+1-1
    天涯始之堕落 | #11
    Mar 15th, 2009 at 09:55

    不错，不错，学习中,

    Reply | Quote
  12. 0 diggs+0 / -0+1-1
    hiphone | #12
    Mar 15th, 2009 at 10:58

    hiphone一天学习一点

    Reply | Quote
  13. 0 diggs+0 / -0+1-1
    吖Bee | #13
    Mar 15th, 2009 at 13:18

    jQuery Menu 看来iNove越来越完美了~ :smile: 如果能原生支持jQuery ajax提交评论那就更好了~

    Reply | Quote
  14. 0 diggs+0 / -0+1-1
    笨猫 | #14
    Mar 15th, 2009 at 13:19

    我想问问INOVE下一版本啥时候出呢？有时候去网吧打开你的站点有点卡。是空间的事还是文章多了就容易卡？目前我的站点就是有点慢。有的用了INOVE如果文章不多的就快多了。

    Reply | Quote
  15. 0 diggs+0 / -0+1-1
    服装印花 | #15
    Mar 15th, 2009 at 14:24

    还有就是右上角的订阅的东东可以做个选项要不要放着.由用的人来决定.生活快乐.

    Reply | Quote
  16. 0 diggs+0 / -0+1-1
    Rui | #16
    Mar 15th, 2009 at 14:26

    @Willy
    Gm will be more and more well-known and there will be a lot of foreigners come here.
    If our dear gm writing tutorials in both English and Chinese languages, then, will be better^^
    GM，将Categories做到导航栏并能下拉菜单，建立子级Categories页面的教程什么时候有空写呢？严重期待ing :oops:

    Reply | Quote
  17. 0 diggs+0 / -0+1-1
    Showfom | #17
    Mar 15th, 2009 at 15:48

    顶部的导航做的不错，偷去用咯

    Reply | Quote
  18. 0 diggs+0 / -0+1-1
    锐眼看世界 | #18
    Mar 15th, 2009 at 16:29

    非常不错的讲解，非常受益

    Reply | Quote
  19. 0 diggs+0 / -0+1-1
    mg12 | #19
    Mar 15th, 2009 at 23:10

    @Willy
    Is there necessary to build an English blog? My English is very poor... :cry:

    @willerce
    我以前看过你的, 你那样其实是用了两个侧边栏了.

    @达米安
    呵呵~

    @吖Bee
    可能会令你失望, iNove 主题是不会集成 jQuery 的.

    @笨猫
    不会吧.

    @服装印花
    下个版本有这功能.

    @Rui
    想累死我是吧? 找个人帮我翻译得了.

    Reply | Quote
  20. 0 diggs+0 / -0+1-1
    laomao | #20
    Mar 16th, 2009 at 14:09

    顶部的导航导航怎么改撒？
    那样好看多了

    Reply | Quote
  21. 0 diggs+0 / -0+1-1
    5mu | #21
    Mar 17th, 2009 at 11:23

    用ＴＷ访问你的站点经常假死 :idea:

    Reply | Quote
  22. 0 diggs+0 / -0+1-1
    mircc | #22
    Mar 17th, 2009 at 12:45

    @5mu
    TW上一个版访问主页会假死
    现在这个最新版访问文章页
    也会假死

    Reply | Quote
  23. 0 diggs+0 / -0+1-1
    mg12 | #23
    Mar 17th, 2009 at 13:14

    @laomao
    叫 LavaLamp, 请 Google 之.

    @5mu
    TW 是什么?

    Reply | Quote
  24. 0 diggs+0 / -0+1-1
    chancat | #24
    Mar 17th, 2009 at 14:14

    @mg12
    世界之窗浏览器(The World) :shock:

    Reply | Quote
  25. 0 diggs+0 / -0+1-1
    广播电台 | #25
    Mar 17th, 2009 at 16:32

    这个收藏了先。

    Reply | Quote
  26. +1 digg+1 / -0+1-1
    underone | #26
    Mar 17th, 2009 at 17:48

    恩，这个实用。

    Reply | Quote
  27. 0 diggs+0 / -0+1-1
    HK | #27
    Mar 17th, 2009 at 17:50

    导航栏很酷，能分享不？

    Reply | Quote
  28. 0 diggs+0 / -0+1-1
    Showfom | #28
    Mar 18th, 2009 at 11:38

    @mg12
    看吧，那么多人要你的导航栏了……

    Reply | Quote
  29. 0 diggs+0 / -0+1-1
    elvenchun | #29
    Mar 18th, 2009 at 15:12

    这个博客做的真漂亮了。Wordpress就不会用啊。

    Reply | Quote
  30. 0 diggs+0 / -0+1-1
    锐风 | #30
    Mar 19th, 2009 at 10:36

    其实 so easy 啊.. 和三栏差不太多..

    Reply | Quote
  31. 0 diggs+0 / -0+1-1
    thewise | #31
    Mar 20th, 2009 at 15:51

    其实对我们这些对网页语言，设计一窍不通的人来讲，这样的文章尤其实用。呼唤更多像您这种极简单的主题修改文章面世！

    Reply | Quote
  32. 0 diggs+0 / -0+1-1
    thewise | #32
    Mar 20th, 2009 at 15:58

    @thewise 比如我的文章嵌套评论一直有着巨大问题，框大无嵌套，如果您有空，是否可以抽出点小空来给我帮下忙，不胜感激！

    Reply | Quote
  33. 0 diggs+0 / -0+1-1
    火星人 | #33
    Mar 20th, 2009 at 16:25

    恩，很好，这样WP可以有更好的定制性了。。 :evil:

    Reply | Quote
  34. 0 diggs+0 / -0+1-1
    UFO | #34
    Mar 22nd, 2009 at 13:07

    希望你的下一个主题有这样的功能！

    Reply | Quote
  35. 0 diggs+0 / -0+1-1
    laofan | #35
    Mar 22nd, 2009 at 20:44

    不错,学习了

    Reply | Quote
  36. 0 diggs+0 / -0+1-1
    爱锵锵 | #36
    Mar 26th, 2009 at 02:12

    学习学习

    Reply | Quote
  37. 0 diggs+0 / -0+1-1
    faisal | #37
    Mar 26th, 2009 at 08:08

    please using english.

    Reply | Quote
  38. +1 digg+1 / -0+1-1
    bypop | #38
    Mar 28th, 2009 at 11:09

    不知道为什么，IE6下用iNove侧边栏会被撑到下面去？俺新建的blog啥也没改动

    Reply | Quote
  39. 0 diggs+0 / -0+1-1
    冰古 | #39
    Mar 28th, 2009 at 22:12

    我就想widget可以支持这样。
    不知道新版的widget行不行。

    Reply | Quote
  40. 0 diggs+0 / -0+1-1
    春 | #40
    Apr 10th, 2009 at 12:40

    @爱锵锵
    真的

    Reply | Quote
  41. +1 digg+1 / -0+1-1
    apple4520 | #41
    Apr 11th, 2009 at 12:39

    刚找到一款插件来实现这个效果~
    叫Widget Logic :smile:

    Reply | Quote
  42. 0 diggs+0 / -0+1-1
    ayici | #42
    Apr 27th, 2009 at 14:16

    没有友情链接啊 .... 不知道怎么加这个代码 :cry:

    Reply | Quote
  43. 0 diggs+0 / -0+1-1
    刘军 | #43
    Apr 27th, 2009 at 14:42

    您好,看了你的博客,做的非常漂亮，所以想请你帮我做一个博客！付费也可以。。。我的QQ：332107579

    Reply | Quote
  44. 0 diggs+0 / -0+1-1
    mg12 | #44
    Apr 27th, 2009 at 16:14

    @chancat
    不会吧, 那 TW 只是 IE 的外壳而已, IE 没问题它不应该有问题的.

    @HK
    @Showfom
    http://www.neoease.com/lavalamp-for-wordpress-users/

    @elvenchun
    不会就学啊, 哈哈~

    @thewise
    以后会有更多的.

    @刘军
    已经加了你 QQ.

    Reply | Quote
  45. 0 diggs+0 / -0+1-1
    刘军 | #45
    Apr 27th, 2009 at 17:55

    kwg kwg

    Reply | Quote
  46. 0 diggs+0 / -0+1-1
    fei | #46
    May 14th, 2009 at 09:49

    :shock: 美工好难做啊

    Reply | Quote
  47. 0 diggs+0 / -0+1-1
    seri | #47
    May 27th, 2009 at 19:35

    汗，早点看到这篇文章就好了 囧，偶回头去改改。。 :arrow:

    Reply | Quote
  48. 0 diggs+0 / -0+1-1
    cyclone77 | #48
    May 29th, 2009 at 15:38

    如何让侧边栏变窄些？？？

    Reply | Quote
  49. 0 diggs+0 / -0+1-1
    seri | #49
    Jun 22nd, 2009 at 02:21

    为啥，偶那边做判断，例如index显示A，single显示B，设置了之后，所有的页面死活只显示index那设置的A！ 囧 为啥啊。。。。

    Reply | Quote
  50. 0 diggs+0 / -0+1-1
    Yongd | #50
    Dec 2nd, 2009 at 18:48

    很不错 学习了！

    Reply | Quote
  1. Wordpress不同页面显示不同的侧栏. | Willerce Blog
    Mar 15th, 2009 at 02:28
  2. WordPress不同页面显示不一样的侧边栏 | Huiの世界
    Mar 24th, 2009 at 19:31
  3. WordPress 不同页面显示不一样的侧边栏 - 左岸读书_blog
    Apr 8th, 2009 at 09:08
  4. TaKe it EASy! » Widget Logic让你的Widget显示在需要的页面
    Apr 11th, 2009 at 20:44
  5. 八所物語 » 不同的页面有不同的侧栏
    Apr 19th, 2009 at 23:31
  6. Wordpress不同页面显示不同的侧栏. | 尚街购 |福清网-看福清-福清人才网-福清街心公园-福清论坛
    Apr 29th, 2009 at 02:18
  7. jjw-host » Wordpress不同页面显示不同的侧栏
    Jun 25th, 2009 at 16:38
  8. 定义WordPress的侧栏不同页面显示不同内容 _ 风雪居
    Aug 19th, 2009 at 16:34

Twitter Email feed
RSS feed