• 亦之博客- 最专业的wordpress主题免费收集分享平台,WordPress免费主题应有尽有!http://yizhiboke.com
  • 公告:网站最近做了下固定链接,如有访问却看不到的文章可以在网址后缀加.html.
  • 秀人蜜| 秀人网倾力打造最有视觉效果的美女图片网站——www.xiuren.me
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏 亦之博客
  • 一秒钟记住我们的网址:www.yizhiboke.com

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

WordPress主题制作 admin 2年前 (2017-06-11) 431次浏览 已收录 0个评论 扫描二维码

前面两篇教程讲到了将头部和底部公用的代码提取到单独的一个文件中,同样的道理,对于博客主题来说,侧边栏也基本是公用的(也许有些页面不一样),一般来说我们也将侧边栏公用的代码提取出来放到一个单独的文件中,当然侧边栏的功能不仅仅是这样,有了侧边栏文件,通过代码可以从后台往侧边栏添加小工具。
在主题文件夹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"> </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,下面提供露兜博客上的新的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"> </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>',   
  ));   
 }  

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


一秒钟记住我们的网址:www.yizhiboke.com转载请注明:WordPress主题制作教程(八):制作侧边栏sidebar.php
喜欢 (0)
[36980974@qq.com]
分享 (0)
admin
关于作者:
网络虽无边,处处皆是缘。君若有空余,不妨常来玩 www.yizhiboke.com
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址