在上一节中，我们修改好了wordpress主题trans的首页的状况。本节，我们再来介绍如何修改trans主题首页模板的左侧主体代码。trans主题首页左侧主要展现的是最新文章列表以及分页（如下图）。
目前，这个首页的内容还是死的，是一个静态的文件，wordpress后台发表新的文章，这里也不会发生变化。我们需要实现的是：在我们发表文章后，这里就要发生相应的变化——我们新发表的文章会展示在这个列表中。还有，我们要实现点击分页按钮时，也能跳到对应的页面。下面，我们就来一步一步地操作。
第一步：左侧删除掉所有的文章列表，只保留一条。
原index.html静态模板的左侧列表中有5个文章，代码如下图：
可以看出，他们的代码都是一样的。这里，我们留下第一条< div class=&34;>，其余4条全部删除掉。它的代码如下：
< div class=&34;>< div class=&34;>< ul class=&34;>< a href=&34;>网站索引量一直在下降是什么原因</a>< /ul>< ul class=&34;>< ul class=&34;>< a href=&34;>< img src=&34; alt=&34;></a>< /ul>< ul class=&34;>< li>所谓网站索引量，更改主页设置，就是指搜索引擎把你的网页内容索取到数据库中。… </li>< li>< span class=&34;>木易</span>< span class=&34;>2020年5月21日</span>< span class=&34;>274</span>< /li>< /ul>< /ul>< /div>< /div>，
第二步：添加wordpress循环语句。
1、我们打开浏览器，假设我经常访问百度，那就可以将主页改为百度，点击浏览器右上角设置。/iknow-pic.cdn.bcebos.com/3812b31bb051f8199833d75dd6b44aed2e73e797"target="_blank"title="点击查看大图"class="ikqb_img。
因为，在首页左侧文章列表中，每一个模块的布局是一样的，只是每个模块中的数据不一样而已，所以，我们只需要保留一个模块，然后，循环调用wordpress的文章数据添加到这个模块中。这里，我们先调用wordpress循环语句，让这个模块循环输出。wordpress网站有多少篇文章，它就会循环多少次，当然，这个循环会受到分页的限制，这个分页我们在后面再说。
在< div class=&34;>这个标签前添加如下代码：
<?php if ( have_posts() ): //如果有文章while ( have_posts() ) : //就循环所有文章the_post(); //循环一次，就调用一次数据?>
在< div class=&34;>的结束标签</div>后面，添加结束循环和结束如果的语句，代码如下：
<?php endwhile; endif; ?>
一定要结束循环，也要结束如果，否则会报错。
第三步：给循环体里的模块添加数据。
代码解释：
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()截取中文字符串函数。
1、我们打开浏览器，假设我经常访问百度，那就可以将主页改为百度，点击浏览器右上角设置。/iknow-pic.cdn.bcebos.com/3812b31bb051f8199833d75dd6b44aed2e73e797"target="_blank"title="点击查看大图"class="ikqb_img。
另外，上面的代码中，我们还调用了一个在trans主题的functions.php文件中创建的一个函数——catch_first_image()，这个函数的功能是获取文章的第一张图片。因为，有时候，我们的文章可能没有添加特色图片，这时，我们可以调用文章第一张图片来作为文章的缩略图。这个函数的代码如下：
1、我们打开浏览器，假设我经常访问百度，那就可以将主页改为百度，点击浏览器右上角设置。/iknow-pic.cdn.bcebos.com/3812b31bb051f8199833d75dd6b44aed2e73e797"target="_blank"title="点击查看大图"class="ikqb_img。
好了，到这里，我们就完成了wordpress主题trans首页左侧文章列表的循环调用数据，这样，trans主题的首页左侧就不会再是死代码了，而是动起来的代码，只要wordpress网站的后台文章有变化，这里就会相应的变化，这也就是wordpress动态模板的魔性所在。嗯，分页部分，我们将在下一节介绍。
1、我们打开浏览器，假设我经常访问百度，那就可以将主页改为百度，点击浏览器右上角设置。/iknow-pic.cdn.bcebos.com/3812b31bb051f8199833d75dd6b44aed2e73e797"target="_blank"title="点击查看大图"class="ikqb_img。
