WORDPRESS特色图片 – 您将需要了解的

wordpress在torquemag上的特色图像

了解如何正确使用它对任何网站所有者来说都是一项重要技能。因此,下面我们将详细讨论此功能。您将了解WordPress特色图像是什么,重要的原因,如何正确使用它,自定义它以及解决问题。

我们走吧。

WordPress特色图片代表您的内容网站范围

在开始正确使用特色图像之前,让我们先定义它。

鼓励在您的内容中使用图像。它已被证明可以增加页面浏览量和网站停留时间等内容。

通过“ 添加媒体”或“ 图像”块将图像添加到文章正文中。

古腾堡的图像块

但是,WordPress特色图像的选项位于侧边栏中。

侧栏中的精选图像设置

当您单击相应按钮时,您可以上传图像或从媒体库中选择一个图像,添加标题,说明和ALT文本,并选择以视觉为特色的帖子。

当你这样做时,图片通常会出现在帖子的顶部。确切的位置(例如标题的上方或下方)取决于您的主题。有些甚至将它放在标题部分。

不过,除此之外,它还会出现在您网站上的帖子的任何其他位置。这可以是博客页面,作者档案,相关帖子列表 – 您可以为其命名。

热门帖子小部件中的精选图片

因此,精选图片会对您网站的大部分内容产生巨大影响。此外,他们为访客对您帖子的看法定下了基调。因此,特色图像是您内容策略的重要组成部分。

如何正确使用特色图像

由于特色图像起着如此重要的作用,因此注意它们的使用是个好主意。

1.使用一致的样式

如上所述,WordPress特色图片出现在您网站的许多地方。出于这个原因,它不仅对单个帖子的风格很重要,而且对整个网站的存在也很重要。因此,您应该考虑使用的内容可以增强整体印象和品牌效果。

我最喜欢这个领域的一个例子是NerdFitness。该网站使用了许多包含乐高小雕像的图像。

wordpress特色图像示例nerdfitness

另一个展示是Art of Manliness,用旧时的图像装饰他们的帖子。

wordpress特色图片示例艺术的男子气概

每种方法都适合他们的内容,观众,并使网站具有一致的外观。

要获得类似的效果,请问自己哪种类型的图像适合您的品牌,色调和整体设计。然后,确保在所有已发布的帖子中使用相同的样式。

最简单的方法是使用一个设置模板,即使它只是一个颜色叠加。

您可以使用Photoshop或Canva等工具创建一个,只需输入您想要使用的任何图像。这样,即使主图像发生变化,整个网站的样式也保持不变。

这也是包含在您的博客风格指南中的一件好事,以便您网站上的所有其他作者也可以这样做。

2.来源和属性正确

除了使用图像创建一致的博客设计之外,还有一个很大的问题就是从哪里获取它们。

一种方法是自己创建图像。有一些博主在那里擅长涂鸦或说明并能够创建自己的视觉效果。

示例手绘图像

其他人有摄影师或平面设计师,他们负责照顾这类事情。

但是,您的普通博主通常既没有时间也没有资源来处理这类事情。出于这个原因,大多数人会选择使用股票图像,最明显的是那些作为知识共享许可的图像。

它们提供的优势是您可以免费使用它们,并且有许多不同的站点提供大量的下载。

确保您遵守每个图像的许可证。并非所有这些都允许您在商业上使用它们或修改它们。此外,他们中的许多人要求归属。

更多关于这一点以及这篇文章中的图像来源。

3.发布前优化

就像您网站上的任何其他图片一样,精选图片会影响页面加载时间。在这种情况下尤其如此,因为访问者不必点击帖子标题来查看它们。它们就在饲料中。

此外,图像通过它们的存在(Google认为它们在网站上的存在是质量的标志)以及它们包含的关于网站和页面主题的信息具有SEO值。因此,像您网站上的任何其他视觉效果一样优化特色图像非常重要。

我们有一篇关于这个主题的文章你可以查看,但这里有悬崖说明:

  • 使图像尽可能小 – 通过在线服务或插件压缩它们以使它们变小。仅在特定位置使用所需的大图像。使用以下技术为您的博客创建完美的大小。
  • 包含关键字 – 为了帮助搜索引擎了解图像的内容并获得SEO提升,请务必在文件名和ALT标记中包含主要关键短语。

如何在WordPress中自定义特色图像

因为它是您内容的核心部分,所以WordPress提供了许多自定义特色图像的方法。

在页面模板中更改其位置

如果您要查找页面模板中包含精选图片的位置,可以从以下代码段中识别它:

1
the_post_thumbnail();

后缩略图是特色图像的旧术语,这就是为什么它被称为这种方式。WordPress Codex中的条目仍然以该名称引用它。

