WordPress主题制作进阶#4展示博客文章

我们之前创建了主题并添加了标题和导航栏，接下来学习如何用WordPress提供的主循环展示博客文章，我们现在页面上的博客是写在HTML中的静态内容，但是在集成了WordPress的页面中，所有的内容都应该是动态的。

1、添加主循环

回到我们的index.php文件中，然后转到container content div的地方，我们把博客的主循环创建在main block div内部。代码如下：

<div class="main block">
       <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post(); ?>
                <article class="post">
                    <h2><?php the_title(); ?></h2>
                    <p class="meta">Posted at 11:00 on May 9 by admin</p>
                    <?php the_content(); ?>
                    <a class="button" href="#">Read More</a>
                </article>
            <?php endwhile; ?>
       <?php else : ?>
            <?php echo wpautop('Sorry, no posts were found'); ?>
       <?php endif; ?>  
</div>

保存代码，到前端刷新页面：

2、添加分类

我们到后台再添加一篇博客，同时创建一个IT类别，你也可以创建一些其他类别，但它们并不重要。 我们并不是真正处理特定内容，而是仅仅针对示例内容：

你会发现元数据仍然是静态的，Read More按钮也是如此，当我们点击这个按钮时，它什么也没做。

3、添加动态元数据

接下来让我们解决这个问题。 回到我们的post循环中，找到class =“meta”的p标签，我们进行以下更改让它变成动态的。

时间格式化&显示作者

<p class="meta">
	发布于 <?php the_time('F j, Y g:i a');  ?> by <?php the_author(); ?>
</p>
<?php the_content(); ?>
<a class="button" href="#">Read More</a>

这段代码与php日期函数的参数有关，the_time(‘F j, Y g:i a’)函数内的参数是为了将输出的时间格式化。the_author()会调用博客作者的用户名。

如果我们希望能够单击作者姓名，然后看到该用户归档的所有帖子。 这也很容易做到。 我们只需要提供一个链接，如下所示。 在链接中，我们输入php echo get_author_posts_url（），然后传递get_the_author_meta（）和ID：

<a href="<?php echo get_author_posts_url( get_the_author_meta('ID')); ?>">
	<?php the_author(); ?>
</a> 

保存代码，到前端刷新页面

我们发现作者看不见了，鼠标经过时其变为黑色。我们进入CSS文件中找到meta类，在article.post .meta下方添加一段样式将其修复。

article.post .meta a{
    color:#fff;
}

获取文章类别

现在我们希望可以获得帖子的类别。为此，我们回到index.php文件，我们来更新代码，在前面提到的the_author()的a结束标签之后添加如下代码块：

</a>
 | Posted In
	<?php
          $categories = get_the_category();
          $separator = ", ";     $output = '';
          if($categories){
                foreach($categories as $category){
                      $output .= '<a href="'.get_category_link($category->term_id).'">'.
                      $category->cat_name.'</a>'.$separator;
                }
          }
          echo trim($output, $separator);
    ?>
</p>

到前端刷新看看：

现在如果我点击IT，它会把我们带到类别/IT，你只能看到这个帖子在这里。

4、削减博客字数&修正Read More按钮

现在我们想要的最后一件事是文本更短，让阅读更多按钮工作。 因此，我们将转到我们放置内容的位置，并将其缩短，我们可以将the_content()更改为the_excerpt()，并修改Read more按钮的a标签，如此处所示：

</p>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>"> Read More</a> 

回到前端页面刷新，文章变短了

默认缩略字数是55，如果你想调整字数多少，我们在上一个项目中学过，只需在functions.php中加入以下代码：

// Excerpt Length
function set_excerpt_length(){
	return 33;
}
add_filter('excerpt_length', 'set_excerpt_length'); 

点击 Read More 按钮，会跳转到特定的帖子：

下一节，我们将学习如何添加评论表单以及如何将特色图片添加到我们的帖子中。