如何让网站移动端指定文本可点击并跳转至首页？

先搞懂Chrome DevTools里的index:112是什么 #

那个是浏览器渲染后页面的行号，不是本地服务器里的文件行号，找不到对应的本地文件很正常，不用死磕这个。

方法一：用JavaScript绑定点击（不用改太多PHP，适合找不到模板文件的情况） #

这个方法对基础水平友好，不用找复杂的模板文件：

• 打开主题设置，找「自定义代码」或者「自定义JS」的入口（大部分主题都有这个选项）；如果没有，用WinSCP进主题文件夹（wp-content/themes/你的主题名），找js文件夹里的custom.js或者main.js（没有的话可以自己新建一个，或者直接改header.php/footer.php）
• 用Chrome DevTools定位这段文本：右键文本→检查，看它的class或者ID，比如文本对应的元素是<span class="mobile-top-text">返回首页</span>，那选择器就是.mobile-top-text
• 把下面的代码贴进去，替换成你的选择器：

document.addEventListener('DOMContentLoaded', function() {
  const clickableText = document.querySelector('.mobile-top-text'); // 换成你实际的选择器
  if (clickableText) {
    clickableText.style.cursor = 'pointer'; // 加手型光标，提示用户可点击
    clickableText.addEventListener('click', function() {
      window.location.href = '/'; // 直接跳首页，或者用WordPress的首页地址函数更稳妥
    });
  }
});

• 如果是在PHP文件里写（比如header.php），可以把跳转地址换成WordPress的官方函数，避免路径出错：

window.location.href = '<?php echo home_url(); ?>';

方法二：直接修改模板文件（找到输出文本的PHP代码） #

如果能找到输出这段文本的PHP文件，直接包裹a标签最直接：

• 用WinSCP进主题文件夹，常见的可能是header.php（如果文本在顶部）、footer.php，或者对应页面的模板文件（比如首页是front-page.php）
• 找到输出这段文本的代码，比如原来的是：

<p><?php echo get_theme_mod('mobile_header_text'); ?></p>

• 改成包裹a标签的形式，同时保留原样式：

<p><a href="<?php echo home_url(); ?>" style="color: inherit; text-decoration: none;"><?php echo esc_html(get_theme_mod('mobile_header_text')); ?></a></p>

• home_url()是WordPress自带的函数，会自动生成你的首页地址，避免硬写路径出错；style里的属性是为了让链接看起来和原来的文本一样，不会变成默认的蓝色下划线

注意事项 #

• 改任何文件前，先备份一份，万一改坏了能恢复
• 如果用方法一的时候找不到自定义JS入口，直接在footer.php的</body>标签前加<script>标签，把代码放进去就行
• 选选择器的时候尽量用唯一的class，别用太宽泛的选择器（比如直接选p），不然会把其他段落也变成可点击的

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