如何在 WordPress 中隐藏或删除页面标题(7 种简单方法)

Want更干净的主页,无分心登陆页面,或者是不用大默认标题战斗的英雄部分,修复通常是一样的:在WordPress中隐藏页面标题,这是一个很小的改变,一旦知道哪种方法适合你的设置,你可以在两分钟内完成。

Catch是“哪种方法”取决于你的主题,你的页面构建器,以及你是否希望标题从一个页面或你的整个站点中消失。一个块主题处理这个与经典主题不同的方式,Elementor有自己的切换,经典WordPress用户从未见过。

WordPress中隐藏或删除页面标题的七种方法如下:主题设置,站点编辑器,CSS,Elementor,主题构建器,插件和代码,每一种都有不同的SEO和可访问性后果,所以睁大眼睛挑选你不想用排名换取美学。

隐藏与删除页面标题:有什么区别?

这两个词可以互换使用,但它们描述不同的东西,而差异对于 SEO 来说很重要。

• 隐藏标题 HTML中保留它,但使访问者看不见它,通常使用CSS,搜索引擎和屏幕阅读器仍然可以看到它,因此页面保留了它的上下文。将其视为隐形斗篷。
• 删除标题 HTML中完全删除它,页面对访问者看起来是一样的,但搜索引擎丢失了一条上下文信息,屏幕阅读器用户丢失了告诉他们页面内容的标题。

对于大多数网站来说,隐藏是更安全的选择。删除主要是完全在页面构建器中构建的页面是有意义的,其中您的设计已经包含了自己的 H1 标题,并且主题的标题将是重复的。

页标题与 SEO 标题:不要混淆两者

Methods之前一个快速的澄清,因为这会绊倒很多人,你在页面上看到的页面标题(H1标题)和SEO标题(在谷歌结果中显示的标题标签和浏览器选项卡)是两回事。

本指南中的每种方法仅影响可见的页面标题。您的 SEO 标题由您的主题或 Yoast 或 Rank Math 等 SEO 插件设置,完全保留在原来的位置。因此,隐藏页面标题不会在搜索结果中删除您的列表。

方法 1:使用主题的内置隐藏标题选项

CSS 或插件之前, 检查您的主题是否已经解决了这个问题。许多流行的主题都附带每页标题切换:

• 阿斯特拉 在页面侧边栏设置中添加"“可丢弃标题”复选框"。
• GeneratePress 在其布局元框下包含标题可见性控件。
• Kadence 和 Neve 提供类似的每页切换。

打开编辑器中的任何页面,查看右侧的设置侧栏,扫描名为"“可丢弃标题”、"“隐藏标题”或"“标题可见性"的选项,如果有,请勾选它,更新页面,完成代码,无插件,仅应用于该页面。

如果您仍在为下一个项目选择主题,我们的综述 最佳元素主题 涵盖了几个包含此开箱即用的切换内容。

方法 2:在块主题中隐藏页面标题(站点编辑器)

用二十四或二十二十五这样的块主题?你会看到 外观 > 编辑器 在您的仪表板中而不是旧的自定义程序中。您在这里有两个选项。

选项 A:从模板中删除标题块

这会从使用模板的每个页面中删除标题:

1. 去 外观 > 编辑器 > 模板.
2. 打开 页数 模板(或您的页面使用的模板)。
3. 单击 标题 block,打开三点选项菜单,然后选择 删除.
4. 保存模板。

这是一个真正的删除:标题已从 HTML 中删除。使用该模板的页面将需要自己的标题,因此在每个模板的顶部附近添加一个标题块。否则访问者和搜索引擎将降落在完全没有 H1 的页面上 WordPress 标题块文档 更详细地涵盖此块。

选项 B:用 CSS 隐藏标题(保留 SEO 值)

如果您宁愿隐藏也不愿删除,请添加一个小的 CSS 规则:

1. 导航至 外观 > 编辑器 > 样式.
2. 单击 编辑 (笔)图标, 然后是三点菜单, 然后选择 附加 CSS.
3. 粘贴以下代码并保存。

.wp-block-post-title {
    display: none;
}

这是屏幕上的整个过程:

1件事要知道:这把标题隐藏在每个页面和帖子中,要只针对页面,就用 .page .wp-block-post-title 相反。如果保存后标题仍然显示,请硬刷新页面 (Ctrl+Shift+R),因为您的浏览器可能正在从缓存中提供旧样式表。

方法 3:在主题自定义器(经典主题)中隐藏带有 CSS 的标题

如果 外观 > 自定义 显示在您的仪表板中,您正处于一个经典的主题中,而 Customizer 的附加 CSS 面板是最快速的无插件路线。

首先,找到主题用于标题的 CSS 类。右键单击任意页面上的标题,选择 检查、并看标题元素,在大多数经典主题中,类是 entry-title的, 但不要假设。大量主题重命名, 而针对错误类的规则则无济于事。然后:

1. 去 外观 > 自定义 > 附加 CSS.
2. 添加下面的规则并发布。

.post .entry-title {
    display: none;
}

交换 .post 为 .page 定位页面,或使用 .page-id-42 .entry-title 面(您将在页面的编辑 URL 中找到 ID,方法 7 中涵盖)隐藏标题。

CSS 方法的优点:

• 无需插件。
• 标题保留在 HTML 中,因此 SEO 和屏幕阅读器不受影响。
• 您可以使用单个选择器定位一页、所有页面或所有帖子。

缺点:

• 每个主题都以不同的方式命名其标题类,因此您可能需要首先检查。
• 如果您切换主题,规则可能会停止匹配,标题会重新出现。

方法 4:将页面标题隐藏在 Elementor 中

Elementor用户得到最简单的方法,它可以在免费版本中工作,在Elementor编辑器中打开页面,单击 设置 (齿轮)图标在面板的左下角, 并打开 隐藏标题。更新页面,主题的标题仅从该页面中消失。

设置适用于每页,因此它适合您正在设计自己的英雄部分的登陆页面。由于您正在直观地构建页面,因此请将自己的标题小部件集添加到 H1,以便该页面仍然具有适当的标题结构。我们的指南 使用 Elementor 自定义 WordPress 布局 更深入地构建构建器制作的页面。

隐藏标题不起作用?修复标题选择器

Elementor 通过匹配常见的 CSS 类来隐藏标题 entry-title。如果你的主题使用自定义类, 切换默默失败, 这个抓到很多人, 修复需要一分钟:

1. 在浏览器中检查您的页面标题并复制其 CSS 类。
2. 在元素器中,转到 站点设置 > 布局.
3. 粘贴类(例如 h1.custom-title的)进入 页面标题选择器 字段并保存。

Hide Title 切换现在知道要寻找什么。元素人自己的 隐藏标题文档 也涵盖了这个设置。

替代方案:使用 Elementor Canvas 布局

Landing页面,有个更钝的仪器,在同一个页面设置面板中,改变 页面布局 到 元素画布Canvas 一招剥离主题页眉、页脚、标题区,留空白石板,想要完全设计控件时使用;还需要站点导航时跳过,或者搭配自己搭建的页眉 主题构建器.

方法 5:使用主题生成器删除全站标题

到目前为止,一切都逐页工作,或者用 CSS 隐藏标题。如果您希望模板级别的每个博客文章或每个页面上的标题都消失,主题构建器就是更干净的答案,因为您精确地控制模板渲染的元素。

使用 Elementor Pro,转到 模板 > 主题生成器 > 单篇文章、编辑您的单个帖子模板,选择帖子标题元素,然后将其删除。

如果您没有现有的单个帖子模板,请从头开始创建一个或从模板库导入一个,然后在发布之前删除帖子标题小部件。

Elementor Pro 不想仅仅为了这个而付费吗?主插件包含自己的插件 主题构建器 这可以让您使用 Elementor 免费版本构建标题、页脚、单帖模板、档案和 404 页。 标头、页脚和评论生成器文档 走过设置,相同的模板控制意味着您决定是否出现标题。这与我们在指南中使用的方法相同 使用 Elementor 在 WordPress 中编辑页脚.

优点:

• 一个模板编辑涵盖了该类型的每个帖子或页面。
• 完全可视化控制,无代码。
• 您可以将其与之配对 显示条件 显示不同内容的不同布局。

缺点:

• 需要 Elementor Pro 或 Master Addons 等主题构建器插件。
• 这是一个真正的删除,因此您的模板需要另一个 H1,例如标题小部件在您想要的位置动态拉取帖子标题。

方法 6:使用标题删除插件

如果您宁愿单击复选框而不是编写 CSS,请免费 标题删除 plugin做得很好,安装并激活它,每个页面,帖子,自定义帖子类型都会得到一个“在其设置面板中隐藏此项”复选框的标题,在您想要的页面上勾选它,其他地方都将其关闭。

