利用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="container">
  2.   <div class="row">
  3.     <div class="col-md-9">          
  4.           <div class="blog-post">
  5.             <h2 class="blog-post-title">文章标题</h2>
  6.             <p class="blog-post-meta">发布时间 by <a href="#">作者</a></p>
  7.             <p>文章内容</p>           
  8.           </div><!-- /.blog-post -->         
  9.           <nav>
  10.             <ul class="pager">
  11.               <li><a href="#">Previous</a></li>
  12.               <li><a href="#">Next</a></li>
  13.             </ul>
  14.           </nav>
  15.         </div><!-- /.blog-main -->

2、WordPress循环,在WordPress代码中添加该页面的标题和内容,标题的代码为 the_title() 内容的代码为 the_content(),建议您阅读 WordPress主题制作基本模版文件以及基本函数,循环代码如下:

  1.  <?php if ( have_posts()):?>
  2. 		   <?php while( have_posts()): the_post();?>
  3.           <div class="blog-post">
  4.             <h2 class="blog-post-title"><?php the_title(); ?></h2>
  5.             <p class="blog-post-meta"><?php the_time('y-m-d')?> by <a href="#"><?php the_author();?></a></p>
  6.  
  7.             <p><?php the_content(); ?></p>
  8.  
  9.           </div><!-- /.blog-post -->
  10.           <?php endwhile; else: ?>
  11.            <p><?php _e('Sorry, 还没有文章发布。'); ?></p>
  12.          <?php endif; ?>

3、加入相关链接
我们添加一个新标签 the_permalink() ,我们可以用其作从主新闻页面链接到独立新闻文章的链接锚点,这个标记应该在 the_title() 外层,WordPress会在当前活动外观主题中查找若干模板文件,首个查找结果将会被用来显示给定页面打开链接,WordPress会按如下顺序查找文件:

  • 页面所选用的"页面模板"
  • page.php
  • index.php
  • 修改后的链接代码如下所示:

    1. <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

    4、为wordpress添加作者名及链接和显示作者文章
    默认情况下,Wordpress将先使用author.php模板然后是archive.php最后是index.php来显示作者信息. 意思是,如果你没有author.php文件, WordPress将使用archive.php, 以此类推。

    如果你想更换作者页面的外观, 你需要创建一个author.php文件(如果主题没有),方法:复制archive.php或index.php,然后根据自己的设计重新修改author.php。(以后设计......)

    1. <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="查看<?php the_author(); ?>所有文章"><?php the_author(); ?></a>

    5、首页文章内容摘要字数限制
    the_content换成以下代码,260摘要显示的字数

    1. <?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 260,"......"); ?>
    1. <?php get_header(); ?>
    2.  
    3. <div class="container">
    4.       <div class="row">
    5.       <div class="col-md-9">
    6.           <?php if ( have_posts()):?>
    7. 		   <?php while( have_posts()): the_post();?>
    8.           <div class="blog-post">
    9.             <h2 class="blog-post-title"><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></h2>
    10.             <p class="blog-post-meta"><?php the_time('y-m-d')?> by <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="查看<?php the_author(); ?>所有文章"><?php the_author(); ?></a></a></p>
    11.  
    12.             <p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 260,"..."); ?></p>
    13.  
    14.           </div><!-- /.blog-post -->
    15.           <?php endwhile; else: ?>
    16.            <p><?php _e('Sorry, 还没有文章发布。'); ?></p>
    17.          <?php endif; ?>
    18.  
    19.           <nav>
    20.             <ul class="pager">
    21.               <li><a href="#">Previous</a></li>
    22.               <li><a href="#">Next</a></li>
    23.             </ul>
    24.           </nav>
    25.  
    26.         </div><!-- /.blog-main -->

    发布日期:

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


    1. 大神,如果用网格(类似九宫格)的排版样式来获取循环的文章,bootstrap框架在html里面应该怎么写html代码,怎么调用循环文章?

    2. 大神,如果用网格(类似九宫格)的排版样式来获取循环的文章,bootstrap框架在html里面应该怎么写html代码,怎么调用循环文章?

        • 有用这个删格在这里能获取循环文章,但是文章排版不美观啊,一排有时会是3列图片正常显示,有时候一排是只有显示1张,就又另外起一行显示

        • 有用这个删格在这里能获取循环文章,但是文章排版不美观啊,一排有时会是3列图片正常显示,有时候一排是只有显示1张,就又另外起一行显示(一排里,只要其中一图高度比较窄,第二排就会在那儿***入一张图,然后继续换行显示。不能像瀑布流那样正常显示

          • 这样的话,bootstrap只能布局,建议你在主题的css中,对图片大小限制一下。