一文搞懂wordpress摘要显示图片：建站公司拖一周？别慌，按这个来！

一文搞懂wordpress摘要显示图片：建站公司拖一周？别慌，按这个来！

改个需求建站公司拖一周？别急，这篇文章就带你一文搞懂wordpress摘要显示图片的全部操作，从设置到代码，再到上线优化，一步不落，让你的网站内容更吸引眼球，也省去和建站公司扯皮的麻烦。

为什么wordpress摘要显示图片这么重要？

很多人做网站，尤其是企业官网或者内容类网站，都会在首页或者列表页展示文章的摘要，而摘要里是否显示图片，直接影响用户的点击率和留存率。如果摘要只有一段文字，用户根本不知道内容是什么，自然就没了兴趣。

但是WordPress默认摘要是不会自动显示图片的，除非你手动添加。这就导致很多网站的摘要看起来很“干”，内容吸引力不足。所以，解决wordpress摘要显示图片的问题，是提升用户阅读体验、提高内容转化率的重要一环。

如何设置wordpress摘要自动显示图片？

如果你是自己搭建网站，而不是找建站公司，那这一步必须自己动手。设置wordpress摘要显示图片并不复杂，主要有以下两种方法：

方法一：使用默认摘要功能（手动添加图片）

WordPress默认摘要显示的是文章开头的一部分内容，而图片是不能自动显示的。如果你希望摘要显示图片，必须在文章正文开头插入一张图片，然后WordPress会自动在摘要里显示这张图片。

操作步骤：

  1. 登录WordPress后台；
  2. 找到要修改的文章，点击“编辑”；
  3. 在文章开头插入一张图片（可以通过上传图片按钮添加）；
  4. 保存并更新文章；
  5. 到网站前台查看该文章的摘要，就能看到图片了。

这种方法虽然简单，但需要手动为每篇文章添加图片，不太适合内容更新频繁的网站。

方法二：通过代码实现摘要自动显示图片

如果你是技术型用户，或者有开发能力，可以通过修改主题文件，实现摘要自动显示图片的功能。代码方式更高效，适合内容量大的网站。

实现思路：

在文章开头提取第一张图片，然后在摘要中显示。这可以通过修改functions.php文件实现。

代码示例：

function custom_excerpt_thumbnail($excerpt) {global $post;$content = $post->post_content;$first_img = '';$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);if ($matches[1][0]) {$first_img = '<img src="'.$matches[1][0].'" alt="'.get_the_title().'" class="excerpt-image">';}return $first_img . $excerpt;
}
add_filter('the_excerpt', 'custom_excerpt_thumbnail');

这段代码的作用是：自动提取文章正文中的第一张图片，并显示在摘要里。使用这个方法后，你不需要手动添加图片，只要文章中有图片，摘要就会自动带图显示。

为什么我的wordpress摘要不显示图片？

如果你按照上述方法设置，但发现摘要还是不显示图片，可能有以下几种原因：

  1. 文章里没有图片：如果文章开头没有图片，那么摘要自然也不会显示图片。
  2. 主题不支持：有些主题对摘要的处理方式不同，可能不兼容自动带图功能。你可以尝试换一个主题，或者检查当前主题是否支持the_excerpt过滤器。
  3. 代码没生效：检查functions.php是否被正确修改，并且没有语法错误。你可以用PHP语法检查工具验证。
  4. 缓存问题：有些网站会启用缓存插件，修改后需要清除缓存才能看到效果。

解决方案：

  • 确保文章开头有图片；
  • 尝试更换主题；
  • 检查functions.php代码是否正确；
  • 清除网站缓存。

如何用插件实现wordpress摘要显示图片？

如果你不熟悉代码，或者不想折腾主题文件，可以通过安装插件来实现摘要显示图片的功能。

推荐插件：

  1. WP Show Posts：这是一款功能强大的插件，支持在摘要中显示文章第一张图片，而且操作非常简单。
  2. Advanced Excerpt：这个插件可以自定义摘要内容，支持添加图片、HTML代码等，非常适合需要高度定制摘要的用户。
  3. Post Thumbnails：这个插件主要功能是设置文章缩略图，但也可以配合其他插件实现摘要显示图片。

使用步骤（以WP Show Posts为例）：

  1. 在WordPress后台点击“插件” → “安装插件”；
  2. 搜索“WP Show Posts”并安装激活；
  3. 进入插件设置，选择“摘要显示图片”选项；
  4. 保存设置，回到网站前台查看效果。

这种方法不需要手动修改代码，也不需要更换主题，适合不熟悉技术的用户。

如何优化wordpress摘要显示图片的体验？

除了让摘要显示图片，还要考虑图片的质量、尺寸和加载速度。图片太大或者加载太慢，会影响用户体验和SEO排名。

优化建议：

  1. 压缩图片：使用工具（如TinyPNG、JPEGmini）压缩图片，减少加载时间；
  2. 使用合适的尺寸：摘要中的图片尺寸建议为600px × 400px左右，太大会影响加载，太小又看不清；
  3. 添加alt标签：在图片标签里添加描述性alt属性，有助于SEO和无障碍访问；
  4. 使用CDN加速：如果你的网站访问量大，可以使用CDN服务，提升图片加载速度。

例如，一张图片的HTML标签应该是这样的：

<img src="图片地址.jpg" alt="文章标题-摘要图片" width="600" height="400">

怎么测试wordpress摘要显示图片是否生效？

测试是确保设置生效的重要一步。不要以为设置了就能看到效果，一定要亲自测试一下。

测试方法：

  1. 写一篇新的文章，确保文章开头有图片；
  2. 更新文章后，回到网站前台；
  3. 查看摘要是否显示图片；
  4. 如果不显示，检查代码或插件是否设置正确。

如果你用的是插件，可以打开插件的调试模式，查看是否有错误提示。

你踩过哪些建站的坑？评论区交流

摘要显示图片只是建站中的一小部分，但正是这些细节决定了网站的专业度和用户体验。如果你在建站过程中也遇到过类似的问题，或者踩过坑，欢迎在评论区分享经验，大家共同进步。