在上一节中，我们修改好了WordPress主题trans的首页的状况。本节，我们再来介绍如何修改trans主题首页模板的左侧主体代码。trans主题首页左侧主要展现的是最新文章列表以及分页（如下图）。

目前，这个首页的内容还是死的，是一个静态的文件，wordpress后台发表新的文章，这里也不会发生变化。我们需要实现的是：在我们发表文章后，这里就要发生相应的变化——我们新发表的文章会展示在这个列表中。还有，我们要实现点击分页按钮时，也能跳到对应的页面。下面，我们就来一步一步地操作。

第一步：左侧删除掉所有的文章列表，只保留一条。

原index.html静态模板的左侧列表中有5个文章，代码如下图：

可以看出，他们的代码都是一样的。这里，我们留下第一条，其余4条全部删除掉。它的代码如下：

< div class="left_bottom">
< div class="list">
< ul class="list_h">
< a href="/">网站索引量一直在下降是什么原因
< /ul>
< ul class="list_con">
< ul class="list_con_left">
< a href="/">< img src="./images/index_17.jpg" alt="">
< /ul>
< ul class="list_con_right">
< li>所谓网站索引量，就是指搜索引擎把你的网页内容索取到数据库中。…
< li>
< span class="dashicons-before dashicons-admin-users">木易
< span class="dashicons-before dashicons-calendar-alt">2020年5月21日
< span class="dashicons-before dashicons-visibility">274
< /li>
< /ul>
< /ul>
< /div>
< /div>

第二步：添加wordpress循环语句。

因为，在首页左侧文章列表中，每一个模块的布局是一样的，只是每个模块中的数据不一样而已，所以，我们只需要保留一个模块，然后，循环调用wordpress的文章数据添加到这个模块中。这里，我们先调用wordpress循环语句，让这个模块循环输出。wordpress网站有多少篇文章，它就会循环多少次，当然，这个循环会受到分页的限制，这个分页我们在后面再说。

在< div class="left_bottom">这个标签前添加如下代码：

< ?php
if ( have_posts() ): //如果有文章
while ( have_posts() ) : //就循环所有文章
the_post(); //循环一次，就调用一次数据
?>

在< div class="left_bottom">的结束标签后面，添加结束循环和结束如果的语句，代码如下：

< ?php
endwhile;
endif;
?>

一定要结束循环，也要结束如果，否则会报错。

第三步：给循环体里的模块添加数据。

循环体里包含的是< div class="list">这个标签，我们需要把每次循环获取到的数据，放到这个< div class="list">里的对应的子孙标签里。代码如下：

< div class="list">
< ul class="list_h">
< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?>
< /ul>
< ul class="list_con">
< ul class="list_con_left">
< a href="< ?php the_permalink(); ?>">
< ?php
if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片
the_post_thumbnail(
'thumbnail' ,
array(
'alt' => trim(strip_tags( $post->post_title )),
'title' => trim(strip_tags( $post->post_title )),
'class' => 'home-thumb'
)
);
}else { //否则调用文章第一张图片
echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
}
?>
< /a>
< /ul>
< ul class="list_con_right">
< li>
< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ...
< /li>
< li>
< span class="dashicons-before dashicons-admin-users">
< ?php the_author(); ?>
< /span>
< span class="dashicons-before dashicons-calendar-alt">
< ?php the_time("Y年m月d日"); ?>
< /span>
< span class="dashicons-before dashicons-visibility">
< ?php echo get_post_meta($post->ID, 'views', true); ?>
< /span>
< /li>
< /ul>
< /ul>
< /div>

代码解释：

the_permalink() => 文章链接
the_title() => 文章标题
the_post_thumbnail() => 文章特色图片
the_author() => 文章作者
the_time() => 文章发表的时间
get_post_meta() => 获取文章自定义字段
$post->post_title => 文章标题
$post->post_content => 文章内容

上面这些函数与变量，都是wordpress自带的，我们只需直接拿来用就可以了。

当然，上面的代码中，我们也用到一些PHP语言的原生函数，如：trim()去除空白函数、strip_tags()去除html标签函数、mb_substr()截取中文字符串函数。

另外，上面的代码中，我们还调用了一个在trans主题的functions.php文件中创建的一个函数——catch_first_image()，这个函数的功能是获取文章的第一张图片。因为，有时候，我们的文章可能没有添加特色图片，这时，我们可以调用文章第一张图片来作为文章的缩略图。这个函数的代码如下：

// 获取文章第一张图片
function catch_first_image() {
global $post, $posts;$first_img = '';
ob_start(); ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$random = mt_rand(1, 10);
$first_img = get_bloginfo("template_url").'/images/random/'.$random.'.jpg'; //默认多张图片，随机显示
//$first_img = "/images/default.jpg"; //默认图片
}
return $first_img;
};

好了，到这里，我们就完成了wordpress主题trans首页左侧文章列表的循环调用数据，这样，trans主题的首页左侧就不会再是死代码了，而是动起来的代码，只要wordpress网站的后台文章有变化，这里就会相应的变化，这也就是wordpress动态模板的魔性所在。嗯，分页部分，我们将在下一节介绍。