海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

无论您的主题多么令人惊叹,您的开发人员多么有才华,或者您的网站设计多么完美,都有可能在某个时候,您想要改变某些东西。 不是很多,只是可能需要 这个 侧边栏,或制作 文本框消失。 但在一个页面上,而不是无处不在。 为此,您需要了解两个特定的 CSS 属性, 能见度展示,它可以帮助您通过稍微不同的方式在特定页面上隐藏某些元素。

https://www.youtube.com/watch?v=AqxyTbrV7_Y

订阅我们的 YouTube 频道

为什么要隐藏元素?

网站所有者想要隐藏的更普遍的元素之一是网站标题。 或者更具体地说,标题导航菜单。 也许是博客文章的元数据或评论部分。 问题是,为什么有人想要这样做? 为什么不完全从网站设计中删除数据?

总的来说,是因为那个单一的元素在路上,但它的删除不值得重写主题或页面来剪切. 也许你的关于页面有一个博客文章列表,但你不想在那里发布元数据。 您没有理由为该实例重写模板文件。 所以你可以通过CSS删除它。

或者,作为另一个例子,您想在不使用编辑器的情况下简单地取消单个帖子或页面上的评论部分。 CSS 可以让您隐藏或完全删除它,而不会影响网站的任何其他部分。 在特定页面或帖子上隐藏带有 CSS 的元素的一个流行原因是调整字体或标题大小。 在博客主题和布局仍然适用的情况下,特定页面的季节性字体更改以及隐藏的元数据和侧边栏可以在几行代码中完成,而不是完整的模板调整或重新设计。

但是,无论您出于何种原因,您都可以通过多种选择来隐藏元素。

如何找到要隐藏的元素

如果您知道要隐藏哪个元素但不知道如何命名它,您可以随时右键单击它并选择 检查. 这将打开 开发工具 窗格中,让您找到它使用的 CSS ID 或类。

海外社媒SNS代运营Tiktok代运营公司

检查元素

这样做后,当您将鼠标悬停在右侧并单击右侧检查工具中的正确行时,该元素将突出显示。

隐藏元素css

之后,它只是使用这些选择器来调整 CSS。 请注意,悬停时附加到元素的选择器语法 (1) 是将在您的 CSS 文件/字段中使用的内容。 中的内联选择器 (2) 是浏览器呈现的内容。

使用显示 CSS

隐藏元素的最简单方法是将其完全删除。 这 显示:无 财产就是这样做的。 它会完全删除您附加到的任何元素。 页面的那部分将不再呈现,它在页面上占用的空间将被删除并重新调整布局。

删除内容

这可能是删除页面元素的最常用方法。 您可以将其用作站点范围内的删除,也可以定位单个页面或帖子类型。

使用可见性 CSS

可见性:隐藏 CSS非常类似于 显示:无。 理论上,它们可用于实现相同的目标。 然而,最大的不同在于,使用这个,您不会删除元素。 和 能见度,你只是让它不可见。 从设计的角度来看,最大的区别在于 能见度,隐藏元素本身仍会占用设计空间。

如果您想删除页面上的标题,但又想保持与 DOM 顶部的间距,您将使用它。

标题菜单

当页面呈现时,空间仍然存在,但元素不会。

没有标题

何时使用可见性以及何时使用显示

如果将元素 CSS 隐藏在另一位上,则使用一位的主要原因非常简单。 当你使用 显示:无,子元素的整个继承被隐藏。 任何获得其样式或嵌套在元素中的东西都将消失。 和 可见性:隐藏,因为元素的空间仍然存在,所选元素的任何子元素都保持可见。

例如,如果您想隐藏一行和一列的背景,您可以使用 可见性:隐藏 保持其他元素的格式和呈现,删除 只要 你指定的那些。 使用 显示:无 在这种情况下,将删除整个行或列,重新组织页面内容。

如何在 WordPress 中隐藏特定页面上的元素

当涉及使用这些方法中的任何一种在 WordPress 中隐藏特定页面上的元素时,您很可能需要找到 页面 ID 类 对于要隐藏元素的任何特定页面。 请记住,页面 ID 号很简单,而不是 CSS ID。 其实就是一个CSS类选择器: .page-id-1337, 例如。

您可以在编辑页面的 URL 中找到页面或帖子 ID。 最快的方法是简单地将鼠标悬停在链接上并查看预览 URL。

页面编号

您还可以通过查看任何 编辑 或者 预览 页。 这些 URL 中列出的数字是页面 ID,您将在 CSS 选择器中使用它来定位该特定页面上的元素,而不是站点上的其他位置。

.page-id-55341 header#main-header {
display:none;
}

上面的代码将仅删除具有该特定 ID 的页面上的标题。 以下 CSS 将从每个页面中删除它并在网站上发布。

header#main-header {
visibility:hidden;
}

结束隐藏元素 CSS

不管你的原因是什么,知道什么时候以及 CSS 属性之间的区别 能见度展示 (以及何时使用它们)可以帮助您自定义和突出显示 WordPress 网站上的不同页面。 有时,您可能需要一个图像才能不出现在页面上。 或者,也许博客文章不需要显示元数据或日期。 无论您要删除什么元素,都有一些隐藏元素 CSS 变体可用于实现您的目标。

您必须使用 CSS 隐藏特定 WordPress 页面上的元素的原因是什么?

文章特色图片来自 maryliflower / shutterstock.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts