wordpress标签说明,wp:post-title

wordpress标签说明,wp:post-title

这段代码 <!-- wp:post-title {"level":1} /-->WordPress 块编辑器(Gutenberg) 的核心块标记,用于 动态显示当前文章或页面的标题,并通过参数控制标题的 HTML 层级。以下是详细解析:

核心功能

  1. 自动输出当前内容标题

    • 在文章/页面单页中:显示该内容的标题(如 <h1>Hello World</h1>)。

    • 在文章列表(如博客首页)中:显示每篇文章的标题(通常包裹在 <h2> 中,需配合 wp:query-loop 使用)。

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

    • 强制指定标题的 HTML 标签为 <h1>(最高层级),覆盖默认逻辑。

    • 若省略此参数,WordPress 会根据上下文自动选择标签(如单页用 h1,列表项用 h2)。

代码分解

部分说明
wp:post-title块类型,表示「文章标题」块,数据来自当前文章/页面。
{"level":1}参数:强制使用 <h1> 标签渲染标题(SEO 优化时常用)。
/-->自闭合标签,无需嵌套内容。

输出示例

单篇文章页(single.html)

<!-- wp:post-title {"level":1} /-->

渲染为:

<h1 class="wp-block-post-title">我的第一篇文章</h1>


文章列表(home.html)

<!-- wp:query-loop -->  <!-- wp:post-title {"level":3} /-->  <!-- 强制设为<h3> --> <!-- /wp:query-loop -->

渲染为每篇文章标题:

<h3 class="wp-block-post-title">文章标题1</h3> <h3 class="wp-block-post-title">文章标题2</h3>


适用场景

  • 单页模板优化

    • 确保文章主标题始终为 <h1>(SEO 最佳实践)。

    • 示例(single.html):

    <!-- wp:group {"tagName":"article"} -->     <article>       <!-- wp:post-title {"level":1} /-->       <!-- wp:post-content /-->     </article>     <!-- /wp:group -->


  • 自定义列表布局

    • 在归档页中控制标题层级(如设为 <h2> 避免与页面主标题冲突)。

  • 动态标题样式

    • 通过 CSS 类 .wp-block-post-title 统一设计标题样式。

参数选项

level 值输出标签典型用途
0仅文本(用 <div> 包裹)
1<h1>文章/页面主标题(SEO 关键)
2<h2>次级标题(如相关文章列表)
.........
6<h6>最低级标题

SEO 注意事项

  • 单页必须有一个 <h1>: 若页面已有其他 h1(如站点标题),需避免重复。可通过以下方式解决:

 <!-- 站点标题设为<h2> -->  <!-- wp:site-title {"level":2} /-->  <!-- 文章标题保留<h1> -->  <!-- wp:post-title {"level":1} /-->

  • 列表页避免滥用 <h1>: 在文章列表(如首页)中,通常应为每篇文章标题使用 <h2>

自定义样式

通过 CSS 控制标题外观:

/* 全局文章标题样式 */ .wp-block-post-title {  color: #333;  font-family: "Georgia", serif;  margin-bottom: 0.5em; } /* 单页标题特殊样式 */ .single .wp-block-post-title {  border-bottom: 2px solid #0073aa; }

与其他标题块对比

块名称作用数据来源典型 HTML 标签
wp:post-title当前文章/页面标题文章内容<h1>-<h6>
wp:site-title网站标题后台「常规设置」<h1> 或自定义
wp:query-title分类/搜索页标题当前查询类型<h1>(如“分类:科技”)

如需进一步控制标题,可结合 GroupCover 块或使用 className 添加自定义类。


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