Wordpress 导航块：如何更改移动断点？

Question

干杯。 有人知道我是否可以正确更改 wordpress 导航块（wp-block-navigation）的移动断点，例如在 theme.json 或 over functions.php 中？ 有一个 css 解决方案（--> 下面的答案），但我仍然很好奇是否有办法不用 css 覆盖战斗。 谢谢：）

Answer 1

更改WordPress导航块的移动断点，可以按照以下步骤操作：

1. 识别导航块：第一步是识别 WordPress 主题中的导航块。 使用 class wp-block-navigation 查找块。 您可以通过检查页面源代码或使用浏览器开发人员工具来执行此操作。

2. 找到当前的移动断点：一旦你确定了导航块，你需要找到当前的移动断点。 这通常由主题 CSS 中的媒体查询控制。查找具有定义导航块断点的最大宽度值的媒体查询。

3. 更改移动断点：要更改移动断点，您可以编辑现有媒体查询或创建一个新媒体查询。 比如你想把断点改成600px，可以加上下面的CSS：

 @media (max-width: 600px) {.wp-block-navigation { /* Add your custom styles here */ } }

4. 保存更改：完成必要的更改后，保存 CSS 文件并刷新页面以查看更改。 通常最好在子主题或自定义插件中更改主题的 CSS，而不是直接编辑主题文件。 这将确保在更新主题时保留您的更改。

我希望这有帮助。 如果您有任何问题，请告诉我。

Answer 2

CSS中有多种设置断点的方法，您可以根据需要修改设置不同的标准尺寸或自定义尺寸。 这里有一些针对不同屏幕尺寸的设备的常见断点：

• 介于320px - 480px之间的移动设备
• 在481px到768px 之间，适用于iPad、平板电脑
• 在769px到1024px之间，适用于小屏幕、笔记本电脑
• 在1025px到1200px之间，适用于桌面、大屏幕
• 1201px和更大的超大屏幕，电视

通过使用这些 CSS 断点，您可以创建响应式网站。

因此，在您的场景中，如果您只想在移动设备上更改“wp-block-navigation”的 css，则必须将下面的 css 代码添加到自定义 css 文件的底行。 （如果你想修改你的主题设计，请使用 child-theme）

/* For small screen devices (480px and below) */
@media only screen and (max-width: 480px) {
   .wp-block-navigation {
     /* Add your custom styles here */
   }
}

正如我之前所说，您可以根据需要更改 (max-width: 480px) 的大小或使用特定范围的屏幕尺寸（从 Xpx 到 Ypx），如下所示：

/* For screen sizes from 480px to 600px */
@media only screen and (min-width: 480px) and (max-width: 600px){
   .wp-block-navigation {
     /* Add your custom styles here */
   }
}

这样，您的更改只会出现在屏幕尺寸最小为 480 像素和最大屏幕尺寸为 600 像素的设备上

为了获得更多教程和更好的理解，我建议您访问此链接并在对您的实际 css 文件进行任何更改之前做一些测试。

我希望这个答案对你有帮助。 干杯;）

Answer 3

从给出的答案中得到正确的方向后，下面是将默认断点 600px 更改为 1000px 所需的 css。 使用起来有点难看，重要。 但似乎没有过滤器或设置（例如在主题、json 中），这是我发现的唯一工作方式。 中和 wp 默认值。

/* copy of wp default css to a 1000px media query */
@media (min-width: 1000px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}

/* neutralize the wp default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}