您的浏览器不支持CSS3,建议使用Firfox、Chrome等浏览器,以取得最佳显示效果

WordPress主题自定义表情及表情名称

Web相关 305℃ 0 2年前 (2015-09-13)

WordPress评论系统中自带了一些表情,在评论中插入一些表情可以使评论更加生动有趣。但是自带的表情很多人并不喜欢,可以自己定义表情。

网上很多关于WordPress自定义表情的文章,但是说的都不是很全面:

  • 一种方法是直接将表情的gif动画文件覆盖到WordPress表情所在的目录wp-include/images/smilies,这种方法最简单粗暴,代码都不用改,缺点是WordPress升级了表情又会被替换回来。
  • 另一种方法是把表情放在主题的某个目录中,然后自己定义一下表情的目录,达到同样的效果。但是这样还是有缺点,就是表情的名字要和默认的表情一一对应,因此也不能新增或减少表情。而且很多表情图片和默认表情的名字根本对应不上。

所以这里给出最佳解决方案,不仅能自定义表情,还能自定义表情名称,可以自定义任意多个表情。不过需要一定的动手编程能力,对php和jQuery有基本了解最好。

表情文件

首先从网上找一套喜欢的WordPress表情,比如QQ风格的,还有新浪微博风格的,将表情图片放在主题文件夹下的/img/smilies/文件夹下。

修改functions.php

修改主题中的functions.php文件,添加下面的几段代码。

首先是自定义表情转换规则,并添加到初始化的action中。这里$wpsmiliestrans中的每一项分别是表情的名字和表情的文件名,有多少个就写多少个。

  1. // 自定义表情转换规则
  2. function smiley_trans() {
  3. global $wpsmiliestrans;
  4.     if ( !get_option( 'use_smilies' ) )
  5.         return;
  6.     $wpsmiliestrans = array(
  7. ':applause:' => 'applause.gif',
  8. ':arrow:' => 'arrow.gif',
  9. ':confused:' => 'confused.gif',
  10. ':cool:' => 'cool.gif',
  11. ':cry:' => 'cry.gif',
  12. ':curl-lip:' => 'curl-lip.gif',
  13. ':curse:' => 'curse.gif',
  14. ':evil:' => 'evil.gif',
  15. ':kiss:' => 'kiss.gif',
  16. ':mad:' => 'mad.gif',
  17. ':neutral:' => 'neutral.gif',
  18. ':pick-nose:' => 'pick-nose.gif',
  19. ':pride:' => 'pride.gif',
  20. ':question:' => 'question.gif',
  21. ':redface:' => 'redface.gif',
  22. ':rolleyes:' => 'rolleyes.gif',
  23. ':sad:' => 'sad.gif',
  24. ':smile:' => 'smile.gif',
  25. ':snicker:' => 'snicker.gif',
  26. ':surprised:' => 'surprised.gif',
  27. ':terrified:' => 'terrified.gif',
  28. ':wink:' => 'wink.gif',
  29. );
  30. }
  31. add_action('init','smiley_trans', 3); // 优先级应小于5

然后定义表情的路径。方法get_template_directory_uri()返回主题所在目录的URL。

  1. // 评论表情路径
  2. function custom_smiley_src($img_src, $img, $siteurl = null){
  3.     return get_template_directory_uri().'/img/smilies/'.$img;
  4. }
  5. add_filter('smilies_src','custom_smiley_src', 1, 10);

这个方法在主题中需要输出表情的地方进行调用,从而输出表情的HTML页面。每个表情是一个img元素,表情的名称放在元素的data-smiley属性中。

  1. // 输出表情
  2. function output_smiley() {
  3. $smilies_dir = get_template_directory_uri().'/img/smilies/';
  4.     global $wpsmiliestrans;
  5. foreach ($wpsmiliestrans as $key => $value) {
  6.         printf( '<img data-smiley="%s" src="%s%s"/>', $key, $smilies_dir, $value );
  7. }
  8. }

添加jQuery代码

每个表情被点击时,会在评论框中自动插入一段代码,这段代码在评论被展示时会自动转换成对应表情的图片。这里点击表情插入代码的功能由jQuery实现。

首先定义下面的jQuery方法insertText

  1. /**
  2. * 指定元素点击时,取出其data-*属性并添加到textarea对象的文本域
  3. * dataName:属性名称,例如smiley表示data-smiley属性
  4. * textareaId:文本域的id
  5. * before:前缀,默认一个空格
  6. * after:后缀,默认一个空格
  7. */
  8. $.fn.insertText = function(dataName,textareaId,before,after) {
  9.     if( !dataName || !textareaId ) {
  10.         return false;
  11.     }
  12.     before = before ? before : ' ';
  13.     after = after ? after : ' ';
  14.     var element = document.getElementById(textareaId);
  15.     var addText = function(textarea,text) {
  16.         if (document.selection) {
  17.             textarea.focus();
  18.             sel = document.selection.createRange();
  19.             sel.text = text;
  20.             textarea.focus();
  21.         } else if (textarea.selectionStart || textarea.selectionStart == '0') {
  22.             var startPos = textarea.selectionStart;
  23.             var endPos = textarea.selectionEnd;
  24.             var cursorPos = endPos;
  25.             textarea.value = textarea.value.substring(0, startPos) + text + textarea.value.substring(endPos, textarea.value.length);
  26.             cursorPos += text.length;
  27.             textarea.focus();
  28.             textarea.selectionStart = cursorPos;
  29.             textarea.selectionEnd = cursorPos;
  30.         } else {
  31.             textarea.value += text;
  32.             textarea.focus();
  33.         }
  34.     }
  35.     return $(this).bind('click', function(){
  36.         $(this).each(function(){
  37.             addText(element, before + $(this).data(dataName) + after);
  38. })
  39. });
  40. }

然后在文档加载完成的时候,对每个表情调用insertText方法。$(function(){})表示文档加载完成时调用function函数。

  1. $(function() {
  2.     // 表情
  3.     $('#comment-smiley>img').insertText('smiley', 'comment-textarea', ' ', ' ');
  4. }

大功告成

大功告成,最后的参考效果如图所示。

来自为知笔记(Wiz)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

0

暂无评论

评论前:需填写以下信息,或 登录

用户登录

忘记密码?