如何在WordPress页脚模式中设置链接悬停颜色？能否用theme.json实现？

我基于TwentyTwentyFour主题搭建了WordPress站点，页脚版权模式文件路径为/wp-content/themes/my-theme/patterns/footer.php。目前已成功设置页脚文本颜色及链接默认颜色，但不清楚如何设置链接的悬停状态文本颜色，对应的区块代码如下：

<div id="copyright" class="wp-block-group has-contrast-background-color alignwide" style="padding-top:var(--wp--preset--spacing--half);padding-bottom:var(--wp--preset--spacing--half)">
    <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-3"}}}},"textColor":"contrast-4","fontSize":"small"} -->
    <p class="has-text-align-center has-contrast-4-color has-text-color has-link-color has-small-font-size">
    <?php
        $copyright = '&copy; '.date('Y').' All rights reserved. ';
        $copyright_link = '<a href="' . esc_url( __( 'https://example.com', 'textdomain' ) ) . '" rel="nofollow">Link Target</a>';
        echo sprintf(
            esc_html__( '%1$s Web Design by %2$s', 'textdomain' ),
            $copyright, $copyright_link
        );
        ?>
    </p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

请问是否可以通过theme.json文件实现该需求？我不想使用CSS。

完全可以通过theme.json实现，无需额外编写CSS，以下是两种可行方案：

方案1：全局设置所有链接的悬停颜色 #

如果希望全站链接的悬停状态都使用统一颜色，直接在theme.json的styles节点下配置链接的:hover状态：

{
  "styles": {
    "elements": {
      "link": {
        ":hover": {
          "color": {
            "text": "var:preset|color|contrast-2" // 替换为你需要的颜色预设slug
          }
        }
      }
    }
  }
}

将contrast-2替换为你主题调色板中已有的颜色预设（比如primary、accent等，对应theme.json中settings.color.palette里的slug值）。

方案2：仅针对页脚版权区块设置悬停颜色 #

如果只想让该页脚的链接拥有特定悬停颜色，需要先给区块添加自定义类，再在theme.json中针对性配置：

步骤1：修改footer.php的区块类名 #

给页脚的wp:group添加自定义类copyright-footer：

<div id="copyright" class="wp-block-group copyright-footer has-contrast-background-color alignwide" style="padding-top:var(--wp--preset--spacing--half);padding-bottom:var(--wp--preset--spacing--half)">

步骤2：在theme.json中配置该类下的链接悬停样式 #

使用theme.json的区块样式嵌套配置，仅对copyright-footer类下的链接生效：

{
  "styles": {
    "blocks": {
      "core/group": {
        ".copyright-footer": {
          "elements": {
            "link": {
              ":hover": {
                "color": {
                  "text": "var:preset|color|primary" // 替换为目标颜色预设
                }
              }
            }
          }
        }
      }
    }
  }
}

注意事项 #

• 确保你使用的颜色预设已在theme.json的settings.color.palette中定义，例如：

  {
    "settings": {
      "color": {
        "palette": [
          {
            "slug": "primary",
            "name": "Primary Color",
            "color": "#2563eb"
          }
        ]
      }
    }
  }
  

• 修改theme.json后，刷新WordPress后台缓存（可通过临时切换主题再切回，或清理缓存插件），确保配置生效。

内容的提问来源于stack exchange，提问作者Khrys