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” 文字。

 

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


版权说明:
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/server-blog/wordpress/wordpress-excerpt-content-readmore/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢

微博 QQ 打赏 点赞 0

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注