文档章节

wordpress主题制作教程(八):制作侧边栏sidebar.php

drewin
 drewin
发布于 2013/05/19 11:34
字数 839
阅读 102
收藏 1

前面两篇教程讲到了将头部和底部公用的代码提取到单独的一个文件中,同样的道理,对于博客主题来说,侧边栏也基本是公用的(也许有些页面不一样),一般来说我们也将侧边栏公用的代码提取出来放到一个单独的文件中,当然侧边栏的功能不仅仅是这样,有了侧边栏文件,通过代码可以从后台往侧边栏添加小工具。
在主题文件夹content\themes\Aurelius中新建一个sidebar.php文件,然后用编辑器打开index.php文件将里面的侧边栏代码剪切出来,粘贴到sidebar.php中,侧边栏代码如下:

  1. <!-- Column 2 / Sidebar -->   
  2.     <div class="grid_4">   
  3.         <h4>Catagories</h4>   
  4.         <ul class="sidebar">   
  5.             <li><a href="">So who are we?</a></li>   
  6.             <li><a href="">Philosophy</a></li>   
  7.             <li><a href="">History</a></li>   
  8.             <li><a href="">Jobs</a></li>   
  9.             <li><a href="">Staff</a></li>   
  10.             <li><a href="">Clients</a></li>   
  11.         </ul>   
  12.         <h4>Archives</h4>   
  13.         <ul class="sidebar">   
  14.             <li><a href="">January 2010</a></li>   
  15.             <li><a href="">December 2009</a></li>   
  16.             <li><a href="">Novemeber 2009</a></li>   
  17.             <li><a href="">October 2009</a></li>   
  18.             <li><a href="">September 2009</a></li>   
  19.             <li><a href="">August 2009</a></li>   
  20.         </ul>   
  21.     </div>   
  22.     <div class="hr grid_12 clearfix">&nbsp;</div>  

剪切之后,在index.php原来的位置加上代码:

  1. <?php get_sidebar(); ?>  

可以看到这个函数跟获取头部、底部函数灰常相似。get_sidebar()函数会加载sidebar.php文件,不过get_sidebar()函数是可以加参数的。
比如:

  1. <?php get_sidebar(1); ?>  

这个代码加载sidebar-1.php,有的人希望网站上的首页、内页、分类页等各个页面的侧边栏不一样,这样就需要有多个侧边栏,这时候就得给这个函数加参数了。
为了适应WordPress程序,我们还要对sidebar.php做一些微调,下载新的样式表style.css,替换Aurelius目录下的style.css,下面提供露兜博客上的新的style.css文件下载链接:
下载此文件
编辑sidebar.php文件,将里面的代码删除,因为那些都是静态的,我们需要从后台设置小工具,所以删除了,改成:

  1. <!-- Column 2 / Sidebar -->   
  2.    <div class="grid_4">   
  3.           
  4.    <?php if ( !function_exists('dynamic_sidebar')    
  5.                        || !dynamic_sidebar('First_sidebar') ) : ?>   
  6.        <h4>分类目录</h4>   
  7.        <ul>   
  8.            <?php wp_list_categories('depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0'); ?>   
  9.        </ul>   
  10.    <?php endif; ?>   
  11.           
  12.    <?php if ( !function_exists('dynamic_sidebar')    
  13.                            || !dynamic_sidebar('Second_sidebar') ) : ?>           
  14.        <h4>最新文章</h4>   
  15.        <ul>   
  16.            <?php   
  17.                $posts = get_posts('numberposts=6&orderby=post_date');   
  18.                foreach($posts as $post) {   
  19.                    setup_postdata($post);   
  20.                    echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';   
  21.                }   
  22.                $post = $posts[0];   
  23.            ?>   
  24.        </ul>   
  25.    <?php endif; ?>   
  26.       
  27.    <?php if ( !function_exists('dynamic_sidebar')    
  28.                            || !dynamic_sidebar('Third_sidebar') ) : ?>    
  29.        <h4>标签云</h4>   
  30.        <p><?php wp_tag_cloud('smallest=8&largest=22'); ?></p>   
  31.    <?php endif; ?>   
  32.           
  33.    <?php if ( !function_exists('dynamic_sidebar')    
  34.                        || !dynamic_sidebar('Fourth_sidebar') ) : ?>                       
  35.        <h4>文章存档</h4>   
  36.        <ul>   
  37.            <?php wp_get_archives('limit=10'); ?>   
  38.        </ul>   
  39.    <?php endif; ?>   
  40.       
  41.    </div>   
  42.    <div class="hr grid_12 clearfix">&nbsp;</div>  

仅仅有代码是不够的,还需要函数支持,现在在主题文件夹下面新建一个文件functions.php 用来放函数代码,在里面添加代码:

  1. //注册侧边栏   
  2. if ( function_exists('register_sidebar') ) {   
  3.   register_sidebar(array(   
  4.     'name'=>'首页侧边栏',   
  5.     'before_widget' => '<li id="%1$s" class="sidebar_li %2$s">',   
  6.     'after_widget' => '</li>',   
  7.     'before_title' => '<h3>',   
  8.     'after_title' => '</h3>',   
  9.   ));   
  10.  }  

通过添加函数注册一个侧边栏,添加了这个函数,你的主题就支持侧边栏功能了,在后台小工具页面就能看到有侧边栏选项。
下面提供露兜博主的functions.php文件:
点此下载该文件
OK,现在你可以在后台往侧边栏里面拖放小工具了,然后去前台看看效果。。

本文转载自:http://www.ludou.org/

共有 人打赏支持
drewin
粉丝 28
博文 121
码字总数 43979
作品 0
海淀
程序员
私信 提问
一步步教你如何用Bootstrap构建WordPress主题-译

在前面的文章Bootstrap & Jetstrap-快速构建你的网站中,我们已经介绍了什么是Bootstrap,以及Bootstrap的简单教程及相应的可视化工具,在本教程中,我们将学习如何用Bootstrap制作我们自己的...

dengjianqiang200
2012/10/24
36.5K
9
wordpress如何添加调用侧边栏小工具功能

wordpress如何添加侧边栏小工具功能? 进入后台的外观-小工具,如果出现以下提示,则表示你的wordpress主题还没有添加小工具: 在主题文件夹下的functions.php文件中添加以下代码: function...

李佳顺
2013/01/11
0
0
WordPress原创主题制作(十二):收关总结

大兵博客原创主题制作全过程完美收关,html5+css3布局,想自己制作一套属于自己个性的主题可以来学习,让你与众不同,WordPress主题制作变简单。 WordPress主题制作系列教程已经全部结束了,...

d大兵
2013/07/03
0
0
wordpress主题的问题

下表列出了一个主题所必备的文件以及其对应的功能。 文件名 功能描述 style.css 主题样式文件,用于存放主题样式 index.php 首页模板文件 header.php 头部模板文件 single.php 单篇文章显示的...

LINDXXX
2016/11/19
5
0
WordPress主题文件层级及调用顺序分析

如果你想制订自己风格主题,熟悉WordPress的主题文件是必不可少的工作之一,只有了解了WordPress工作原理,才可以创作出有效地主 题。然而按照WordPress工作原理,一个index.php文件即可成为...

Luca13
2012/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
9
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0
今天的学习

1,document.location.href:获取整个url 2,str.split(' '):用字符分割字符串 3,$this->load->library(' '):引用图像处理类 4,$this->load->library(' '):引用Email类 5,特殊访问指针$th......

墨冥
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部