修改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分页显示制作详细讲解
Dec 05 PHP
自动把纯文本转换成Web页面的php代码
Aug 27 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
Dec 05 PHP
php使用json_encode对变量json编码
Apr 07 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
Sep 09 PHP
php表单提交实例讲解
Nov 12 PHP
学习php设计模式 php实现工厂模式(factory)
Dec 07 PHP
PHP类的特性实例分析
Sep 28 PHP
yii2 resetful 授权验证详解
May 18 PHP
PHP面向对象程序设计之多态性的应用示例
Dec 19 PHP
php如何计算两坐标点之间的距离
Dec 29 PHP
php的命名空间与自动加载实现方法
Aug 25 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
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解jQuery选择器
2016/12/21 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
2014春晚主持词
2014/03/25 职场文书
驻村工作先进事迹
2014/08/14 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android