修改WordPress中文章编辑器的样式的方法详解_php技巧_脚本之家

很多博客都喜欢用 评论发表于 “XXX 分钟 之前”、文章发表于 “XXX 分钟
之前”来显示文章评论的时间,改善的时间显示方式不仅能很直观的告诉读者这篇文章或评论发表距今已有多长时间,更能增强评论回复的时间感,哥很喜欢,因为前一阵子压在手里的东西太多了,工作日白天又苦于不能上网,所以主题的样式及功能部分一点一点的写拖了好长时间,最近这阵子刚好轮到折腾评论了,所以就逐步参照网上流行的样式一点一点的修改起来自己的评论样式和功能。

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

So…..
Go…..
交道麻袋…..评论日期和文章日期调用函数不同,下面以评论日期为例,文章日期请自行调整。

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

改善的时间显示方式的原理
很简单,就是通过 WordPress
的一个内置的函数处理现在的时间和文章、评论发表的时间差,显示距今有X分钟、X小时、X天。
这个函数就是 human_time_diff ()

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

用法:

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

 <?php human_time_diff( $from, $to ) ;?>

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

说明:
判断两个时间标记的差异。
以人类可阅读的格式,如“1小时”、“5分钟”、“两天”,返回$from和$to
两个时间变量的时间差。

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

从英文上也很好理解:from 到 to 嘛。(这句是很废吧,哈哈。)

add_action( ‘after_setup_theme’, ‘Bing_add_editor_style’ );

雏形版改善实现

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

 //将你的评论时间显示的函数改成如下就可以了
<?php echo human_time_diff( get_comment_time('U') , current_time('timestamp')) ;?>

除此之外,你还可以自定义 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' );

初级版的实现办法 简单的加一个判断,如果评论时间没有超过一天则显示XX小时之前,如果超过一天则显示原始日期。
这样比较人性化吧?总不能让读者总掰着指头算38天之前是什么日子吧?哈哈!
代码:

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

 <?php 
//计算是否超过一天 注:86400是一天的总共的秒数 60秒X60分X24小时=86400秒
//如果觉得一天不够的话,请自行计算填上。
if (current_time('timestamp') - get_comment_time('U') < 86400 )
//一天之内显示的东西
{$cmt_time = human_time_diff( get_comment_time('U') , current_time('timestamp') ) . '-ago';}
//超过一天这么显示
else{$cmt_time = get_comment_date( 'Y/n/j' ).' - '.get_comment_time('','',false);};
 ;?>


 //将你的评论时间显示的函数改成如下就可以了
<?php echo $cmt_time ;?>

引入外部 CSS 文件

增强版 那么我们能不能再增强一下呢?
为什么增强?
好吧,因为我这个人比较较真,觉得中文显示日期不好看,影响到我的排版,喜欢英文显示日期,而中文版的
WordPress 汉化的真的是没有死角(汉化的真仔细),如果我们直接用
human_time_diff 函数输出的话,中文版的 WordPress
会将结果全部汉化显示XX小时XX天之前,这样很有可能会影响我们的排版,而且这个
human_time_diff
函数里既没有留钩子,也没有预留一个不汉化的参数,所以我们想要显示英文的话,只有两个办法:

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

直接修改 human_time_diff
函数,让汉化失效,这样做太暴力,而且以后升级了还要再进去改,伦家不喜欢。
重写一个自己的 human_time_diff 函数,绕过汉化。
function.php 里面强力插入如下代码:

/** *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' );
 //原函数的 day hour min 都是小写的,
//我把这三个词的首写字母改成大写的,即Day Hour Min 就可以避开汉化了,你懂?
if ( ! function_exists( 'xz_time_diff' ) ) :
function xz_time_diff( $from, $to = '' ) {
 if ( empty($to) )
 $to = time();
 $diff = (int) abs($to - $from);
 if ($diff <= 3600) {
 $mins = round($diff / 60);
 if ($mins <= 1) {
  $mins = 1;
 }
 /* translators: min=minute */
 $since = sprintf(_n('%s Min', '%s Mins', $mins), $mins);
 } else if (($diff <= 86400) && ($diff > 3600)) {
 $hours = round($diff / 3600);
 if ($hours <= 1) {
  $hours = 1;
 }
 $since = sprintf(_n('%s Hour', '%s Hours', $hours), $hours);
 } elseif ($diff >= 86400) {
 $days = round($diff / 86400);
 if ($days <= 1) {
  $days = 1;
 }
 $since = sprintf(_n('%s Day', '%s Days', $days), $days);
 }
 return $since;
}endif;

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

