在 google chrome 中使用 F12 在 wordpress 主题中查找代码

Posted 2023-03-06

【中文标题】在 google chrome 中使用 F12 在 wordpress 主题中查找代码

【英文标题】：finding a code in wordpress theme using F12 in google chrome

【发布时间】：2021-04-01 17:02:55

【问题描述】：

这是我的第一个问题，我对这一切都很陌生:)。 我安装了一个在标题处显示 2 个按钮的主题，例如：一个立即购买按钮。主题没有删除按钮的选项。我所能做的就是更改按钮标题/文本，但我想完全删除它们。我已经使用 Chrome 的开发者工具标记查看器来找出它们所在的行，这揭示了类似的内容

<div class="header-button">
    <a class="button secondary is-outline" style="border-radius:99px;">
    <span>Sign Up</span>
  </a>
</div>

我的问题是如何使用相同的 Chrome 开发者工具来定位这些代码行并删除它们。

【问题讨论】：

它们可以在您的主题文件中的任何位置，因为主题作者对他们如何组织所述主题的文件有一定的了解。使用像 grep 这样的实用程序来递归搜索这些节点（或生成它们的代码）。

它也有可能是“自动”生成的。您需要在代码中搜索“注册”而不是专门搜索该代码。

【参考方案1】：

Chrome 开发者工具可以帮助您在页面上查找元素，并使用 客户端 CSS 或 JS 测试/模拟隐藏或删除这些元素。例如在您的代码中：

<div class="header-button">
    <a class="button secondary is-outline" style="border-radius:99px;">
    <span>Sign Up</span>
  </a>
</div>

如果在控制台中你做了类似的事情（假设'header-button' div 是带有此类的 html 中的第一个元素）：

var buttons=document.getElementsByClassName(names);
button[0].parentNode.removeChild(button[0]);

这将从加载页面的标记中删除元素。当然 - 为了使它成为页面的永久部分，您必须使用 WordPress 编辑器将此 javascript 保存到适当的页面。

如果您的意图是彻底删除这些按钮，即在任何情况下都不想显示它们 - 那么找到保存和/或生成此标记的页面（即使用 php）并删除此标记会更好解决方案。即，让每个用户下载按钮，然后使用 javascript 在客户端删除它们，而您只需更改标记以确保这些按钮永远不会首先提供给浏览器，这几乎没有逻辑。

为此，您可以在 Wordpress 中找到保存和/或生成此标记的页面或模板，并删除您不需要的标记。在主题模板或页面中搜索类（如“标题按钮”）应该有助于找到源代码。