是最适合初学者的选项,尽管它确实会再添加一个插件来维护,如果您的主题或页面构建器已经提供了切换(方法1和4),请先使用这些,并保持插件列表较短,更精简的堆栈也有助于加载时间,这是我们在帖子中介绍的 如何加快 Elementor 网站的速度.

方法 7:删除带有代码的标题(functions。php)

舒适的编辑主题文件?您可以在 PHP 级别过滤标题。将这些片段添加到您孩子的主题中 functions.php file。child 主题,这样主题更新不会擦除你的更改,并且先备份。

从单个博客文章中删除标题

add_filter( 'the_title', 'ma_remove_single_post_title', 10, 2 );
function ma_remove_single_post_title( $title, $id ) {
    if ( is_single() && in_the_loop() && get_the_ID() === $id ) {
        return '';
    }
    return $title;
}

从特定页面中删除标题

add_filter( 'the_title', 'ma_remove_page_title', 10, 2 );
function ma_remove_page_title( $title, $id ) {
    if ( is_page( YOUR_PAGE_ID ) && in_the_loop() && get_the_ID() === $id ) {
        return '';
    }
    return $title;
}

替换 YOUR_PAGE_ID 使用您所针对的页面的 ID。 in_the_loop() check事项:没有它,过滤器还可以把你的导航菜单标签和小部件标题都空白掉,我见过那个确切的错误在live站点上拿出一个完整的nav菜单。

如何查找页面 ID

WordPress编辑器中打开页面,看看浏览器地址栏中的网址。后面的数字 post= 是页面 ID。

此方法是真正的删除方法,因此请将其保留给主题不提供切换且 CSS 不可选的情况。如果您已经在 functions.php 领土,您可能还喜欢我们的教程 禁用自动保存功能 具有类似的片段。

SEO、UX 和可访问性:隐藏标题实际影响什么

在您将标题隐藏在网站上之前,请权衡权衡。

搜索引擎优化。 CSS 隐藏,H1 保留在你的 HTML 中,所以搜索引擎仍然会读取它,删除标题会删除该信号,而没有任何 H1 的页面会让 Google 少一些关于内容的上下文,如果你删除标题,总是在设计中的某个地方用另一个更宽的清单,请参阅我们的 Elementor 的 SEO 实践 guide。你的副标题也带有重量— a 目录插件 H2 和 H3 构建其页面导航, 因此保持标题结构的其余部分完好无损。

用户体验。 Landing page上,丢弃默认标题通常有助于:更少的竞争元素,更清晰的行动号召路径 在博客文章和文档中,标题定向读者。在那里删除它们往往会比润色更混乱。

无障碍。 屏幕阅读器依靠标题来导航页面。仍然会宣布一个隐藏 CSS 的标题,因此保留了可访问性。删除的标题没有替换 H1 会让屏幕阅读器用户猜测。如果您的设计替换了标题,则使替换成为真正的标题元素,而不是样式化的段落文本。

何时隐藏标题以及何时保留它们

保持标题可见时间:

• 该页面是博客文章、文档或读者通过搜索获得的任何内容。
• 您需要一个清晰的内容层次结构来进行导航和搜索引擎优化。
• 标题提供了页面其余部分不重复的上下文。

隐藏或删除标题:

• 您正在构建带有自己的英雄标题的登陆页面。
• 主页设计已经传达了该网站的含义。
• 主题的标题位置与您在 Elementor 中构建的设计发生冲突,例如 a 下的全角英雄 elementor 中的粘性标头.

常见问题

包裹起来

WordPress 中隐藏或删除页面标题归结为选择与您的设置匹配的方法。首先检查主题的内置切换,使用站点编辑器或自定义程序 CSS 进行全站隐藏,在各个登陆页面上访问 Elementor 的隐藏标题,并在您想要模板级控制时使用主题构建器,而无需在任何地方添加标题。

无论您走哪条路线,请记住经验法则:当您想保留 SEO 值时,请使用 CSS 隐藏,如果您真正删除标题,请在页面位置为页面提供另一个 H1。

如果您正在构建自定义布局,请查看全套 Master Addons 小部件和扩展。主题建设者, 自定义 CSS 扩展并且 80 多个其他工具可以处理此类作业,而无需额外的插件,并且 定价页面 示免费版本和专业版中包含的内容。