修改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设计模式 Bridge (桥接模式)
Jun 26 PHP
PHP插入排序实现代码
Apr 04 PHP
解析strtr函数的效率问题
Jun 26 PHP
Laravel 4 初级教程之视图、命名空间、路由
Oct 30 PHP
Centos6.5和Centos7 php环境搭建方法
May 27 PHP
php+jQuery+Ajax简单实现页面异步刷新
Aug 08 PHP
php排序算法实例分析
Oct 17 PHP
php数据库的增删改查 php与javascript之间的交互
Aug 31 PHP
浅谈PHP中pack、unpack的详细用法
Mar 12 PHP
基于php数组中的索引数组和关联数组详解
Mar 12 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
Jun 16 PHP
PHP7 windows支持
Mar 09 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实现的任意进制互转类分享
2015/07/07 PHP
php实现数据库的增删改查
2017/02/26 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js继承的实现代码
2010/08/05 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JavaScript中的Function函数
2015/08/27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
Bootstrap3 模态框使用实例
2017/02/22 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python提取字典key列表的方法
2015/07/11 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 安装移动复制第三方库操作
2020/07/13 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
简述数据库的设计过程
2015/06/22 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
获奖感言范文
2015/07/31 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript