修改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生成SessionID和图片校验码的思路和实现代码
Mar 10 PHP
php判断GIF图片是否为动画的方法
Sep 04 PHP
分享最受欢迎的5款PHP框架
Nov 27 PHP
CI框架中site_url()和base_url()的区别
Jan 07 PHP
php读取der格式证书乱码解决方法
Jun 22 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
Jul 18 PHP
无需数据库在线投票调查php代码
Jul 20 PHP
Yii2框架实现登陆添加验证码功能示例
Jul 12 PHP
PHP经典设计模式之依赖注入定义与用法详解
May 21 PHP
php探针不显示内存解决方法
Sep 17 PHP
laravel excel 上传文件保存到本地服务器功能
Nov 14 PHP
PHP实现基本留言板功能原理与步骤详解
Mar 26 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
分享10段PHP常用代码
2015/11/11 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python中协程用法代码详解
2018/02/10 Python
Python简单I/O操作示例
2019/03/18 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
财务部绩效考核方案
2014/05/04 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年管理工作总结
2014/11/22 职场文书
2014年副班长工作总结
2014/12/10 职场文书
思想政治表现评语
2015/01/04 职场文书
升学宴家长致辞
2015/07/27 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL