wordpress标签说明,wp:navigation

云游道人 2026-02-08 8 阅读 0评论

这段代码  是 WordPress 块编辑器（Gutenberg）中用于插入和配置导航菜单块（Navigation Block）的标记。以下是详细解析：

核心功能

动态生成导航菜单

自动显示在 WordPress 后台 → 外观 → 菜单 中创建的导航菜单。
支持多级下拉菜单、自定义链接、页面列表等。

关键参数解析

overlayBackgroundColor 和 overlayTextColor：控制移动端菜单的叠加层样式。
layout：定义导航项的排列方式（如右对齐、自动换行）。

属性详解

1. 颜色控制（移动端菜单）

属性	值	作用
`"overlayBackgroundColor"`	`"base"`	移动端菜单展开时的背景色，使用主题预设的 `base` 颜色（通常为浅色背景）。
`"overlayTextColor"`	`"contrast"`	移动端菜单的文字颜色，使用与背景对比的颜色（通常为深色文字）。

2. 布局控制 (`layout`)

属性	值	作用
`"type":"flex"`	-	使用 Flexbox 布局排列导航项。
`"justifyContent":"right"`	`left/center/right`	导航项整体右对齐（默认左对齐）。
`"flexWrap":"wrap"`	`wrap/nowrap`	允许导航项在空间不足时自动换行（默认不换行）。

渲染效果示例

桌面端

HTML
<nav class="wp-block-navigation">
  <ul class="wp-block-navigation__container is-flex is-justified-right is-wrap">
      <li><a href="/">首页</a></li>    
      <li><a href="/about">关于</a></li>    
      <!-- 其他导航项... -->  
  </ul>
</nav>

移动端（展开时）

HTML
<div class="wp-block-navigation__responsive-container" style="background-color:var(--wp--preset--color--base)">
  <ul style="color:var(--wp--preset--color--contrast)">    
    <li><a href="/">首页</a></li>    
    <li><a href="/about">关于</a></li>
  </ul>
</div>

适用场景

页眉/页脚导航

通过模板部分（如 header.html）插入，确保全站菜单一致。

自定义布局

右对齐适合页眉右侧的辅助菜单，换行适合多链接的页脚导航。

移动端优化

叠加层颜色参数直接控制移动端菜单的视觉体验。

如何自定义？

后台编辑

在块编辑器中选中导航块，通过侧边栏调整颜色、布局等参数。

主题 JSON

在 theme.json 中预设颜色值（如 base 和 contrast）：

Json     
{
       "settings": {
             "color": {
             "palette": [
                  { "slug": "base", "color": "#ffffff" },             
                  { "slug": "contrast", "color": "#000000" }           
             ]
         }
       }
     }

注意事项

菜单内容管理

导航项需在 后台 → 外观 → 菜单 中预先配置。

主题兼容性

部分旧主题可能需要额外 CSS 支持 flex 布局。

SEO 友好性

导航块会自动输出语义化的 <nav> 标签，无需手动优化。

扩展：其他常用导航块参数

参数	示例值	作用
`"orientation"`	`"horizontal"`	水平/垂直排列（默认水平）。
`"openSubmenusOnClick"`	`true`	点击（非悬停）展开子菜单。
`"fontSize"`	`"large"`	预设字体大小。