不会健身的程序员
不是好作家

深入浅出wordpress主题制作(八)侧边栏sidebar.php

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

接下来将archive.php、contact.php、page.php和single.php中对应的代码也改了。可以看到这个函数跟获取头部、底部函数灰常相似。get_sidebar()函数会加载sidebar.php文件,不过get_sidebar()函数是可以加参数的。

比如:

<?php get_sidebar(1); ?> 

这个代码加载sidebar-1.php,有的人希望网站上的首页、内页、分类页等各个页面的侧边栏不一样,这样就需要有多个侧边栏,这时候就得给这个函数加参数了。

编辑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>',
    ));
}

通过上面的代码我们可以注册一个侧边栏,然后在后台通过添加函数注册一个侧边栏,添加了这个函数,你的主题就支持侧边栏功能了,在后台小工具页面就能看到有侧边栏选项。

OK,现在你可以在后台往侧边栏里面拖放小工具了,然后去前台看看效果。。

知识点

  1. 在这篇文章中我们知道,侧边栏通过后台的主题 > 小工具进行添加
  2. get_sidebar函数的使用
  3. 注册侧边栏的方法

下载

最后附上小林依据本篇文章所做的修改,给大家提供参考,传送门

赞(0)
转载请注明出处:林俊龙博客 » 深入浅出wordpress主题制作(八)侧边栏sidebar.php

评论 抢沙发

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

年年岁岁花相识,岁岁年年人不同

给我留言网站地图

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