七月
28

【多彩的评论】:让评论可以插入图片,更改文字大小、颜色

在上一篇《 为评论框添加文字格式化编辑器 》中我加入了可以方便插入图片的功能,但是很不幸,我后来才发现原来只有登录用户才能插入图片,否则图片就会被过滤掉。

所以,怎样才能让所有用户都能插入图片呢?

其实有两种方法:

一,更改wp-includes目录中的kses.php文件

这个方法来自《wordpress评论中无法插入图片的解决办法》。详细请参考原文。

wordpress评论中可以使用的XHTML标签是可以控制的,wordpress的该部分程序使用的是开源代码kses。

在wordpress的wp-includes目录中有个kses.php的文件。

一般在文件的第22行 或者搜索$allowedtags 找到:
allowedtags = array (
//’a’=> array (‘href’=> array (), ‘title’ => array ()),
//’abbr’ => array (‘title’ => array ()),
//’acronym’ => array (‘title’=> array ()),
‘b’ => array (),
代码说明:
1、上面代码中的//表示该行为注释。
2、建议一个XHTML标签一行,提高代码可看性。
3、注意括号的对应关系。
4、注意逗号的使用。
用法举例:
我需要在评论中支持XHTML标签:
那么,我就在该段代码中加入下面一行:
‘a’=> array (‘href’ => array (),’title’=> array ()),
要在评论中支持插入图片,就加入下面代码:
‘img’=> array (
‘alt’ => array (),
‘align’ => array (),
‘border’ => array (),
‘class’ => array (),
‘height’=> array (),
‘hspace’=> array (),
‘longdesc’=> array (),
‘vspace’ => array (),
‘src’ => array (),
‘width’ => array ()),

上面例子中是去除了img标签的过滤,想让wordpress评论也能显示文字颜色、大小,则可去除对span标签的过滤即可。


二,通过add_filter函数标准格式化评论中自定义标签

这个来自小邪的提醒。

@QiQiBoY
额,要不你就用[img]标签吧 ~
写一个函数在输出显示的时候替换为《img标签 ~

首先我还要啰嗦两句,这个方法会绑架你的评论,因为需要使用[img]、[color]等类似标签,所以一旦你不使用这个方法了,这些你自定义的标签就会暴漏在你的评论里,造成干扰。

方法是在你的function.php里加入以下代码:

function add_comment_tags($content) {
 
    //替换图片
 
    $content = preg_replace('/\[img src=(.*?) alt=(.*?) \/]/e', '"<img src=\"$1\" alt=\"$2\"/>"', $content);
 
    //替换成颜色标记
 
    $content = preg_replace('/\[color=(.*?)\](.*?)(\[\/color)?\]/e', '"<span style=\"color:$1;\">$2</span>"', $content);
 
    //替换成文字大小标记
 
    $content = preg_replace('/\[size=(.*?)\](.*?)(\[\/size)?\]/e', '"<span style=\"font-size:$1;\">$2</span>"', $content);
 
    return $content;
 
}
 
add_filter('comment_text', 'add_comment_tags');
 

在评论里需要用以下标签调用

[color=#000000]加了颜色的文字[/color]
 
[size=12px]改了大小的文字[/size]
 
[img src=http://myimg.jpg alt=描述 /]

 

注意“=”后面没有引号。只要在评论中输入上面的标签样式即可。

其实你也发现了,这种方法也很繁琐,标签难记,最好的办法就是用我 《 为评论框添加文字格式化编辑器 》 一文中讲的通过js编辑器自动添加。

后话:上面的 方法加了以后,评论里会出现自定义的[img][color]等标签,所以如果你在其他地方调用了评论内容,则标签会出现在这些地方,很不美观,所以需要去除。方法是在function.php中再添加一个函数

function filter_comment_tags($content) {
    $content = preg_replace('/\[img src=(.*?) alt=(.*?) \/]/e', '""', $content);
    $content = preg_replace('/\[color=(.*?)\](.*?)(\[\/color)?\]/e', '""', $content);
    $content = preg_replace('/\[size=(.*?)\](.*?)(\[\/size)?\]/e', '""', $content);
    return $content;
}

然后再调用评论的地方用这个函数对数据进行一次过滤,去除[img][color]这些标签。比如,使用带表情的最新评论时,我们会用strip_tags()函数去过滤html标签,你就可以在这个函数里套入filter_comment_tags()函数来先过滤掉[img][color]这些标签。

具体效果可以参见我博客评论部分。

22

本文标签: , , , ,

分享

本文短网址: http://qiqi.boy.im/5q

这篇文章已经有 67 条评论

Comments (62) Trackbacks (5)
You can leave a response or Trackback this entry .
  1. aisinvon -#21

    这些功能还真不错,不过应该也给主机增加了鸭梨……

    • QiQiBoY --#1

      @aisinvon
      当然,你给博客增加任何一点功能都会加大主机或者访问者浏览器的压力。。

  2. MOPVHS -#22

    :eek: 鸭梨…突然在订阅里看到….我上截图了…
    鸭梨图....

  3. QiQiBoY -#23

    test

  4. 小闇 -#24

    去除自定義標籤那兒的函數只用口頭說一遍我不太懂,具體代碼會是怎樣的?

    • QiQiBoY --#1

      @小闇
      就是用过滤函数再将内容处理一遍即可。。。比如如果你是在边栏输出评论,就可以filter_comment_tags($comment->comment_content)来过滤调掉自定义标签,就像你用strip_tags过滤html标签那样使用就行了

    • 小闇 --#2

      @QiQiBoY
      其實我的意思是這樣的:雖然知道了filter_comment_tags($comment->comment_content)是放在functions.php,可是我不知道是添加在
      function filter_comment_tags($content) {
      $content = preg_replace('/\[img src=(.*?) alt=(.*?) \/]/e', '""', $content);
      $content = preg_replace('/\(.*?)(\[\/color)?\/e', '""', $content);
      $content = preg_replace('/\(.*?)(\[\/size)?\/e', '""', $content);
      return $content;
      }
      中哪處還是在其他部分這樣…… :roll:
      抱歉這方面我是個小白…… :cry:

  5. QiQiBoY -#25

    @小闇
    filter_comment_tags这个函数放到function.php中就不要管了,到你的最新评论代码处,找到strip_tags($comment->comment_content),修改为filter_comment_tags(strip_tags($comment->comment_content))

  6. bigworld -#26

    试试

  7. bigworld -#27

    不能回复..

  8. bigworld -#28

    博主用的什么插件使comment ajax化的呢 我的用的是wp-comment-master 回复评论后评论框就不见了。。。

  9. doom -#29

    能把你评论框的分享下吗?超喜欢。

  10. 歪歪 -#30

    你的博客很好,今天非常努力的学习了里面的内容,非常有才,支持你。
    但是看起来我跟你的水平还差的太远了,因为很多东西我看不懂…..

  11. 44 -#31

    折

  12. alige -#32

    测试用的图片图片都是外链么?我喜欢让别人把图片上传到我空间里。

  13. 鸭蛋 -#33

    cs

  14. 花皙蔻 -#34

    也去折腾一下去

  15. crazy -#35

    不好意思,我测试看看编辑器功能,麻烦删了这留言,谢谢…..

    Copyright

    test
    publish; ?>
    然后再调用评论的地方用这个函数对数据进行一次过滤

  1. 又是一些蛋痛的通知……

    [...] 新主題上線後自己和諸位看倌都發現有些瑕疵,最嚴重的是使用評論工具時,除了登入者之外一律都不能正確顯示文字色彩、大小之類的變更,實在是又急又燥。昨晚忽然想起了QiQiBOY的一篇【多彩的評論】:讓評論可以插入圖片,更改文字大小、顏色,這下才恍然大悟呀。立刻依照教學方法為functions.php添加轉換標籤用的函數,現在看應該是沒問題了。各位可測試測試,有問題請在下面敲碗揚聲。 順道在修改期間,我又手癢癢的折騰了一些很無謂但看上去變美觀的功能: [...]

  2. Hello WordPress!

    [...] 2010.07 我又开始折腾了,我折腾了很多,首先是wordpress无限嵌套的完美解决WordPress嵌套回复的层深问题(无限嵌套)<一>,还有如何通过JS自动处理文中的图片宽高,这个方法我一直在用哦:我是如何处理文章中图片的。想知道我评论框的那么多功能从哪里来的么,你看完这些你也能拥有和我评论框一样强大的功能了:评论框的简单计数器(无需改动模板,附带输入字数限制功能),添加引用按钮——轻松打造属于你的WordPress引用回复功能、为评论框添加文字格式化编辑器、【多彩的评论】:让评论可以插入图片,更改文字大小、颜色、让你的评论框自由粘贴代码、修正关于Ajax comments的一个小问题。还有关于如何创建邮件表单页面的创建一个可设置cookie相关信息的内置Email联系表单;如果你也想要知道wordpress不同页面显示不同的评论数以及楼层的显示,那么这篇文章也许会给你帮助wordpress指定页面评论数+支持分页的楼层显示 [...]

  3. 增强 WordPress 评论功能,提高访客体验

    [...] 不过 WordPress 默认是注册用户才能在评论中插入图片,这个就不好玩了。 于是根据这篇:让评论可以插入图片,更改文字大小、颜色,再折腾了下,非登录用户也可以插入图片了。 [...]

  4. Training Software

    Awesomeness…

    We must be gloating for this….

  5. WordPress在评论框添加简单编辑器和去除图片使用限制(PhilNa2)

    [...] Ps:来源于的【多彩的评论】:让评论可以插入图片,更改文字大小、颜色参考: wordpress评论中可以使用的XHTML标签是可以控制的,wordpress的该部分程序使用的是开源代码kses。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: