真香，30天做一套wordpress主题（第4天）：首页主体内容

我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~

这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：

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 excerpt

add_filter('excerpt_more', function(){

    return '...';

这样我们的文章摘要就是像这样了：

这里通过传参给get_the_excerpt方法，还可以控制摘要的字数。

现在我们加上CSS，就得到了这样的页面：

目前为止进展顺利，但是我们还有许多工作要做，今天就先到这里啦~~

总结和预告

今天我们大致实现了首页的文章列表，明天我们将引入新的元素——iconfont，使用iconfont我们让首页的文章列表完成度达到100%，这包括按钮、评论数等信息，还有最重要的，程序员的最爱：分页。

如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。

自定义WordPress的摘要（excerpt）字数和省略号样式

在 WordPress 的主题开发中，我一般推荐使用核心自带的 get_the_excerpt() 函数来获取文章的摘要。如果用户在文章编辑器里手动设置了摘要则调用设置的内容；没手动设置时，也会自动从文章的开头开始，截取一部分内容作为摘要。

在循环中调用文章摘要

想在文章循环中输出当前文章的摘要，可以直接使用 the_excerpt() 函数，例如：

<?php if( have_posts() ): ?>
<ul>
<?php
while( have_posts() ):
the_post();
?>
<li <?php post_class(); ?>>
<?php
the_title( \'<h2>\', \'</h2>\' );
the_excerpt();
?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

上边的代码放到模板文件里，最终会生成类似下方的 HTML 代码：

<ul>
<li class=\"post\">
<h2>WordPress 让访问者调整网页字号</h2>
<p>很多网站都在网页上放置可以调整字体大小的按钮，这些按钮可以让视力不好的人更轻松的浏览网页。浏览器一般都内置了可 [&hellip;]</p>
</li>
<li class=\"post\">
<h2>WordPress 给置顶文章设置一个到期时间</h2>
<p>在 WordPress 中，可以使用自带的置顶功能来突出一些文章，让访客优先阅读。但是，文章往往不需要一直是置 [&hellip;]</p>
</li>
<!--省略剩余循环部分-->
</ul>

值得注意的是：调用摘要的两个函数 the_excerpt() 和 get_the__excerpt() 的主要区别在于，前者是直接输出，后者是返回，可以保存到变量里。

并且，the_excerpt() 函数会自动给摘要添加 <p> 标签，而 get_the_excerpt() 不会。可以理解为，the_excerpt() 输出的是一段经过处理的 HTML 代码，给摘要进行了自动换行、解析表情符号为图片和转义引号等操作；而 get_the_excerpt() 是原始的文本摘要，除了文字截取，没有经过任何处理。

自定义摘要字数

这时候问题来了，用户没设置摘要时，应该从文章中截取多少字用做摘要呢？答案是 55 个字，因为 WordPress 默认就是这样设计的，但我们可以修改它。

在制作主题时，摘要需要多少字往往取决于页面的样式允许它有多大的空间，而不是天生设定好的 55 字。

这时，就可以使用 excerpt_length 过滤器来自定义文章摘要的字数（长度）。比如，在主题的 functions.php 中添加以下代码，就可以将所有的摘要字数都规定为 100 字：

function tiezhu_excerpt_length(){
return 100;
}
add_filter( \'excerpt_length\', \'tiezhu_excerpt_length\' );

通过修改代码中函数的返回值，可以任意设置摘要的字数。然后在循环中使用文章开头提到的方法调用摘要，就会是我们设置的字数。

自定义摘要省略号样式

摘要的结尾一般会有一个省略号，表示此处展示的文章内容只是一部分预览，剩下的内容需要进入到文章页面浏览。

这个省略号默认样式为 […]，是一个 HTML 转义字符，在网页中实际显示为 […]。可能是为了更加明显吧，给正常的西文省略号添加了一对中括号。

但我觉得，没有中括号反而会更好看一些，所以使用 excerpt_more 钩子修改了摘要省略号的样式：