目前，这个首页的内容还是去世的，是一个静态的文件，wordpress后台揭橥新的文章，这里也不会发生变革。我们须要实现的是：在我们揭橥文章后，这里就要发生相应的变革——我们新揭橥的文章会展示在这个列表中。还有，我们要实现点击分页按钮时，也能跳到对应的页面。下面，我们就来一步一步地操作。
第一步：左侧删除掉所有的文章列表，只保留一条。
原index.html静态模板的左侧列表中有5个文章，代码如下图：
可以看出，他们的代码都是一样的。这里，我们留下第一条< div class="list">，别的4条全部删除掉。它的代码如下：
< div class="left_bottom">< div class="list">< ul class="list_h">< a href="/">网站索引量一贯不才降是什么缘故原由</a>< /ul>< ul class="list_con">< ul class="list_con_left">< a href="/">< img src="./images/index_17.jpg" alt=""></a>< /ul>< ul class="list_con_right">< li>所谓网站索引量，便是指搜索引擎把你的网页内容索取到数据库中。… </li>< li>< span class="dashicons-before dashicons-admin-users">木易</span>< span class="dashicons-before dashicons-calendar-alt">2020年5月21日</span>< span class="dashicons-before dashicons-visibility">274</span>< /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">的结束标签</div>后面，添加结束循环和结束如果的语句，代码如下：
<?php endwhile; endif; ?>
一定要结束循环，也要结束如果，否则会报错。
第三步：给循环体里的模块添加数据。
循环体里包含的是< div class="list">这个标签，我们须要把每次循环获取到的数据，放到这个< div class="list">里的对应的子孙标签里。代码如下：
< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a>< /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('/<img.+src=[\'"]([^\'"]+)[\'"].>/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动态模板的魔性所在。嗯，分页部分，我们将不才一节先容。
