wordpress小工具自定义网站的侧边栏

作者: 郑元水 分类: Wordpress 发布时间: 2013-08-24 11:37 ė 12,076 6 3条评论

wordpress后台的小工具可以自由的添加网站的侧边栏内容,让使用wordpress的新手们能够更加方便的设置网站的侧边栏,通常使用wordpress小工具设置后,网站侧边栏的内容基本都是相同的,用wordpress的判断代码也可以实现相同的效果,但对于新手来说,有些困难。今天,我就教大家如何用wordpress小工具自定义网站的侧边栏。

wordpress小工具自定义网站的侧边栏

最终的实现效果如上图所示,可以设置整个网站的侧边栏是一样的,同时还可以让wordpress不同的页页显示不同的侧边栏内容。

1、新建一个PHP文件,命名为widget.php

  1. <?php  
  2.   
  3. if (function_exists('register_sidebar'))  
  4.   
  5. {  
  6.     register_sidebar(array(  
  7.     'name'=>'全站侧栏',  
  8.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s>',  //此处的id和class属性可以根据使用的主题进行更改 
  9.     'before_title'=>'<h3>', 
  10.     'after_title'=>'</h3>', 
  11.     'after_widget'=>'</li>', 
  12.     )); 
  13. } 
  14. { 
  15.     register_sidebar(array( 
  16.     'name'=>'首页侧栏', 
  17.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s">', //此处的id和class属性可以根据使用的主题进行更改 
  18.     'before_title'=>'<h3>', 
  19.     'after_title'=>'</h3>', 
  20.     'after_widget'=>'</div>', 
  21.     )); 
  22. } 
  23. { 
  24.     register_sidebar(array( 
  25.     'name'=>'归档及分类侧栏', 
  26.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s">', //此处的id和class属性可以根据使用的主题进行更改 
  27.     'before_title'=>'<h3>', 
  28.     'after_title'=>'</h3>', 
  29.     'after_widget'=>'</div>', 
  30.     )); 
  31. } 
  32. { 
  33.     register_sidebar(array( 
  34.     'name'=>'文章侧栏', 
  35.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s">', //此处的id和class属性可以根据使用的主题进行更改 
  36.     'before_title'=>'<h3>', 
  37.     'after_title'=>'</h3>', 
  38.     'after_widget'=>'</div>', 
  39.     )); 
  40. } 
  41. { 
  42.     register_sidebar(array( 
  43.     'name'=>'页面侧栏', 
  44.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s">',  //此处的id和class属性可以根据使用的主题进行更改 
  45.     'before_title'=>'<h3>', 
  46.     'after_title'=>'</h3>', 
  47.     'after_widget'=>'</div>', 
  48.     )); 
  49. } 
  50. { 
  51.     register_sidebar(array( 
  52.     'name'=>'搜索侧栏', 
  53.     'before_widget'=>'<div id="%1$s" class="sidebox %2$s">', //此处的id和class属性可以根据使用的主题进行更改  
  54.     'before_title'=>'<h3>',  
  55.     'after_title'=>'</h3>',  
  56.     'after_widget'=>'</div>',  
  57.     ));  
  58. }  
  59.   
  60. ?>  

代码中的第8,17,26,35,44,53行代码.可以根据自己使用主题的DIV进行修改。否刚会显示侧边栏错位或者不美观。

2、在主题functions.php中添加代码,引用widget.php中的内容

  1. <?php  
  2. include("widget.php");  
  3. ?>  

3、将主题所使用的sidebar.php替换为以下的代码

  1. <div class="sidebar">  
  2. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('全站侧栏') ) : ?>  
  3.                     <?php endif; ?>  
  4.                           
  5.                     <?php wp_reset_query();if ( is_home()){ ?>  
  6.                     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('首页侧栏') ) : ?>  
  7.                     <?php endif; ?>  
  8.                     <?php } ?>  
  9.                           
  10.                     <?php wp_reset_query();if ( is_archive() || is_category() ){ ?>  
  11.                     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('归档及分类侧栏') ) : ?>  
  12.                     <?php endif; ?>  
  13.                     <?php } ?>  
  14.                           
  15.                     <?php wp_reset_query();if (is_single()){ ?>  
  16.                     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('文章侧栏') ) : ?>  
  17.                     <?php endif; ?>  
  18.                     <?php } ?>  
  19.                           
  20.                     <?php wp_reset_query();if (is_page()){ ?>  
  21.                     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('页面侧栏') ) : ?>  
  22.                     <?php endif; ?>  
  23.                     <?php } ?>  
  24.                               
  25.                     <?php wp_reset_query();if (is_search()){ ?>  
  26.                     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('搜索侧栏') ) : ?>  
  27.                     <?php endif; ?>  
  28.                     <?php } ?>  
  29.                   
  30. </div>  

三步操作完成后,就可以在wordpress后台的小工具处看到如图所示的效果,可以在小工具中自由的添加自己想要的网站栏目。

本文出自郑元水博客,转载时请注明出处及相应链接。

本文永久链接: http://www.zhengyuanshui.com/847.html

3条评论

  1. 兆杖贾59 2015年10月30日 01:58 回复

    [bofu梦遗]

  2. 游戏试玩 2016年1月12日 23:37 回复

    对于新手来说,有些困难

  3. 很萌 2018年8月16日 16:26 回复

    这个不错,不过很多的模板都自带侧边栏,这个学习一下

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

微信扫一扫,添加150505055

郑元水