如何将特色图像添加到您的 WordPress 分类

类别的特色图片是那些明显有益的想法之一,你可能以前没有考虑过。

精选图片可以并且确实对帖子页面产生巨大的积极影响,因此,当您考虑它时,将这种影响扩展到我们的类别页面是很自然的,并为访问者提供即时视觉提示 话题。

在这篇文章中,我们将向您展示如何为类别指定特色图片,并为您提供一些关于如何更新主题以显示它们的提示。

谁不希望他们的类别页面看起来像这样?
谁不希望他们的类别页面看起来像这样?

将特色图片添加到您的类别页面需要 3 个步骤:

  1. 安装并激活Category Images插件
  2. 在管理界面中将图像添加到您的类别
  3. 更新您的主题以在类别页面上显示图像

第 3 步将取决于您的主题,但我将引导您完成添加 Twenty Twelve(具有类别模板)所需的更新。

第 1 步:安装插件

安装插件的最简单方法是简单地下载、上传和激活它。

没有什么可配置的,以此类推到第 2 步。

第 2 步:添加分类图像

通过“添加类别”表单将图像添加到新分类,或者在“帖子”>“分类”下的“编辑分类”表单上将图像添加到现有分类。

选择一个分类并单击编辑,您将在底部看到一个上传/编辑图像按钮。 单击该按钮会打开“媒体”对话框,您可以在其中选择现有图像或上传新图像,就像在帖子中添加特色图像一样。

将图像添加到类别就像将它们添加到帖子一样
将图像添加到类别就像将它们添加到帖子一样

将图像添加到几个类别并继续进行第 3 步。

第 3 步:更新您的主题

好的,前两个步骤很简单:这一步有点棘手,因为您现在需要更新主题以输出类别特色图像。

在很大程度上,这将取决于您的主题以及它如何利用 WordPress 模板层次结构。 通常,主题要么有一个特定的类别模板 (category.php),要么让一个更通用的存档模板 (archive.php) 处理所有列表,而不仅仅是类别。

您可能还需要注意特定的类别页面。 您可以识别这些模板,因为它们将被命名为 category-[category-slug].php。 如果你有很多这些,那么你可能需要重新考虑。

我将逐步更新 Twenty Twelve,它使用 category.php 模板。

无论您需要采用哪种方法,都应该为您的更改创建一个子主题。

将类别特色图像添加到 Twenty Twelve

这个老化但非常受欢迎的 WordPress 默认主题仍然是一个很好的练习主题。 插件只需要一件事。

在这段代码下面:

<header class="archive-header">

在 category.php 中,添加:

<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

如果您访问带有图像的类别,您会立即看到差异,但类别图像和类别标题需要一些 TLC。

给类别图像和标题一些 TLC

多年来看到许多更新的 Twenty-Twelve 主题和全尺寸图像默认为 100% 宽,因此根本不需要调整图像。 如帖子中所述,唯一需要在图像上覆盖标题并确保标题响应的 CSS 是:

header.archive-header h1.archive-title {
    position: absolute;
    color: #ffffff;
    font-size: 2em;
    margin-top: -120px;
    margin-left: 25px;
    word-wrap: break-word;
    max-width: 50%;
    line-height: 1.5em;
}

存档标题进行了彻底的修改:它的颜色变为白色,字体大小大大增加,定位和负边距确保它显示在特色图像上,如下所示:

对 Twenty Twelve 类别页面的一个相当令人印象深刻的改进
对 Twenty Twelve 类别页面的一个相当令人印象深刻的改进

一点也不差,并且在这方面有了很大的改进:

与特色图像版本相比相当平淡
与特色图像版本相比相当平淡
注意:我确实从主侧边栏中删除了所有小部件以确保全角显示。

这个例子当然展示了特色图像如何增强您的 WordPress 网站上的类别页面。 与往常一样,很大程度上取决于这些图像的质量,但选择正确的图像,结果令人印象深刻。

您是否尝试过使用此插件并添加特色图片? 让我们在评论中知道!

发表评论

您的电子邮箱地址不会被公开。