在上一节中，我们修改好了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()，这个函数的功能是获取文章的第一张图片。因为，有时候，我们的文章可能没有添加特色图片，这时，我们可以调用文章第一张图片来作为文章的缩略图。这个函数的代码如下：
