wordpress标签说明,wp:site-title

wordpress标签说明,wp:site-title

这段代码 <!-- wp:site-title {"level":0} /-->WordPress 块编辑器(Gutenberg) 的块标记,用于 动态显示网站标题,并通过参数控制其 HTML 标签层级。以下是详细解析:

核心功能

  1. 自动输出网站标题

    • 显示在 WordPress 后台 → 设置 → 常规 中设置的「站点标题」。

    • 标题内容完全动态,修改后台设置时会自动更新。

  2. "level":0 参数的作用

    • 例如:直接输出 我的网站 而不是 <h1>我的网站</h1>

    • 控制标题的 HTML 标签层级(默认为 h1)。

    • "level":0 表示 不包裹任何标题标签,仅输出纯文本。

代码分解

部分说明
wp:site-title块类型,表示「站点标题」块。
{"level":0}参数:level 为 0 时移除所有标题标签(h1-h6),输出纯文本。
/-->自闭合标签,无需嵌套内容。

输出对比

默认情况(无参数)

HTML<!-- wp:site-title /-->

渲染为:

HTML<h1 class="wp-block-site-title">我的网站</h1>

使用 "level":0

HTML<!-- wp:site-title {"level":0} /-->

渲染为:

HTML<div class="wp-block-site-title">我的网站</div>

或(根据主题)直接输出无包裹的文本。

适用场景

  1. 需要自定义标题标签时

    • 例如:手动用 Cover 或 Group 块包裹标题并添加样式:

HTML
     <!-- wp:cover -->     
     <div class="wp-block-cover">       
     <!-- wp:site-title {"level":0} /-->     
     </div>     
     <!-- /wp:cover -->
  1. 避免重复的 h1 标签

    • 如果页面已有其他 h1(如文章标题),用 "level":0 可防止 SEO 问题。

  2. 页脚或侧边栏显示标题

    • 在这些区域通常不需要主标题标签。

其他参数选项

level 值输出标签示例
0无标签<div>我的网站</div>
1h1<h1>我的网站</h1>
2h2<h2>我的网站</h2>
.........
6h6<h6>我的网站</h6>

自定义样式

通过 CSS 控制站点标题的样式(无论是否有标签):

CSS.wp-block-site-title {  font-family: "Arial", sans-serif;  color: #333;  font-size: 2.5rem;}

注意事项

  1. 动态内容

    • 标题始终从后台「常规设置」中读取,无法直接在此块中修改文本。

  2. SEO 影响

    • 如果用于页面主标题,建议保留 h1(默认或 "level":1)。

  3. 主题兼容性

    • 部分主题可能对 "level":0 的渲染方式不同(可能保留 div 或完全移除包裹)。

与其他标题块对比

块名称作用数据来源
wp:site-title显示网站标题后台「常规设置」
wp:post-title显示当前文章/页面标题文章编辑界面
wp:query-title显示分类/存档页标题当前查询的术语或存档类型

如果需要进一步控制标题样式,可以结合 GroupCover 或自定义 CSS 类使用。


THE END
喜欢就支持以下吧
点赞 0
评论 抢沙发
友好交流,请勿发纯表情,请勿灌水,会被封号喔
提交