对WordPress特色图像的调用通常包含在条件语句中,该条件语句检查它是否存在,如果存在,则显示它。

1
2
3
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

因此,如果您想更改特色图片的位置,可以将此片段或类似的代码段移动到相应的位置。

当您进行这样的更改时,请确保在子主题中进行更改,否则,您将失去主题更新。

在一些主题,比如创世纪的框架,也可以通过移动位置主题的钩扣内

1
functions.php

创建自定义大小

说到函数文件,它提供了许多自定义WordPress特色图像的方法。最值得注意的是,它允许您为其设置和插入自定义大小。

您可能已经意识到WordPress会为您上传到您网站的每张图片创建几种尺寸。这是为了确保您不必在宽度仅为300px的位置输入2,000px图像。这样做会浪费带宽。

您可以对特色图像执行相同操作。如果您知道页面上的最大宽度为800px,则可以告诉WordPress创建该大小的后缩略图functions.php。

1
add_image_size( 'my-custom-featured-image', 800, 9999 );

这里有关于此功能的更多信息。

但是,当您这样设置时,还需要确保主题在页面模板中使用正确的大小。

1
the_post_thumbnail( 'my-custom-featured-image' );

这样,您还可以在不同的位置设置相同特色图像的多个不同大小,并且仅根据需要使用尽可能大的视觉效果。

请注意,质量主题应该已经解决了这个问题。但是,如果您更改设计的布局,上面的内容可能会派上用场。

此外,如果您更改与图像大小相关的内容,则可能必须重新生成站点上现有图片的缩略图,这可以使用此插件。

修改特色图像样式

如果您想要更改特色图片在页面上的显示方式,您可以通过CSS轻松完成。WordPress 根据默认大小自动将CSS类附加到它们。

1
2
3
4
5
<img class="attachment-post-thumbnail wp-post-image" src="..." />
<img class="attachment-thumbnail wp-post-image" src="..." />
<img class="attachment-medium wp-post-image" src="..." />
<img class="attachment-large wp-post-image" src="..." />
<img class="attachment-full wp-post-image" src="..." />

因此,您可以使用以下CSS选择器轻松自定义它们。

1
2
3
4
5
img.attachment-post-thumbnail
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

这也适用于您可能添加的任何自定义图像尺寸。因此,如果您使用下面的代码设置新的图像大小。

1
add_image_size( 'my-custom-featured-image', 800, 9999 );

您可以使用此CSS更改其样式:

1
img.attachment-my-custom-featured-image

特色图片不显示

作为WordPress特色图片上这篇文章的最后一部分,我们想要进行一些故障排除。

用户遇到的一个常见问题是特色图像没有显示在他们的页面上(严重的是,它就像是第二个谷歌搜索的术语)。如果是这种情况,这里有一份清单,说明您可以寻找什么来解决这个问题。

  • 你有一个吗? – 没有显示特色图像的最简单的原因是你忘了设置一个。因此,第一步是转到编辑器并查看其侧边栏以查看是否包含了缩略图。如果您使用的是经典编辑器,则可能必须使用屏幕选项(屏幕右上角)来启用该选项。
  • 检查主题支持 – 为了使用特色图像,必须在主题中启用它们。你可以
    1
    add_theme_support( 'post-thumbnails');

    在里面做到这一点

    1
    functions.php

    。您也可以使用此代码在事后添加支持。

  • 检查文件权限 – 对于涉及未在WordPress中显示的图像的任何问题,常见问题是不正确的文件权限设置。查看此帖子以了解权限级别应该是什么以及如何更改它们。
  • 禁用延迟加载 – 延迟加载是一种在图像在屏幕上可见之前保持图像加载以节省带宽的技术。它有时可能会导致此问题,尤其是在使用Jetpack时。禁用你的,看看是否会带回你的精选图片。

如果以上都不适合您,那么禁用所有插件以查看其中一个插件是否导致问题始终是个好主意。

此外,您的主题可能具有图像的特殊设置,因此请务必探索其所有选项。如果这没有帮助,改变主题可以帮助查明原因。

最好在本地环境中完成上述所有操作。

最后的想法:WordPress特色图片

虽然你可能没想过这么多,但WordPress特色图片是任何博客的核心部分。这是个人博客文章以及整体网站设计的傀儡。因此,不应掉以轻心。

上面,您已经了解了WordPress特色图像的内容,重要性以及如何正确使用它。我们还讨论了如何自定义特色图像和解决常见问题。

到目前为止,您应该对WordPress网站的这一部分有充分的了解。如果仍有未解决的问题,请随时在下面询问。

说点什么

500