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

自定义 Gutenberg 编辑器样式

Jacky
1月 6, 2019干货
2,034 0 0

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 性能
上一篇
致命错误:高三期末
下一篇
评论 (0)
再想想
近期评论
  • Jacky发表在《iOS 固件下载中心》
  • Uni9k发表在《iOS 固件下载中心》
  • Jacky发表在《关于》
  • luyouqihome发表在《关于》
  • Jacky发表在《留言板》
二实起床铃
https://dl.jackyu.cn/blog/2016/10/2016100123314335.mp3
Copyright © 2016-2021 Jacky's Blog. Designed by nicetheme.
粤ICP备16016168号-1
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 影视
    • 尝鲜
    • 算法
    • 深度学习
热门搜索
  • Mac
  • Apple
  • OS X
  • iOS
  • macOS
  • Linux
  • WordPress
  • 阿里云
  • Windows
  • macOS Sierra
  • 运维
  • BootCamp
  • 维修
  • Cydia
  • Tweak
  • DEB
  • CDN
  • 加速网站
Jacky
PHP C C++ Python | 舞象之年 | 物联网工程
146 文章
114 评论
205 喜欢
  • 0
  • 0
  • Top