WordPress 自定义文章编辑器的样式

每一个 WordPress 主题的文章样式都是不一样的,但是在使用后台的可视化编辑器编辑文章的时候,样式却都是一致的。

但是 WordPress 提供了一个在文章可视化编辑器中自定义样式的功能,利用这个功能可以在 WordPress 可视化编辑器里自定义 CSS 样式。

把可视化编辑器的样式设置成和前端一样,可以方便用户直接预览出文章显示在前端的结果,不用刷新反复的调试文章排版样式。

自定义文章编辑器的样式

在文章编辑器添加一个自定义的 CSS 样式表只需要使用 add_editor_style() 函数。

首先在你的主题根目录创建一个 editor-style.css 样式表文件,然后在 functions.php 文件里添加:

/**  	*WordPress 自定义文章编辑器的样式  	*https://www.wpmee.com/editor-style.html  */  function wpmee_add_editor_style(){  	add_editor_style();  }  add_action( 'after_setup_theme', 'wpmee_add_editor_style' );

这样,editor-style.css 样式表就会在可视化编辑器里引入了,在 editor-style.css 文件里书写 CSS 就能直接体现在可视化编辑器上。

自定义 CSS 文件

除此之外,你还可以自定义 CSS 文件的路径:

/**  	*WordPress 自定义文章编辑器的样式  	*自定义 CSS 文件  	*https://www.wpmee.com/editor-style.html  */  function wpmee_add_editor_style(){ add_editor_style( 'css/custom-editor-style.css' );//这样就会调用主题目录 CSS 文件夹的 custom-editor-style.css 文件 } add_action( 'after_setup_theme', 'wpmee_add_editor_style' );

这样就会调用主题目录的 “css/custom-editor-style.css” 文件。

引入外部 CSS 文件
add_editor_style() 函数还支持引入外部的 CSS 文件:

/**  	*WordPress 自定义文章编辑器的样式  	*外部 CSS 文件  	*https://www.wpmee.com/editor-style.html  */  function wpmee_add_editor_style(){ add_editor_style( 'http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css' );//引入外部的 CSS 文件 } add_action( 'after_setup_theme', 'wpmee_add_editor_style' );

总结
自定义可视化编辑器的样式可以让作者直接预览到文章在前台的效果,排版更加方便。


版权免责声明

本资源仅用于个人学习测试使用,禁止用于任何商业环境,请于下载后24小时内删除本资源!

本文所有相关技术/资源内容统一放在下载包里

  1. 1、本网站名称:源码社
  2. 2、本站永久网址:https://www.nicedowns.com
  3. 3、站内所有资源均可通过日常签到等任务进行免费兑换,记得每日来本站签到哦~!。、
  4. 4、如果您觉得本站有帮助到您,也想给本站一些帮助。您可以再下方打赏本站。
  5. 5、本站资源来源于互联网收集/个人购买,如有侵犯到您的权益,请查看【版权声明】
  6. 6、本站提供的所有资源均来自互联网搜索,站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支持你喜欢的作者,谢谢!
  7. 7、本站资源大多存储在云盘,如发现链接失效 【链接失效】 我们会第一时间更新。本站提供的源码、模板、软件工具等其他资源,都不包含技术服务 请大家谅解!

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索