如何在 WordPress 中添加分类图像(类别图标)

03/01/2024

为什么在 WordPress 中添加分类图像?

默认情况下,您的 WordPress 网站不提供为分类法(如类别和标签或其他自定义分类法)添加图像的选项。它只显示分类法名称,这看起来会显得单调无聊。如果您的分类页面获得大量搜索流量,您可能希望使它们看起来更具吸引力。通过添加相关图像,文本繁重的页面可以轻松转变为更具吸引力的页面。这样可以使这些页面更加用户友好和吸引人。

轻松在 WordPress 中添加分类图像

要在 WordPress 中添加分类图像,首先需要安装并激活“Categories Images”插件。激活后,转到“帖子 » 类别”页面,您会看到插件为现有类别显示占位符图像。

要选择您自己的类别图标,单击类别下方的“编辑”链接。在编辑类别页面,向下滚动到页面底部,您会找到一个用于上传您自己的分类图像的表单。上传您想为该类别使用的图像,并保存更改。同样的流程可以用于上传其他类别和标签的图像。

显示类别图像图标的方法

选项 1:使用 WPCode 显示类别图像图标(推荐)

这种方法更简单,因为无需找出需要修改的主题文件,可以安全地添加代码。首先,安装并激活 WPCode 插件。激活后,转到 WPCode » + 添加代码段页面,在“添加自定义代码(新代码段)”框中点击“使用代码段”按钮。在代码预览框中,复制并粘贴以下代码:

if( is_category() ) { ?>
<div class="taxonomy-image"><img class="taxonomy-img" src="" alt="" / ></div><?php } else { //do nothing }

然后,选择插入方法为短代码,并将其复制到您的归档页面上即可。

选项 2:手动显示类别图像图标

这一方法需将自定义代码添加到您的 WordPress 主题文件中。连接到您的 WordPress 站点,找到用于显示分类法归档的模版文件,如 archives.php、category.php、tag.php 或 taxonomy.php 文件。下载并用文本编辑器打开。在适当位置粘贴以下代码:


<div class="taxonomy-image"><img class="taxonomy-img" src="" alt="" / ></div><?php } else { //do nothing }

保存后上传,并使用自定义 CSS 来调整图像样式,使其在您的主题中更美观。

为类别图标添加样式

使用以下自定义 CSS 来调整和美化分类图像:

img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}

希望这篇文章能帮助您轻松地在 WordPress 中添加分类图像。您还可以查看其他有用的类别插件或技巧,以优化您的 WordPress 网站。



Related Posts

  • 2025-01-31
  • WordPress 插件

通知评论者他们的评论已获批准是在您的网站上鼓励对话的简单而有效的方法。然而,WordPress 默认情况下不会在评论发布时通知用户,这可能导致他们对评论的状态感到困惑。有许多网站拥有者问我们如何解决此问题,因此我们编写了这篇指南来帮助您!在这篇文章中,我们将展示如何轻松通知用户他们的评论已在 WordPress 中被批准,以保持互动积极并吸引更多观众参与。

閱讀更多
  • 2025-01-31
  • WordPress 插件

想知道我们在 WPressize Me 如何通过添加标题属性和 nofollow 标签来改善用户体验和SEO吗?默认的 WordPress 编辑器并不容易提供这些选项。本文将为您简要介绍如何在 WordPress 的插入链接弹出窗口中为链接添加标题和 nofollow 属性选项,以便简化工作流程和提升您的SEO努力。

閱讀更多
  • 2025-01-28
  • WordPress 插件

你是否想在你的WordPress网站上启用Imagick?大多数情况,WordPress会自动使用Imagick来管理所有网站的图像。然而,通过调整默认的Imagick设置,你可以提高网站性能或向访客展示更高质量的图像。在本文中,我们将展示如何在你的WordPress网站上启用Imagick,并自定义其设置以改善访客体验。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>