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

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

1、网页布局代码
将所有的内容放入一个container中居中,然后通过bootstrap的栅格系统分为左9右3的布局。右三用来输出sidebar的内容,代码如下:

  1. <div class="container">
  2.     <div class="row">
  3.       <div class="col-md-9">
  4.           <div class="post-content">
  5.             <h2 class="post-title">文章标题</h2>
  6.             <div>
  7.              文章内容
  8.             </div>
  9.             <div>
  10.              标签:
  11.             </div>
  12.             <ul class="pager">
  13.               <li class="next">上一篇</li> 
  14.               <li class="previous">下一篇</li> 
  15.             </ul>
  16.           </div>
  17.           <div class="post-comment">
  18.            评论部分
  19.           </div>
  20.         </div>
  21.       <div class="col-md-3">
  22.           导入边栏
  23.        </div>
  24.     </div>
  25. </div>

2、加入函数命令,代码如下

  1. <?php get_header();?>
  2. <div class="container">
  3.   <?php while(have_posts()):the_post();?>
  4.     <div class="row">
  5.       <div class="col-md-9">      
  6.           <div class="post-content">
  7.             <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  8.             <div>
  9.               <?php the_content(); ?>
  10.             </div>
  11.             <div><?php the_tags('标签:', ', ', ''); ?> </div>
  12.             <ul class="pager">
  13.               <li class="next"><?php previous_post_link('%link'); ?></li> 
  14.               <li class="previous"><?php next_post_link('%link'); ?></li> 
  15.             </ul>
  16.           </div>
  17.           <div class="post-comment">
  18.             <?php comments_template(); ?>         
  19.         </div>
  20.       </div>
  21.       <div class="col-md-3">        
  22.           <?php get_sidebar(); ?>      
  23.       </div>
  24.     </div>
  25.   <?php endwhile;?>
  26. </div>
  27. <?php get_footer();?>

发布日期:

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