如果你想使用 ACF 和 Astra 子主题 来为每个分类添加特色图像，并在分类下的文章页面中显示当前分类的特色图像，这可以通过以下步骤实现。我们将利用 ACF Pro 的 Term Meta 功能 来为分类添加自定义字段，同时结合 Astra 子主题的布局和钩子实现功能。
1. 创建分类的特色图像字段（ACF）
步骤：
- 安装并激活 Advanced Custom Fields (ACF) 插件（推荐使用 ACF Pro）。
- 转到 ACF > 添加字段组，创建一个新的字段组，比如 “分类特色图像”。
- 添加一个字段：
– Field Label：分类特色图像
– Field Name：category_featured_image
– Field Type：Image
– Return Format：选择Image URL或Image Array（推荐选择Image Array，方便后续使用）。 - 设置字段组的显示规则：
– Location：Taxonomy 等于分类（或者选择Category）。 - 保存字段组。
完成后，每个分类（Category）都会多出一个“分类特色图像”的上传字段。
2. 在分类文章页面显示分类的特色图像
在 Astra 子主题中实现
我们将在 Astra 子主题中使用 WordPress 的分类元数据和 ACF 自定义字段来动态显示分类特色图像。
步骤 1：创建自定义函数
在 Astra 子主题的 functions.php 文件中添加以下代码：
<?php
// 获取当前分类的特色图像
function get_current_category_featured_image() {
if (is_single()) { // 确保只在单篇文章页面执行
// 获取当前文章的分类
$categories = get_the_category();
if (!empty($categories)) {
// 获取第一个分类（或主分类）
$category_id = $categories[0]->term_id;
// 从 ACF 获取分类的特色图像
$category_featured_image = get_field('category_featured_image', 'category_' . $category_id);
// 如果存在分类特色图像，返回 HTML
if ($category_featured_image && isset($category_featured_image['url'])) {
return '<div class="category-featured-image">
<img src="' . esc_url($category_featured_image['url']) . '" alt="' . esc_attr($categories[0]->name) . '" style="width: 100%; max-width: 800px; height: auto;">
</div>';
}
}
}
return ''; // 如果没有图片或不在单篇文章页面，返回空
}
?>
步骤 2：使用 Astra 钩子在文章页面显示分类特色图像
Astra 提供许多钩子（Hooks）来插入自定义内容。例如，我们可以使用 astra_entry_top 钩子将分类特色图像插入到文章的顶部。
在子主题的 functions.php 文件中添加以下代码：
<?php
// 使用 Astra 钩子在文章内容顶部显示分类特色图像
add_action('astra_entry_top', 'display_category_featured_image');
function display_category_featured_image() {
// 获取并输出分类的特色图像
echo get_current_category_featured_image();
}
?>
3. 为分类归档页面显示特色图像
如果你希望在分类归档页面（category.php）中显示该分类的特色图像，可以直接在分类模板文件中使用 ACF 提供的分类元数据。
步骤 1：编辑 category.php
确保你的子主题有一个 category.php 文件。如果没有，可以从 Astra 主主题中复制一个模板文件到子主题中。然后，添加以下代码到适当的位置（比如分类标题的上方）：
<?php
// 获取当前分类的对象
$current_category = get_queried_object();
// 获取当前分类的特色图像
$category_featured_image = get_field('category_featured_image', 'category_' . $current_category->term_id);
// 如果分类有特色图像，显示
if ($category_featured_image && isset($category_featured_image['url'])) {
echo '<div class="category-featured-image">
<img src="' . esc_url($category_featured_image['url']) . '" alt="' . esc_attr($current_category->name) . '" style="width: 100%; max-width: 800px; height: auto;">
</div>';
}
?>
4. 自定义样式
为了让分类特色图像更美观，可以在 style.css 文件中添加一些样式：
.category-featured-image {
margin-bottom: 20px;
text-align: center;
}
.category-featured-image img {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
5. 测试功能
测试文章页面
- 打开 WordPress 后台，进入 文章 > 分类。
- 为某个分类上传一张特色图像。
- 创建一篇属于该分类的文章，并查看前端页面。
- 确认分类的特色图像显示在文章内容的顶部。
测试分类归档页面
- 打开分类归档页面（点击分类链接）。
- 确认分类的特色图像显示在分类标题上方。
6. 可选功能扩展
显示多个分类的特色图像
如果文章属于多个分类，并希望显示所有分类的特色图像，可以在文章页面中循环所有分类并显示它们的特色图像：
<?php
if (is_single()) {
$categories = get_the_category();
if (!empty($categories)) {
echo '<div class="category-featured-images">';
foreach ($categories as $category) {
$category_id = $category->term_id;
$category_featured_image = get_field('category_featured_image', 'category_' . $category_id);
if ($category_featured_image && isset($category_featured_image['url'])) {
echo '<div class="category-featured-image">
<img src="' . esc_url($category_featured_image['url']) . '" alt="' . esc_attr($category->name) . '" style="width: 100%; max-width: 800px; height: auto;">
</div>';
}
}
echo '</div>';
}
}
?>
设置默认分类特色图像
如果某个分类没有设置特色图像，可以提供一个默认图像：
<?php
if (!$category_featured_image) {
$category_featured_image = array('url' => get_stylesheet_directory_uri() . '/images/default-category.jpg'); // 默认图片路径
}
?>
将默认图片上传到子主题的 images 文件夹中，并调整路径。
总结
- 创建分类特色图像字段：使用 ACF 添加一个
Image字段，并绑定到分类（Category）。 - 在文章页面显示：通过 Astra 钩子（如
astra_entry_top）动态显示当前分类的特色图像。 - 在分类归档页面显示：直接在分类模板中调用 ACF 的分类字段。
- 样式优化：为特色图像添加 CSS 样式。
通过这些步骤，你可以轻松实现基于分类的特色图像功能，同时保持 Astra 子主题的灵活性和可扩展性！