首页 / WordPress开发 / WordPress主题制作教程(八):制作侧边栏sidebar.php

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

    • 珂李斯

    发布于

    by

    前面两篇教程讲到了将头部和底部公用的代码提取到单独的一个文件中，同样的道理，对于博客主题来说，侧边栏也基本是公…

    前面两篇教程讲到了将头部和底部公用的代码提取到单独的一个文件中，同样的道理，对于博客主题来说，侧边栏也基本是公用的(也许有些页面不一样)，一般来说我们也将侧边栏公用的代码提取出来放到一个单独的文件中，当然侧边栏的功能不仅仅是这样，有了侧边栏文件，通过代码可以从后台往侧边栏添加小工具。
    在主题文件夹contentthemesAurelius中新建一个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,现在你可以在后台往侧边栏里面拖放小工具了，然后去前台看看效果。。
    下面提供经过本次修改的主题文件包
    下载该文件

    类别：WordPress开发、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！