利用Bootstrap构建你的响应式WordPress主题( 六）

侧边栏的功能非常强大，扩展性定制性都非常的高，很多小工具都要放到这里，今天我们只是做一个初级入门教程，放入常用的分类目录、最新文章、标签云、文章存档等功能。

《利用Bootstrap构建你的响应式WordPress主题》目录导航

1、建立基本主题模板和安装主题
2、页头和页脚，加载引入我们主题必须的css，js文件
3、主题注册Bootstrap菜单、搜索框和导航
4、首页设计index.php
5、创建single.php页
6、创建sidebar.php页
7、创建comments.php页
8、创建archive.php页

九、创建sidebar.php

1、静态布局

```
 <div class="col-md-3">
```
```
       <h4>分类目录</h4>
```
```
        <ul>
```
```
          .......
```
```
        </ul>     
```
```
        <h4>最新文章</h4>
```
```
        <ul>
```
```
           <li>......</li>
```
```
        </ul>
```
```
        <h4>标签云</h4>
```
```
        <p>......</p>               
```
```
        <h4>文章存档</h4>
```
```
        <ul>
```
```
        .......
```
```
        </ul> 
```
```
 </div>
```

2、加入功能判断函数代码如下：

```
 
```

    <?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; ?>
```

3、替换以下页面的边栏静态代码
在index.php、archive.php、page.php和single.php页面的边栏代码处改为：

```
<?php get_sidebar(); ?>
```

4、让我们的主题支持侧边栏小工具挂件
目前我们的主题还不支持在WordPress后台 – 外观 – 小工具，可以正常地拖动小工具到侧边栏的，无法让更多的小工具放到我们的边栏，我们需要在functions.php里注册我们的边栏小工具，想要了解更多功能建议你阅读 WordPress 函数register_sidebar()创建主题侧边栏 |511遇见
好了，打开functions.php复制以下代码我们就可以使用WordPress后台 – 外观 – 小工具了，这样让我们的侧边栏更加强大

if( function_exists('register_sidebar') ) {

```
	register_sidebar(array(
```
```
		'name' => 'First_sidebar',
```
```
		'id'           => 'sidebar-1',
```
```
		'before_widget' => '',
```
```
		'after_widget' => '',
```
```
		'before_title' => '<h4>',
```
```
		'after_title' => '</h4>'
```
```
	));
```
```
}
```

511遇见

不一样的遇见

利用Bootstrap构建你的响应式WordPress主题( 六）

您可能感兴趣的文章:

相关文章: