分享：Wordpress-woocommerce-storefront主题首页和文章页显示文章全文 如何修改为只显示标题和摘要？

引言：

最近在学习Wordpress网站，使用了woocommerce-storefront主题，该商城主题是免费的，这很重要...并为storefront建立了子主题EUTTEST。

首先说明我不是一个专职前端或后端人员，我公司EUTTEST是做EMC电磁兼容测试设备代理销售的，所以不具备专业前端修改能力，只是自己摸索出来分享给大家，只保证所列代码有效，至于代码规范性什么的就这样了吧。。。

当打开文章页（blog目录页面）和文章详情页（content或single页面），理论上应该是先进入文章页、在进入文章详情页。

目的：

所以文章页应该显示一个列表：所有分类或单一分类的标题列表。

所以文章详情页应该显示一个文章的全文。、

问题：

但是storefront包括其他wordpress官方主题（什么twenty twenty的）的实际效果是：文章页和文章详情页均采用显示全文的方式，文章详情页还好，但是文章页会把所有的文章都打开全文显示，看完第一篇才能看第二篇，无法让用户快速查找想要的文章。

一、如何查找有效的PHP文件？

storefront主题的架构比wordpress自带主题的架构深的多，当你想修改一个主题页面的显示功能或效果，你必须要能定位到实际上起作用的PHP和CSS文件。这个方法适用于所有wordpress问题。

1、安装插件：

Show Current Template

该插件会显示当前页面所使用的PHP文件。所以先打开需要修改的页面，然后看顶端显示的PHP文件名称和目录并找到themes-storefront-index.php。

2、打开index.php（phpstudy_pro\WWW\127001\wp-content\themes\storefront）

		<?php
		if ( have_posts() ) :
			
			get_template_part( 'loop' );

		else :

			get_template_part( 'content', 'none' );

		endif;
		?>

从index.php看出，使用了loop，继续寻找loop（注意，主题不一样，index里显示的内容可能会不一样，因为每个主题采用的架构深度不一样，有的主题会在此页直接列出content的代码。），从1里可以看到loop和content的路径。loop在我的子主题目录是因为我将它拷贝了，这样以后更新父主题不会导致效果丢失。

3、从loop.php看到以下代码。可以看到loop引用content模板。继续寻找content模板，目录见上图。

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( 'content', get_post_format() );

endwhile;

content.php内容

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php
	/**
	 * Functions hooked in to storefront_loop_post action.
	 *
	 * @hooked storefront_post_header          - 10
	 * @hooked storefront_post_content         - 30
	 */
	do_action( 'storefront_loop_post' );
	?>

</article><!-- #post-## -->

4、do_action是wordpress在调用勾子，需要去hooks文件找到storefront_loop_post这个勾子实际勾了什么功能。

从第一节的插件里可以看到唯一一个hooks勾子文件如上图。打开它如下图所示，可以看出它一共勾了三部分，头部header，content文章全文部分，taxonomy文章分类。

add_action( 'storefront_loop_post', 'storefront_post_header', 10 );
add_action( 'storefront_loop_post', 'storefront_post_content', 30 );
add_action( 'storefront_loop_post', 'storefront_post_taxonomy', 40 );

我们要解决的问题是让文章页面只显示摘要，不显示文章全文，所以我们只修改storefront_post_content部分。头部和分类保持。

wordpress的勾子均在hooks里定义，当在其他PHP文件调用，凡被勾到的功能都会一起执行。

5、功能意味着在function里定义，看到这里我佩服老外的编程习惯很清晰。。。一个功能藏的这么深。。

同样根据第1节的插件，看到有如下目录包含了function，到底在哪个文件里呢？我也不知道，，所以我一个个去搜索吧。

最后，我在里找到了这个函数storefront_post_content，太长了我就不全列了，

function storefront_post_content() {
		?>
		<div class="entry-content">
		<?php

		/**
		 * Functions hooked in to storefront_post_content_before action.
		 *
		 * @hooked storefront_post_thumbnail - 10
		 */
		do_action( 'storefront_post_content_before' );

6、重点：

最后重点来了，找了那么久就为了修改这个content

原始代码

此代码的意思是直接打印整个文章内容

		the_content(
			sprintf(
				/* translators: %s: post title */
			__( 'Continue reading %s', 'storefront' ),
				'<span class="screen-reader-text">' . get_the_title() . '</span>'
			)
		);

修改为

以上代码从index.PHP--loop.php---content.php---store-template-functions.php一直调用。
修改store-template-functions.php里第414行附近的以上代码，为以下代码：
is_single判断当前页面是否是文章详情页，如果不是，则显示excerpt摘要，如果是，则显示content全文。

必须加这个判断，否则文章详情页会和文章页一样只显示一个摘要和标题。

		if(!is_single()) {
			echo "<h5>文章摘要：（单击 ↑ 标题查看全文）</h5>";/**手动添加 */
			the_excerpt();
			} 
		else {
		the_content(
			sprintf(
				/* translators: %s: post title */
				__( 'Continue reading %s', 'storefront' ),
				'<span class="screen-reader-text">' . get_the_title() . '</span>'
			)
		);}

7、最终效果-文章页面，列出标题，和摘要，需要点击标题进入全文，所以我加了个文字提示，可以任意修改文字和h标签。。。

 

8、最终效果，文章详情页面，，列出这个文章的全文。

 

 

总结：能找到页面所引用的PHP很重要。所以插件是必须的，它也能帮你找到CSS目录，可以修改任意需要的样式表即页面布局显示方式。