WordPress 首页显示文章摘要或者内容以及个性化设置”阅读更多”

WordPress 首页和归档页面显示文章的方式有两种：内容模式(the_content)和摘要模式(the_excerpt)

内容模式：如果文章设置的有“阅读更多”的标签，即“<!--more-->”，就会显示全部的文章内容，如果有“阅读更多”的标签，则只会显示“阅读标签”前的内容，并在后面添加一个“阅读更多”的链接指向文章剩下的内容。因此，如果文章内容较多的话一定要设置“阅读更多”的标签，否则加载首页的时候会耗费更多的服务器资源（亲测 ）。

摘要模式：只显示文章的摘要，后面跟一个“更多”标签。如果作者没有在编写某篇文章时编辑文章摘要，那么默认截取文章的的前55个字作为摘要显示出来，并添加一个“more”标签（不是“read more”，即“阅读更多”），默认显示为“[…]”。如果作者在编辑文章时编写了文章摘要，那么在首页就只会显示作者编写的摘要，默认不添加“more”标签。因此建议在编写文章的时候顺便编写文章摘要。

我个人认为，内容模式比较适合我，因为可以自定义显示的内容和长度。

下面我来说说如何设置这两种模式以及两种模式的个性化。

一、内容模式

首页设置为内容模式的方法就是在首页的主循环中添加 the_content() 函数。官方文档：the_content() | Function | WordPress Developer Resources

每个主题这个函数放的位置会不同，要在你主题的 index.php 中查找，比如我的：

if ( have_posts() ) :

	/* Start the Loop */
	while ( have_posts() ) : the_post();

		/*
		* Include the Post-Format-specific template for the content.
		* If you want to override this in a child theme, then include a file
		* called content-___.php (where ___ is the Post Format name) and that will be used instead.
		*/
		get_template_part( 'template-parts/post/content', get_post_format() );

		endwhile;

可以看到有一个主循环，如果有文章的话，就进入到循环，循环里面引入了模版文件“template-parts/post/content.php”，在我的主题目录下（我用的是 twentyseventeen），template-parts/post/content.php 文件中有这么几行：

<div class="entry-content">
	<?php
	/* translators: %s: Name of current post */
	the_content( sprintf(
		__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
		get_the_title()
	) );

可以看到，在类名为“entry-content”(入口-内容)中有一个 the_content() 函数，因此这里就是设置内容模式的地方了。关于函数的参数，就是个性化的“阅读更多”链接。

个性化设置

这个 the_content() 函数有两个参数：

the_content( string $more_link_text,  bool $strip_teaser )
$more_link_text
(string) (Optional) Content for when there is more text.
//如果有“阅读更多”标签，则在显示出“阅读更多”标签之前的内容后显示该参数的内容
Default value: null
//默认为空

$strip_teaser
(bool) (Optional) Strip teaser content before the more text. Default is false.
//这个参数我们通常不用
Default value: false

我们个性化设置“阅读更多”的时候用到的就是第一个参数。在上个部分中，我给出了 twentyseventeen 主题设置的 the_content() 函数，里面设置了一个参数：

sprintf(
		__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
		get_the_title()
)

这个参数的意思就是返回一个字符串，内容是’Continue reading<span class=”screen-reader-text”> 当前文章的标题 </span>’。实际上我们看到的就是“Continue reading”，并且指向文章的剩余部分。当然在中文环境下显示的是“继续阅读”。我们可以修改这个“Continue reading”来实现个性化，比如我的就是：

/* translators: %s: Name of current post */
the_content( sprintf(
	__( '想看更多？点我点我<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
	get_the_title()
) );

效果如下：

对了，这个阅读更多的链接默认是指向文章剩余部分的，即在文章链接后面加了个“#more-id”，这个如果不喜欢也可以自定义，这里我把这个“#more-id”去掉：

//删除阅读更多链接后面的#more-id
function remove_more_jump_link($link) { 
return preg_replace('/#more-\d+/i','',$link); 
} 
add_filter('the_content_more_link', 'remove_more_jump_link'); 

将上述代码添加到主题目录下 functions.php 中最后一个 “?>” 前即可。

二、摘要模式

设置摘要模式的方法和设置内容模式差不多，只不过把 the_content() 函数改为 the_excerpt() 即可。该函数的官方文档为：the_excerpt() | Function | WordPress Developer Resources

例如我这里还是在之前的“content.php”文件中，将刚才的 the_content() 函数改为 the_excerpt()

<div class="entry-content">
	<?php
	//设置为摘要模式
	the_excerpt();

效果如下：

在寒假前学校就在每个宿 … 继续阅读“学校新采用的华为无线AP和我们有关的使用方法”

上面这个是没有设置文章摘要的，它会自动截取文章的一部分作为摘要，并在后面添加“…”和一个“继续阅读+文章标题”。后面这写是可以自己自定义的。

个性化设置

1.设置自动截取的字数

如果没有编写文章摘要，那么它会自动截取文章一定字数来作为摘要，这个字数默认是55，我们可以通过一个 filter 来修改字数：excerpt_length，示例如下：

/**
 * Filter the except length to 20 words.
 *将字数设置为 20
 * @param int $length Excerpt length.
 * @return int (Maybe) modified excerpt length.
 */
function wpdocs_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

上面这个示例将字数设置为20，实际上就是那个返回值。将这个代码添加到主题下的 functions.php 即可。

2.设置“更多”标签文字

这个“更多”标签文字默认就是“…”，我们也可以通过修改 filter 来修改文字。注意，都是修改 filter，the_excerpt() 函数没有参数，不能在参数里直接设置。

/**
 * Filter the "read more" excerpt string link to the post.
 *
 * @param string $more "Read more" excerpt string.
 * @return string (Maybe) modified "read more" excerpt string.
 */
function wpdocs_excerpt_more( $more ) {
    return sprintf( '<a class="read-more" href="%1$s">%2$s</a>',
        get_permalink( get_the_ID() ),
        __( 'Read More', 'textdomain' )
    );
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );

该函数将“更多”标签文字改为一个指向当前文章链接的“Read more” 文字。

好啦，就这样，大家可以根据自己的喜好来设置相应的模式并做自定义的设置。

手机打开扫一扫即可访问本页面

感谢您的支持，SunriseYDY 会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

日出一点一 | 在探索的路上永不止步