修正WordPress中文章编辑器的款式的办法详解

2022-04-06 收藏 0 点赞 0 图文教程

自定义文章编辑器的款式
每一个 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 就能间接表现在可视化编辑器上。

自定义 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媒体按钮的整合
可自行配置的输入格局
可定制的工具栏按钮
可定制的皮肤

以及其余

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->摘要按钮等等。

Kindeditor for WordPress 装置应用

1.能够在后盾插件装置界面搜寻 Kindeditor 在线装置，或许下载 Kindeditor for WordPress

2.启用插件后，在设置 - Kindeditor设置下，能够设置能否启用前台代码高亮，可选一些款式

体验

我是在 3.5.1 环境下测试的，发现 Kindeditor for WordPress 仿佛是固定了编辑器的宽度，假如你减少阅读器，你会发现，编辑器不会自顺应扭转大小，招致左边局部文字间接被掩盖，心愿插件作者能够处理这个成绩。

下载 Kindeditor for WordPress

以上就是安达网络工作室关于《修改WordPress中文章编辑器的样式的方法详解》的一些看法。更多内容请查看本栏目更多内容！

打赏