WordPress中如何修改指定div类HTML实现整区域可点击

首先得先搞清楚这个带背景图的分类组件是哪来的，不同来源改法不一样，分三种常见情况说：

情况1：用Elementor做的组件 #

你之前试了Elementor的HTML片段没成功，可能是没找对方式：

• 直接重构：删掉原来的div组件，拖一个「HTML区块」进去，自己写带样式的a标签代替div，比如：

  <a href="你的分类链接地址" class="原来的div类名" style="background-image: url('背景图URL'); padding: 20px; display: block;">
    分类名称
  </a>
  

  把类名、背景图、内边距都改成你原来的数值，这样整个a标签区域都是可点击的。
• 偷懒用JS：如果不想重构，在Elementor后台的「自定义代码」里加一段页脚JS：

  document.addEventListener('DOMContentLoaded', () => {
    // 替换成你那个div的类名
    const boxes = document.querySelectorAll('.category-box');
    boxes.forEach(box => {
      // 取div里原有按钮的链接
      const link = box.querySelector('a').href;
      box.style.cursor = 'pointer';
      box.onclick = () => window.location.href = link;
    });
  });
  

  这样点整个div就会跳转到原来按钮的链接。

情况2：主题自带的首页分类模块 #

• 找模板文件：进WordPress后台「外观 > 主题文件编辑器」，先看front-page.php或者home.php，搜你那个div的类名（比如用Chrome开发者工具查到的category-btn-wrap），找到输出这个div的PHP代码段。
• 改代码：把原来的<div>标签改成<a>，加上分类的链接属性，同时删掉div里面原来的小按钮（HTML不让a嵌套a）。比如原来的代码可能是：

  <div class="category-btn-wrap">
    <a href="<?php echo get_category_link($cat->term_id); ?>">查看分类</a>
  </div>
  

  改成：

  <a href="<?php echo get_category_link($cat->term_id); ?>" class="category-btn-wrap">
    分类名称
  </a>
  

  保存就行，记得改前先备份主题，或者用子主题改，不然主题更新会丢代码。

情况3：自定义短代码生成的组件 #

如果这个分类组件是你自己加的短代码（比如在functions.php里写的），直接打开functions.php，找到生成这个div的函数，把<div>替换成带href的<a>标签，同样要去掉内部的嵌套a标签。

关键提醒 #

• 绝对不要让a标签嵌套a标签，会导致浏览器解析异常，所以改的时候一定要把div里原来的小按钮a删掉。
• 用子主题修改主题文件是好习惯，避免更新主题丢失自定义代码。

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