我们将只管即便保持文章的循规蹈矩和普通易懂，请确保自己已经节制了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下根本知识，这些根本知识对理解文章内容是至关主要的：
1. HTML/CSS/JS根本
2. PHP根本
3. 如何利用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上根本知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
图标字体我们现在为我们的主题引入iconfont（图标字体），先把图标字体准备好：
查阅AMP文档之后，我们可以理解到AMP可以直接引入字体css：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
但是这种办法哀求引入的CSS所属域只能因此下列表里的网站：
· Typography.com: https://cloud.typography.com· Fonts.com: https://fast.fonts.net· Google Fonts: https://fonts.googleapis.com· Typekit: https://use.typekit.net· Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
不在这个白名单里的外链CSS是无法在AMP页面引入的，还好我们可以选择直接在页面CSS中引入字体文件，就像是这样：
@font-face { font-family: 'iconfont'; src: url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.woff2') format('woff2'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.woff') format('woff'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.ttf') format('truetype'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.svg#iconfont') format('svg'); }
然后我们直接再页面里定义并利用iconfont中图标对应的unicode：
.iconfont { font-family: "iconfont"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }完善文章列表
现在我们来连续完善文章列表，首先加入阅读更多按钮：
<div class="flex-box"> <a href="<?php the_permalink(); ?>" class="read-more"><?php _e('READ MORE'); ?><span class="iconfont icon-ml-readmore"></span></a> </div>
这里我们就用上了iconfont，效果如下：
现在我们加上评论、阅读、点赞信息，这里须要把稳，wordpress默认实在是没有浏览量和点赞的，这里我们在functions.php里加入这些功能，然后后面我们就可以到页面模板里插入这个方法：
// add viewsfunction is_spider() { $agent= strtolower($_SERVER['HTTP_USER_AGENT']); if (!empty($agent)) { $spiders= array( 'Googlebot', 'Baiduspider', 'ia_archiver', 'R6_FeedFetcher', 'NetcraftSurveyAgent', 'Sogou web spider', 'bingbot', 'Yahoo! Slurp', 'facebookexternalhit', 'PrintfulBot', 'msnbot', 'Twitterbot', 'UnwindFetchor', 'urlresolver' ); foreach($spiders as $val) { if (strpos($agent, strtolower($val)) !== false) { return true; } } } else { return false; }}function set_post_views(){ if (is_singular() && !is_spider()) { $post_id = get_the_ID(); if($post_id) { $post_views = (int)get_post_meta($post_id, 'views', true); if(!update_post_meta($post_id, 'views', ($post_views+1))) { add_post_meta($post_id, 'views', 1, true); } } }}// add likesfunction set_post_likes(){ // 暂时空置 往后实现}
我们加了一个is_spider方法，让浏览量的统计将搜索引擎蜘蛛打消在外，关于点赞的功能我们也留待往后实现，我们先预定好这两个参数，然后到页面里显示：
<div class="flex-box justify-between"> <a href="<?php the_permalink(); ?>" class="read-more"><?php _e('READ MORE'); ?><span class="iconfont icon-ml-readmore"></span></a> <div class="flex-box post-meta-box"> <a class="post-meta" href="<?php the_permalink() ?>#comments"><span class="iconfont icon-mr-postmeta"></span><?php comments_number('0', '1', '%'); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php echo (int)get_post_meta(get_the_ID(), 'views', true); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php echo (int)get_post_meta(get_the_ID(),'likes',true); ?></a> </div> </div>
我们再加上文章的发布日期：
<div class="flex-box post-publish-date"> <div class="post-date"> <?php echo get_the_date('d') ?> </div> <div class="post-month"> <?php echo get_the_date('M') ?> </div> </div>
这样我们的首页文章列表就基本完成了：
现在我们做本日的末了一项事情，程序员最爱之分页：
<?php echo get_the_posts_pagination( array( 'mid_size' => 3, 'prev_next' => false, ) ); ?>
声明？就这么几行就OK了？没错！
我们加上一些CSS描述后，就成这样了：
Wordpress对分页的输出还是比较好的，基本不用费事就完成了。
总结和预报本日我们为主题引入了iconfont自定义图标，完成了文章列表页的全部内容，末了的分页也十分之轻松。
来日诰日我们将寻衅制作右侧边栏，这也是wordpress传统blog主题中至关主要的一部分。
如果你喜好这个系列的文章，赶紧关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
