修改WordPress中文章编辑器的样式的方法详解


Posted in PHP onDecember 15, 2015

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

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

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

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

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

/**
  *WordPress 自定义文章编辑器的样式
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style();
}

add_action( 'after_setup_theme', 'Bing_add_editor_style' );

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

修改WordPress中文章编辑器的样式的方法详解

自定义 CSS 文件

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

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

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

引入外部 CSS 文件

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

/**
  *WordPress 自定义文章编辑器的样式
  *外部 CSS 文件
  *http://www.endskin.com/editor-style/
*/
function Bing_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', 'Bing_add_editor_style' );

嗯,就是这样,顺带着再来推荐两款WordPress编辑器插件:

CKEditor for WordPress插件
CKEditor for WordPress 简介

CKEditor编辑器是老外的一款很强大的富文本编辑器,而CKEditor for WordPress 就是专门为 WordPress 定制的版本,用来替换默认的编辑器,有两套皮肤可选,支持为评论框添加编辑工具栏,配合 CKFinder 文件上传控件可以实现更多的功能。

CKEditor for WordPress 特色功能:

  • 用CKEditor取代默认WordPress编辑器
  • 可为评论框添加编辑工具栏
  • 通过CKEditor发表可以发表样式特别的彩色文字(可选)
  • 内置的文件管理与上传管理器,支持CKFinder——一个AJAX文件浏览器
  • 内置WordPress的“read more”标签(1)
  • 对投票插Wp-Polls的整合(3)
  • 对相册插件NextGEN Gallery的整合(5)
  • 对评分插件GD Star Rating的整合(4)
  • 对Viper's Video Quicktags插件的整合(2)
  • 对WordPress媒体按钮的整合
  • 可自行配置的输出格式
  • 可定制的工具栏按钮
  • 可定制的皮肤

以及其他

修改WordPress中文章编辑器的样式的方法详解

KEditor本身有比较灵活的设置选项,大家可以根据自己的需要配置,下面介绍一下文件上传控件CKFinder。

安装 CKFinder 文件上传控件

CKEditor 还有一个自身的强大的文件上传插件 CKFinder,增强 CKEditor 的上传功能,默认没有安装,你可以访问下载CKFinder PHP版本:http://ckfinder.com/download

上传ckfinder文件夹的内容到CKEditor for wordpress插件目录下的“ckfinder”的根目录里。

删掉原有文件夹下的config.php文件,将ckfinder_config.php改为config.php。

这时访问后台 CKEditor - Upload Options 进行相关设置即可。

CKEditor 和 CKFinder 下载

CKEditor for WordPress 下载:http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

CKFinder 下载:http://ckfinder.com/download

Kindeditor for WordPress插件(符合国人习惯)
Kindeditor 编辑器是国人开发的简单高效,易于使用的编辑器,内置了google code prettify,可以简单快速的插入代码。此外,盘先海 哥们将其制作了一个WordPress插件: Kindeditor for WordPress 。比较好的是可以一键排版、使用自带的图片上传功能、插入代码高亮、可视化插入<!-more->摘要按钮等等。

修改WordPress中文章编辑器的样式的方法详解

Kindeditor for WordPress 安装使用

1.可以在后台插件安装界面搜索 Kindeditor 在线安装,或者下载 Kindeditor for WordPress

2.启用插件后,在 设置 - Kindeditor设置下,可以设置是否启用前台代码高亮,可选一些样式

修改WordPress中文章编辑器的样式的方法详解

体验

我是在 3.5.1 环境下测试的,发现 Kindeditor for WordPress 似乎是固定了编辑器的宽度,如果你缩小浏览器,你会发现,编辑器不会自适应改变大小,导致右边部分文字直接被掩盖,希望插件作者可以解决这个问题。

下载 Kindeditor for WordPress

PHP 相关文章推荐
PHP控制网页过期时间的代码
Sep 28 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
Jul 23 PHP
PHP制作图形验证码代码分享
Oct 23 PHP
php之readdir函数用法实例
Nov 13 PHP
分享一段PHP制作的中文拼音首字母工具类
Dec 11 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
Jun 12 PHP
基于ThinkPHP实现的日历功能实例详解
Apr 15 PHP
PHP面向对象中new self()与 new static()的区别浅析
Aug 17 PHP
PHP智能识别收货地址信息实例
Jan 05 PHP
PHP fprintf()函数用法讲解
Feb 16 PHP
php利用array_search与array_column实现二维数组查找
Jul 08 PHP
PHP 枚举类型的管理与设计知识点总结
Feb 13 PHP
PHP工程师VIM配置分享
Dec 15 #PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
Dec 14 #PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
Dec 14 #PHP
php生成curl命令行的方法
Dec 14 #PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
Dec 14 #PHP
给WordPress中的留言加上楼层号的PHP代码实例
Dec 14 #PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
Dec 14 #PHP
You might like
多人战的战术与战略
2020/03/04 星际争霸
php中日期加减法运算实现代码
2011/12/08 PHP
php object转数组示例
2014/01/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python实用代码片段收集贴
2015/06/03 Python
python将unicode转为str的方法
2017/06/21 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
美德好少年事迹材料
2014/01/19 职场文书
高中语文课后反思
2014/04/27 职场文书
提拔干部考察材料
2014/05/26 职场文书
爱的教育读书笔记
2015/06/26 职场文书