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

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

1、静态布局

  1.  <div class="col-md-3">
  2.        <h4>分类目录</h4>
  3.         <ul>
  4.           .......
  5.         </ul>     
  6.         <h4>最新文章</h4>
  7.         <ul>
  8.            <li>......</li>
  9.         </ul>
  10.         <h4>标签云</h4>
  11.         <p>......</p>               
  12.         <h4>文章存档</h4>
  13.         <ul>
  14.         .......
  15.         </ul> 
  16.  </div><!-- /.blog-sidebar -->

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

  1.  <!-- Sidebar -->
  2.     <?php if ( !function_exists('dynamic_sidebar') 
  3.                         || !dynamic_sidebar('First_sidebar') ) : ?>
  4.         <h4>分类目录</h4>
  5.         <ul>
  6.             <?php wp_list_categories('depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0'); ?>
  7.         </ul>
  8.     <?php endif; ?>
  9.  
  10.     <?php if ( !function_exists('dynamic_sidebar') 
  11.                             || !dynamic_sidebar('Second_sidebar') ) : ?>        
  12.         <h4>最新文章</h4>
  13.         <ul>
  14.             <?php
  15.                 $posts = get_posts('numberposts=6&orderby=post_date');
  16.                 foreach($posts as $post) {
  17.                     setup_postdata($post);
  18.                     echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
  19.                 }
  20.                 $post = $posts[0];
  21.             ?>
  22.         </ul>
  23.     <?php endif; ?>
  24.  
  25.     <?php if ( !function_exists('dynamic_sidebar') 
  26.                             || !dynamic_sidebar('Third_sidebar') ) : ?> 
  27.         <h4>标签云</h4>
  28.         <p><?php wp_tag_cloud('smallest=8&largest=22'); ?></p>
  29.     <?php endif; ?>
  30.  
  31.     <?php if ( !function_exists('dynamic_sidebar') 
  32.                         || !dynamic_sidebar('Fourth_sidebar') ) : ?>                    
  33.         <h4>文章存档</h4>
  34.         <ul>
  35.             <?php wp_get_archives('limit=10'); ?>
  36.         </ul>
  37.     <?php endif; ?>

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

  1. <?php get_sidebar(); ?>

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

  1. if( function_exists('register_sidebar') ) {
  2. 	register_sidebar(array(
  3. 		'name' => 'First_sidebar',
  4. 		'id'           => 'sidebar-1',
  5. 		'before_widget' => '',
  6. 		'after_widget' => '',
  7. 		'before_title' => '<h4>',
  8. 		'after_title' => '</h4>'
  9. 	));
  10. }

发布日期:

所属分类: BootStrap, WordPress 主题 标签: