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

类别的特色图像是如此有益的想法之一,以至于您以前可能从未考虑过.

特色图像可以并且确实会对帖子页面产生巨大的积极影响,因此,当您考虑时,这是自然的,可以将这种影响扩展到我们的类别页面,并为访客提供即时视觉的额外奖励提示该主题.

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

Screengrab of a Bosco theme category page with a featured image and title and description overlayed. Screengrab of a Bosco theme category page with a featured image and title and description overlayed.

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

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

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

步骤3将取决于您的主题,但我将借助您添加20个十二个所需的更新(具有类别模板).

所以,让我们开始.

继续阅读,或使用以下链接向前跳跃:

  • 步骤1:安装插件
  • 步骤2:添加类别图像
  • 步骤3:更新您的主题

步骤1:安装插件

安装插件的最简单方法是简单下载,上传和激活.

没有什么可配置的,因此到第2步.

步骤2:添加类别图像

图像通过添加类别表单添加到新类别中,或在编辑类别上的现有类别 posts > 下类别.

选择一个类别,然后单击编辑,您将在底部看到上传/编辑图像按钮.单击"按钮"打开"媒体"对话框,您可以在其中选择现有图像或上传新图像,就像在帖子中添加特色图像一样.

Screengrab of the category edit screen showing an uploaded image Screengrab of the category edit screen showing an uploaded image

将图像添加到类别与将它们添加到将它们添加到帖子

将图像添加到几个类别中,然后移至步骤3.

步骤3:更新主题

好吧,前两个步骤很容易:此步骤有点棘手,因为您现在需要更新主题才能输出类别的特色图像.

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

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

我将浏览更新二十二十二,它使用 category.php 模板.

无论您需要采用哪种方法,都应为更改创建一个孩子主题.如果您不确定如何创建孩子主题,请查看我们出色的操作方法.

添加类别的特色图像到二十二十二>

这个老化但非常流行的WordPress默认主题仍然是一个很好的主题.插件只需要一件事.

在此代码下方:

<header class="archive-header"> category.php,add:

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

如果您访问带有图像的类别,则会看到立即的区别,但是类别图像和类别标题需要一些TLC.

给出类别图像和标题一些TLC

二十二个主题,这些年来,默认情况下有许多更新,而全尺寸的图像则宽度为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;
}

档案列表的彻底大修:其颜色已更改为白色,字体大小大大增加,位置和负距离可确保其通过此类特色图像显示:

Screengrab of a Twenty Twelve category page with a category image Screengrab of a Twenty Twelve category page with a category image

对二十二十一类类别页面的令人印象深刻的改进

一点都不糟糕,对此有很大的进步:

Screengrab showing out-of-the-box Twenty Twelve category page header Screengrab showing out-of-the-box Twenty Twelve category page header

与特色图像版本

注意:我确实从主侧栏中删除了所有小部件,以确保全宽显示.

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

4

发表回复