时间判断代码改为如下:

CKEditor for WordPress插件CKEditor for WordPress 简介

 <?php 
//只是把计算日期差异的函数名变了而已,其他同上。
if (current_time('timestamp') - get_comment_time('U') < 86400 )
{$cmt_time = xz_time_diff( get_comment_time('U') , current_time('timestamp') ) . '-ago';}
else{$cmt_time = get_comment_date( 'Y/n/j' ).' - '.get_comment_time('','',false);};
 ;?>


 //将你的评论时间显示的函数改成如下就可以了
<?php echo $cmt_time ;?>

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

显示评论、文章相对时间

CKEditor for WordPress 特色功能:

根据上面的版本、下面的这个应该算是增强改进版吧,因为要达到效果还是需要在主题里添加代码,所以还没到终极版,哈哈。
函数代码如下:

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

相对时间函数

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

if ( ! function_exists( 'xz_time' ) ) :
/**
 * 显示文章、评论相对时间的封装函数.
 *作者:XiangZi http://PangBu.com/
 * @param $type 类型字符串 'cmt'或'art',用于定义显示的是评论时间还是文章时间。
 * @param $ago_time 数字类型 用于定义显示相对时间的时间限制 默认为86400秒即一天。
 * @param $after 字符串型 显示在相对时间之后的文字,默认为 ' - ago'
 * @param $late 字符串型 超过时间限制后显示的项目,默认为 get_the_time('Y/n/j - H:i')或get_comment_time('Y/n/j - H:i')
 * @return 返回字符串(相对时间或绝对时间)
*/
function xz_time ( $type = 'art', $ago_time = 86400 ,$after = ' - ago' , $late = '' ) {
  if ( $type === 'cmt' ){
    $diff = (int) abs( get_comment_time('U') - current_time('timestamp'));
      if ( (!$late) || $late ==''){ $late = get_comment_time('Y/n/j - H:i');};
  }
  if ( $type === 'art' ){
    $diff = (int) abs( get_the_time('U') - current_time('timestamp'));
    if ( (!$late) || $late ==''){$late = get_the_time('Y/n/j - H:i');};
  }
  if ( $diff <= 3600 ) {
    $mins = round($diff / 60);
    if ($mins <= 1) {
      $mins = 1;
    }
    /* translators: min=minute */
    $since = sprintf(_n('%s Min', '%s Mins', $mins), $mins);
  } else if (($diff <= 86400) && ($diff > 3600)) {
    $hours = round($diff / 3600);
    if ($hours <= 1) {
      $hours = 1;
    }
    $since = sprintf(_n('%s Hour', '%s Hours', $hours), $hours);
  } elseif ($diff >= 86400) {
    $days = round($diff / 86400);
    if ($days <= 1) {
      $days = 1;
    }
    $since = sprintf(_n('%s Day', '%s Days', $days), $days);
  };
  $since .= $after ; 
  return $diff < $ago_time ? $since : $late ;
}endif;

安装 CKFinder 文件上传控件

使用方法 将上述代码插入到你主题的function.php文件中
然后在你想显示相对时间的地方调用该函数即可。
函数最少输入设定一个参数 即$type 类型字符串 
‘cmt’(评论时间)或’art’(文章时间)
示例:

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

 //最简单的调用
echo xz_time('cmt');
//一天内的输出结果: 3 Hours-ago 
//一天后的输出结果: 2015/12/26 - 20:01
 
 
//调用时长为2天内的相对时间,之前时间显示默认时间
echo xz_time('cmt',172800);
//2天内的输出结果: 3 Hours-ago 
//2天后的输出结果: 2015/12/26 - 20:01
 
 
//调用时长为2天内的相对时间,相对时间之后显示 '之前的评论'
echo xz_time('cmt',172800,'之前的评论');
//2天内的输出结果: 3 Hours 之前的评论 
//2天后的输出结果: 2015/12/26 - 20:01
 
//调用时长为2天内的相对时间,之前时间显示为 年-月-日
echo xz_time('cmt',172800,'之前的评论',get_comment_time('Y-n-j'));
//2天内的输出结果: 3 Hours 之前的评论 
//2天后的输出结果: 2015/12/26

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

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

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

CKEditor 和 CKFinder 下载

CKEditor for WordPress
下载:

CKFinder 下载:

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

Kindeditor for WordPress 安装使用

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

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

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

下载 Kindeditor for WordPress

发表评论

电子邮件地址不会被公开。 必填项已用*标注