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

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

<!-- Column 2 / Sidebar -->   
    <div class="grid_4">   
        <h4>Catagories</h4>   
        <ul class="sidebar">   
            <li><a href="">So who are we?</a></li>   
            <li><a href="">Philosophy</a></li>   
            <li><a href="">History</a></li>   
            <li><a href="">Jobs</a></li>   
            <li><a href="">Staff</a></li>   
            <li><a href="">Clients</a></li>   
        </ul>   
        <h4>Archives</h4>   
        <ul class="sidebar">   
            <li><a href="">January 2010</a></li>   
            <li><a href="">December 2009</a></li>   
            <li><a href="">Novemeber 2009</a></li>   
            <li><a href="">October 2009</a></li>   
            <li><a href="">September 2009</a></li>   
            <li><a href="">August 2009</a></li>   
        </ul>   
    </div>   
    <div class="hr grid_12 clearfix">&nbsp;</div>  

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

<?php get_sidebar(); ?> 

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

<?php get_sidebar(1); ?>

这个代码加载sidebar-1.php，有的人希望网站上的首页、内页、分类页等各个页面的侧边栏不一样，这样就需要有多个侧边栏，这时候就得给这个函数加参数了。
为了适应WordPress程序，我们还要对sidebar.php做一些微调，下载新的样式表style.css，替换Aurelius目录下的style.css

编辑sidebar.php文件，将里面的代码删除，因为那些都是静态的，我们需要从后台设置小工具，所以删除了，改成：

<!-- Column 2 / Sidebar -->   
   <div class="grid_4">   
          
   <?php if ( !function_exists('dynamic_sidebar')    
                       || !dynamic_sidebar('First_sidebar') ) : ?>   
       <h4>分类目录</h4>   
       <ul>   
           <?php wp_list_categories('depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0'); ?>   
       </ul>   
   <?php endif; ?>   
          
   <?php if ( !function_exists('dynamic_sidebar')    
                           || !dynamic_sidebar('Second_sidebar') ) : ?>           
       <h4>最新文章</h4>   
       <ul>   
           <?php   
               $posts = get_posts('numberposts=6&orderby=post_date');   
               foreach($posts as $post) {   
                   setup_postdata($post);   
                   echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';   
               }   
               $post = $posts[0];   
           ?>   
       </ul>   
   <?php endif; ?>   
      
   <?php if ( !function_exists('dynamic_sidebar')    
                           || !dynamic_sidebar('Third_sidebar') ) : ?>    
       <h4>标签云</h4>   
       <p><?php wp_tag_cloud('smallest=8&largest=22'); ?></p>   
   <?php endif; ?>   
          
   <?php if ( !function_exists('dynamic_sidebar')    
                       || !dynamic_sidebar('Fourth_sidebar') ) : ?>                       
       <h4>文章存档</h4>   
       <ul>   
           <?php wp_get_archives('limit=10'); ?>   
       </ul>   
   <?php endif; ?>   
      
   </div>   
   <div class="hr grid_12 clearfix">&nbsp;</div>  

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

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

腾飞资源网永久会员

打赏 收藏 海报 链接