几年前，大多数网站都采用固定布局设计，这意味着即使在较小的移动设备上也会显示相同的内容。为了适应移动设备的尺寸，您需要单独创建一个移动网站。然而，随着响应式网页设计的流行，这种情况已经得到了改变。现在，您只需要一个灵活的布局，就可以在任何设备上提供最佳的用户体验。这也是WordPress世界的最新趋势之一。
在过去，侧边栏通常被用来显示博客的各种小工具，如分类目录、标签云、搜索框等等。然而，现在越来越多的WordPress主题开始摒弃这种传统，采用少了侧边栏的布局。例如，默认的WordPress主题二〇二二就没有侧边栏。这种趋势与完整的站点编辑是一致的，您可以自己构建模板或页面布局。这样做不仅可以提高视觉效果，还能让用户更专注于核心内容。
尽管如此，仍有很多用户喜欢在桌面上保留侧边栏。但是，在移动设备上，这些小工具可能会占用宝贵的屏幕空间。如果您想要隐藏特定区块或小工具，那么在WordPress中可以轻松实现。通过使用一些简单的CSS代码，您可以根据需要在不同设备上显示或隐藏特定元素。这样，您就可以同时满足桌面和移动设备用户的需求，提供更好的用户体验。
总之，响应式网页设计和少了侧边栏的布局是当前WordPress世界的最新趋势。虽然一些用户仍然希望在桌面上保留侧边栏，但是在移动设备上隐藏特定区块或小工具可以让用户获得更好的视觉效果和用户体验。
隐藏特定的区块和小工具
在WordPress网站中，有时候您可能希望隐藏特定的区块或小工具。这可以通过利用CSS代码来实现。在CSS中，可以使用display属性来控制元素的可见性。将其设置为none，则该元素将被隐藏。以下是一些常用的方法来隐藏不同类型的元素：
- 隐藏侧边栏：如果您希望在移动设备上隐藏侧边栏，请使用@media查询和display:none属性。在您的主题样式表中添加以下代码即可：
@media(max-width: 768px) {
.sidebar {
display: none;
}
}
- 隐藏全宽区块：如果您希望在移动设备上隐藏全宽区块（例如社交分享栏），请使用@media查询和display:none属性。在您的主题样式表中添加以下代码即可：
@media(max-width: 768px) {
.social-share {
display: none;
}
}
- 隐藏特定的小工具：如果您只想隐藏特定的小工具，可以使用小工具本身的类名或ID。例如，如果您希望在移动设备上隐藏最近文章小工具，请在样式表中添加以下代码：
@media(max-width: 768px) {
#recent-posts-2 {
display: none;
}
}
- 隐藏特定的页面元素：除了侧边栏和小工具之外，您还可以隐藏特定页面元素，例如标题或图片。如果您希望在移动设备上隐藏某个元素，请使用相应元素的类名或ID，并将其display属性设置为none。
需要注意的是，当您隐藏元素时，它们仍然存在于HTML文档中，只是不可见而已。因此，这种方法并不会减少页面加载时间。如果您希望进一步优化页面性能，请考虑删除不必要的元素，而不是仅仅隐藏它们。
总之，利用CSS代码来隐藏特定的区块和小工具是一种简单而有效的方法，可以提高WordPress网站的用户体验和视觉效果。无论您需要隐藏什么类型的元素，在样式表中添加相应的代码即可。
如果您的WordPress网站有侧边栏，可能会出现在移动设备上占用过多空间的情况。这可能会影响用户体验并导致页面加载缓慢。为了解决这个问题，最好的方法是将所有小工具保留在桌面显示，并将它们在移动设备上隐藏。通过使用CSS媒体查询和display属性，您可以轻松地控制特定元素在不同屏幕尺寸下的可见性。这样，您就可以提供更好的移动用户体验，同时又不会损失桌面用户的功能。
此外，您可能还有一些全宽区块，例如社交分享按钮或广告。然而，在移动设备上，这些区块可能会被认为是干扰因素，需要被隐藏起来。幸运的是，现代的WordPress主题通常已经自带了响应式设计，这意味着它们已经为移动设备做好了优化。如果您的主题没有自适应布局，那么您可以采用类似的方法，利用CSS媒体查询和display属性，将这些区块隐藏在移动设备上。
除了侧边栏和全宽区块之外，还有许多其他元素可以根据不同设备的尺寸进行隐藏或显示。例如，您可能希望在移动设备上隐藏一些较大的图片或视频，以提高页面加载速度和用户体验。或者，您可能希望在桌面设备上隐藏某些元素，以使页面更加简洁和易于阅读。
总之，利用CSS媒体查询和display属性，可以轻松地控制特定元素在不同设备上的可见性。这为您提供了更多的自定义选项，让您的WordPress网站可以适应各种屏幕尺寸和设备类型。无论您需要隐藏侧边栏、全宽区块还是其他元素，都可以通过这种方法来实现。
小工具控件和可见性
有很多方法可以控制WordPress中小工具和区块的可见性。我们将解释以下选项，您可以使用适合您需要的选项。
- 使用Gutenberg附加插件
- 使用另一个插件控制小工具的可见性
- CSS最大宽度属性
1. Spectra – WordPress Gutenberg区块插件
Gutenberg区块编辑器是一个功能强大的WordPress工具，它不仅可以让您创建各种类型的内容模块，还具有许多隐藏的功能。此外，还有一些插件可以为Gutenberg区块编辑器添加更多功能，使其更加灵活和易于使用。
其中最流行的插件之一是Brainstorm Force开发的“Spectra – WordPress Gutenberg Blocks”插件。“Spectra”这个名字可能会让人有些困惑，因为这个插件以前的名字叫做“Ultimate Addons for Gutenberg”。无论如何，这个插件提供了许多新的区块、布局选项和样式，可以让您更加轻松地构建自定义页面。如果您正在使用Astra主题，那么这个插件可能已经预先安装在您的网站上了。否则，您可以通过搜索“Spectra – WordPress Gutenberg Blocks”来找到并安装它。
一旦您安装并激活了插件，您就可以开始利用它的额外功能了。例如，如果您想要在移动设备上隐藏某个段落的绿色背景，可以按照以下步骤操作：
- 在文章编辑器中选择要隐藏的段落区块。
- 单击该区块右上角的三个点图标，然后选择“选项”。
- 如果显示“显示更多设置”，请单击该选项，以展开所有可用的设置。如果显示“隐藏更多设置”，那么这些设置已经在侧边栏上显示了。
- 在“高级”选项卡中，您将看到一个名为“CSS类名”的文本框。在这里输入以下代码：
hidden-on-mobile
- 单击“应用”按钮并保存文章。现在，在移动设备上查看该文章时，绿色背景将不再显示。
“Spectra – WordPress Gutenberg Blocks”插件是一个非常有用的工具，可以帮助您更好地管理Gutenberg区块编辑器中的内容。通过使用这个插件提供的额外元框，您可以根据需要有条件地显示或隐藏特定的区块和元素。这使得您可以创建适合不同设备和屏幕尺寸的响应式设计，并提高用户体验。
使用UAG插件显示条件
为了使用“显示条件”元框，请按照以下步骤操作：
- 在右侧边栏上选择“区块”，然后滚动到显示“高级”的底部。
- 展开“高级”部分以查看那里有一个新的“显示条件”元框。
- 单击其下拉菜单以查看多个选项。该插件提供隐藏或显示任何基于区块的多个条件，如用户状态（已登录或注销）、用户角色、浏览器和操作系统。
- 选择适当的条件，并输入相应的值。例如，如果您想在手机中隐藏某个区块，则应选择“响应可见性”选项。
- 保存文章并预览更改。现在只有符合特定条件的用户才能看到该区块。
需要注意的是，“显示条件”元框只能通过安装和激活适当的插件来启用。例如，“Spectra – WordPress Gutenberg Blocks”插件是一款提供此功能的流行插件之一。安装这个插件后，您就可以开始使用“显示条件”元框来进一步控制区块的可见性了。
选择响应式可见性
- 您将看到显示其他选项并打开“在移动设备上隐藏”选项。
在移动设备上隐藏区块
现在，发布您的文章并在桌面设备中检查以查看彩色段落区块是否可用。但是，当您在手机上看到该页面时，该段落将自动消失。
隐藏在移动设备上的区块
注意：
插件可以为Gutenberg区块编辑器添加新的功能，如“显示条件”元框，以便根据特定条件来控制区块的可见性。但是，需要注意的是，一些插件可能会向每个区块添加此元框，即使您已在插件设置中停用了所有的模块。如果您停用了这些插件，所有区块将恢复在所有设备上可见。因此，在安装和使用插件之前，请仔细阅读其文档并了解其行为。
如果您想要隐藏区块小工具，则可以通过导航到“外观 > 小工具”部分来实现。选择要隐藏的小工具，并从“显示条件”中选择“在移动设备上隐藏”。这将使该小工具在移动设备上不再显示。同样地，您也可以使用其他条件来配置小工具的可见性，例如用户状态或浏览器类型。
在侧边栏和页脚中隐藏小工具
2. 小工具选项 – 插件
Spectra插件是一个非常好的选择，可以帮助您隐藏任何区块或小工具。但是需要注意的是，它仅在您使用Gutenberg编辑器时才有效。如果您仍在使用旧的经典编辑器或使用不支持Gutenberg的自定义文章类型，这个插件就不是一个选项了。
在这种情况下，您仍然有其他选择来隐藏侧边栏和页脚小工具。以下是一些可能有用的插件：
- Widget Options：这是一个广泛使用的小工具管理器，可以让您轻松地控制小工具的显示方式。它提供了多种条件选项，如页面、文章、分类等。您还可以根据访问者的设备类型（例如移动设备）来隐藏特定的小工具。
- Jetpack：Jetpack是一个全面的WordPress插件，提供了各种功能，包括网站统计、安全性、联系表单和社交分享等。其中一个最有用的功能是“自定义CSS”，它允许您添加自定义的CSS代码来修改网站的外观和行为。通过添加适当的CSS代码，您可以轻松地隐藏侧边栏和页脚小工具。
- Disable Blog Sidebar：这个插件专门用于隐藏侧边栏。它提供了一个选项，可以选择在哪些页面上隐藏侧边栏。您还可以通过添加自定义CSS代码来更改小工具的样式。
- 安装并激活“ Widget Options – Add Context To WordPress Widgets ”插件。
小工具选项插件
- 转到“设置 > 小工具选项”菜单并确保“经典小工具屏幕”显示为已启用（显示“禁用按钮表示该选项已启用）。
- 这将禁用Gutenberg小工具区块并启用经典小工具界面。您在页面上确实很少有其他设置来控制页面可见性、添加自定义CSS类等，您可以根据需要进行配置。
禁用区块编辑器并启用经典小工具
- 现在，转到“外观 > 小工具”部分并展开您想在手机上隐藏的小工具。您会发现该插件为小工具添加了许多选项。
其他小工具设置
- 单击“设备”图标，然后从“隐藏/显示”下拉菜单中选择“在选中的设备上隐藏”选项。然后选择“移动”复选框并单击“保存”按钮。
隐藏在设备上
在移动设备上检查您的网站，您将找不到此小工具。请记住，此时该插件仅适用于经典小工具界面，您也无法隐藏内容区域中的元素。
3.自定义CSS
如果您不想使用插件来隐藏移动设备上的区块或小工具，那么还有一个手动选项可供选择。您可以使用CSS的“最大宽度”属性来实现这一点。
要使用此方法，请按照以下步骤操作：
- 打开您的WordPress网站，并导航到需要隐藏区块或小工具的页面。
- 在Gutenberg编辑器或经典编辑器中选择要隐藏的区块或小工具。
- 单击该元素右侧的“设置”按钮，然后选择“HTML”或“编辑HTML”选项。
- 在出现的HTML代码中，找到该元素的类名或ID。例如，“sidebar”或“footer-widget-area”等。
- 将以下CSS样式添加到您的主题样式表中：
@media (max-width: 768px) {
.element-class or #element-id {
display: none;
}
}
- 将“element-class”或“element-id”替换为您在步骤4中找到的类名或ID。
- 将“768px”更改为适当的屏幕宽度，以根据需要隐藏元素。
- 保存并预览更改。现在，在移动设备上查看该页面时，该元素将不再显示。
需要注意的是，这种方法需要一些CSS编码知识。如果您不确定如何使用CSS样式表，请考虑寻求专业帮助或使用插件来实现您的目标。
总之，使用CSS的“最大宽度”属性是一种手动选项，可以帮助您隐藏移动设备上的区块或小工具，而无需使用插件。虽然这需要一些技术知识，但它可以提供更细粒度的控制，并使您能够创建完全自定义的响应式设计。
将自定义CSS类添加到区块
- 发布您的文章并导航到“外观 > 自定义 > 附加CSS”部分。
- 添加以下CSS代码并发布您的更改。
@media (max-width: 767px){
.hideonmobile{
display: none;
}
}
- 它应该在定制器屏幕中如下所示。
在定制器中添加区块CSS
现在，该区块将隐藏在宽度小于767像素的任何设备上。同样，您也可以通过在小工具区块编辑器中添加自定义CSS来隐藏小工具。您可以利用对多个区块和小工具使用相同的CSS类（在我们的示例中为hideonmobile）来使用相同的CSS在移动设备上隐藏所有它们。
小结
在WordPress中，有多个选项可用于在移动设备上显示或隐藏区块。如果您使用Gutenberg编辑器，则可以使用手动方法来隐藏元素，这不需要任何第三方插件。
但是，如果您需要更多功能，例如基于浏览器或操作系统类型的条件显示或隐藏区块，则可以考虑使用Spectra插件。这个插件提供了许多选项，使您能够根据特定条件有条件地显示或隐藏区块。需要注意的是，当您停用插件时，这些区块将变得可见。
如果您仍在使用经典小工具，请考虑使用Widget Options插件。它是一个流行的小工具管理器，可让您根据页面、文章或分类等条件控制小工具的显示方式。您还可以根据访问者的设备类型（如移动设备）来隐藏特定的小工具。
总之，在WordPress中有许多选项可用于在移动设备上显示或隐藏区块。选择正确的方法取决于您的需求和技术知识水平。无论您是使用Gutenberg编辑器还是经典编辑器，都应该有一个适合您的解决方案。
