我们将只管即便保持文章的循规蹈矩和普通易懂，请确保自己已经节制了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下根本知识，这些根本知识对理解文章内容是至关主要的：
1. HTML/CSS/JS根本
2. PHP根本
3. 如何利用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上根本知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
主体框架我们把首页的主体区域划分成三个区域：
1. 文章列表
2. 右侧边栏
3. 公共底部
现在我们把DOM构造建立好：
<main> <div class="main-container"> </div> <div class="sidebar"> </div> </main> <footer> <div class="footer-container"> </div> </footer>
然后掌握好宽度，添加一个背景色进行初步区分：
/ 内容区域 / main { width: 62.5vw; display: flex; margin: 0 auto; justify-content: space-between; } .main-container { width: 42.1875vw; height: 26.0417vw; background: lightgrey; } .sidebar { width: 17.1875vw; height: 26.0417vw; background: lightyellow; } / 公共底部 / footer { width: 100vw; height: 16.6667vw; background: lightblue; } .footer-container { width: 62.5vw; }
那么看起来我们的页面便是这个样子了：
现在我们把文章列表调出来：
<?php while (have_posts()) : the_post(); ?> <!-- article --> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- post thumbnail --> <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?> </a> <?php endif; ?> <!-- /post thumbnail --> <!-- post title --> <h2> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </h2> <!-- /post title --> <!-- post details --> <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span> <span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span> <span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span> <!-- /post details --> <?php add_filter('excerpt_more', function(){ return '...'; }); echo get_the_excerpt(); ?> <?php edit_post_link(); ?> </article> <!-- /article --> <?php endwhile; ?>
这里须要把稳的是，我们须要在循环中把文章列表的基本信息输出，包括题图、标题、分类、日期、概览等。
嗯嗯，没有题图显示出来，这可不好，我们在functions.php里把题图功能的主题支持开启：
function theme_support() { add_theme_support('post-thumbnails');}add_action( 'after_setup_theme', 'theme_support' );
但是这样页面还是没有题图，由于我们压根就没有设置过题图/笑哭，那现在怎么办呢？我们在functions里写一个方法，如果没有题图，则取文章内的第一张图：
function my_post_thumbnail() { $img_url = wp_get_attachment_url(get_post_thumbnail_id()); if (!$img_url) { $post = get_post(); // search for img src="" preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].>/i', $post->post_content, $matches ); $img_url = isset( $matches[1][0] ) ? $matches[1][0] : null; // search for style background url(cover image block) if (!$img_url) { preg_match_all( '/(?:url\([\'\"]?)(.?(\.png|\.jp[e]?g))(?:[\'\"]?\))/i', $post->post_content, $matches ); $img_url = isset( $matches[1][0] ) ? $matches[1][0] : null; } } return $img_url;}
当然了，为了增加用户的选择性，后期我们把这个取第一张图片的功能在后台主题自定义里弄个开关参数，让用户可以关闭这个功能，这样就可以不在列表里显示文章里的图片。
现在我们开始整理整理列表信息构造，去除一些无用的内容，按照我们须要的构造整理DOM，首先我们把题图显示出来，这里须要把稳我们利用了AMP技能，无法直策应用img标签，而该当利用amp-img标签。
<?php if ($thumb = my_post_thumbnail()): ?> <div class="title-img"> <amp-img class="contain" src="<?php echo $thumb?>" layout="fill" > </div> </amp-img> <?php endif; ?>
然后加上css让它自适应宽高，这里我们用了object-fit:cover属性让图片自动裁剪保持比例（不变形）:
.list-box { width: 100%; display: flex; flex-direction: column; } .title-img { width: 42.1875vw; height: 15.625vw; position: relative; } .title-img amp-img.contain img { object-fit: cover; }
现在我们的页面看起来就像这样：
我们现在完成文章所属分类和标题：
<div class="post-info"> <?php $category = get_the_category();echo '<a class="post-cate" href="'.get_category_link($category[0]->term_id).'">'.$category[0]->cat_name.'</a>'; ?> <h2 class="post-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> <div class="title-split"> </div> </div>
再加上CSS，这里我们利用了text-transform: uppercase;让英文标题字母全部大写，现在我们的页面看起来像这个样子:
接下来我们输出文章的择要信息，一样平常便是截取文章头部的一段笔墨：
<div class="post-excerpt"> <?php echo get_the_excerpt() ?> </div>
但是这样输出的话，excerpt末端的省略符号是[…]这样的，我们的期望是…，我们又跑到functions.php里对这个尾部进行定义：
// setting excerptadd_filter('excerpt_more', function(){ return '...';});
这样我们的文章择要便是像这样了：
这里通过传参给get_the_excerpt方法，还可以掌握择要的字数。
现在我们加上CSS，就得到了这样的页面：
目前为止进展顺利，但是我们还有许多事情要做，本日就先到这里啦~~
总结和预报本日我们大致实现了首页的文章列表，来日诰日我们将引入新的元素——iconfont，利用iconfont我们让首页的文章列表完成度达到100%，这包括按钮、评论数等信息，还有最主要的，程序员的最爱：分页。
如果你喜好这个系列的文章，赶紧关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
