每篇文章都显示所在分类的特色图片

如果你想使用 ACF 和 Astra 子主题 来为每个分类添加特色图像，并在分类下的文章页面中显示当前分类的特色图像，这可以通过以下步骤实现。我们将利用 ACF Pro 的 Term Meta 功能 来为分类添加自定义字段，同时结合 Astra 子主题的布局和钩子实现功能。

1. 创建分类的特色图像字段（ACF）

步骤：

1. 安装并激活 Advanced Custom Fields (ACF) 插件（推荐使用 ACF Pro）。
2. 转到 ACF > 添加字段组，创建一个新的字段组，比如 “分类特色图像”。
3. 添加一个字段：
   • Field Label：分类特色图像
   • Field Name：category_featured_image
   • Field Type：Image
   • Return Format：选择 Image URL 或 Image Array（推荐选择 Image Array，方便后续使用）。
4. 设置字段组的显示规则：
   • Location：Taxonomy 等于 分类（或者选择 Category）。
5. 保存字段组。

完成后，每个分类（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. 测试功能

测试文章页面

1. 打开 WordPress 后台，进入 文章 > 分类。
2. 为某个分类上传一张特色图像。
3. 创建一篇属于该分类的文章，并查看前端页面。
4. 确认分类的特色图像显示在文章内容的顶部。

测试分类归档页面

1. 打开分类归档页面（点击分类链接）。
2. 确认分类的特色图像显示在分类标题上方。

---

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 文件夹中，并调整路径。

---

总结

1. 创建分类特色图像字段：使用 ACF 添加一个 Image 字段，并绑定到分类（Category）。
2. 在文章页面显示：通过 Astra 钩子（如 astra_entry_top）动态显示当前分类的特色图像。
3. 在分类归档页面显示：直接在分类模板中调用 ACF 的分类字段。
4. 样式优化：为特色图像添加 CSS 样式。

通过这些步骤，你可以轻松实现基于分类的特色图像功能，同时保持 Astra 子主题的灵活性和可扩展性！