Jacky's Blog Jacky's Blog
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习
首页 › 干货 › 自定义 Gutenberg 编辑器样式

自定义 Gutenberg 编辑器样式

Jacky
1月 6, 2019干货阅读 2,744

WordPress 有为 TinyMCE 编辑器增加样式的函数 add_editor_style() 然而当 Gutenberg 编辑器发布后,这个函数已经失去了效果。

Debug 后,决定弃用 add_editor_style(),使用 WordPress 内置的函数 wp_register_style(), wp_enqueue_style() 直接将 css 添加到后台页面。

function customize_editor_style() {
        wp_register_style(
            'editor_style',
            get_stylesheet_directory_uri() . '/editor-style.css'
         );
	wp_enqueue_style('editor_style');
}
add_action('admin_init', 'customize_editor_style');

这样就能成功将 editor-style.css 载入到后台的页面中,接下来就是 css 的编写了。

下面是我的 editor-style.css 的示例,只对字体进行了修改。

.editor-post-title__input, .editor-styles-wrapper {font-family: 'PingFang SC','Hiragino Sans GB','Microsoft Yahei',Arial,sans-serif!important;}

下面是在 Safari 中,修改前后字体的比较。

自定义 Gutenberg 编辑器样式-Jacky's Blog
Noto Serif
自定义 Gutenberg 编辑器样式-Jacky's Blog
PingFang SC
赞(0)
使用 xhprof 分析 WordPress 性能
上一篇
致命错误:高三期末
下一篇
再想想
暂无评论
近期评论
  • Jacky发表在《Nginx UI》
  • daiwenzh5发表在《Nginx UI》
  • Jacky发表在《Nginx UI》
  • daiwenzh5发表在《Nginx UI》
  • Jacky发表在《Nginx UI》
  • 0
  • 0
Copyright © 2016-2023 Jacky's Blog. Designed by nicetheme.
粤ICP备16016168号-1
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习
# Mac # # Apple # # OS X # # iOS # # macOS #
Jacky
PHP C C++ Python | 舞象之年 | 物联网工程
174
文章
169
评论
267
喜欢