介绍
在 WordPress 的古腾堡编辑器中撰写文章时，我稍微更改了 h2 和 h3 的显示方式。文章的更改是正确的，但古腾堡编辑器中的显示却保持不变，没有反映出我所做的更改。
因此，我们能够在 Gutenberg 编辑器中反映文章的 h2 和 h3 样式，我们将解释如何做到这一点。
编辑 style.css
这是为显示而创建的 “Twenty Twenty Five “子主题的 style.css 内容。h3 和 h2 已更改。
style.css
/*
Theme Name: Twenty Twenty-Five Child
Version: 1.1
Template: twentytwentyfive
*/
/* 20250122 h3 更改左侧线条的显示，加粗 */
h3 {
border-left:5px solid #707f49;
padding-top:9px;
padding-bottom:9px;
padding-left:9px;
font-weight:bold;
}
/* 20250122 h2 更改粗体字指示 */
h2 {
font-weight:bold;
}- h2 : Bold
- h3 : 前导竖条、粗体和填充调整
如果在子主题的 style.css 中输入这些内容，文章就会正确更改。
然而，古腾堡编辑器并没有反映出这一点。
编辑 functions.php
为了让 Gutenberg 编辑器反映 CSS 内容，需要在 functions.php 中添加以下函数和钩子。
functions.php
//20250125 Gutenburg Editor 以反映显示样式表的内容。
function wpdocs_theme_add_editor_styles() {
add_theme_support('editor-styles');
add_editor_style('style.css');
}
add_action('after_setup_theme', 'wpdocs_theme_add_editor_styles');在这种情况下，显示屏和 Gutenberg 编辑器使用了相同的 style.css。
结果
现在，h2 和 h3 在古腾堡编辑器和文章视图中看起来是一样的。这只是一件小事，但它一直困扰着我，所以我很高兴能解决这个问题。
我们参考了 qiita 的这篇文章。
发表回复