今天为评论区添加了自定义表情,方法如下:

步骤一

当然是先下载好表情包,百度一下会有很多。
wordpress表情
一般内含22个表情,对应wp默认表情数量。可以将它们放在你主题目录的images/smilies文件夹里面,记住这个路径,下面调用时会用到。

步骤二

将下面的代码保存为simley.php文件,放在主题目录中,记住路径,下面的步骤调用也会用到。这些代码作用是:1、替换wp默认表情;2、点击表情图标时让他们的简码显示在评论textarea表单里面。(注意里面的注释和表情图片的路径)

<script type="text/javascript" language="javascript">
/* <![CDATA[ */
    function grin(tag) {
        var myField;
        tag = ' ' + tag + ' ';
        if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { // textarea的id要为comment
            myField = document.getElementById('comment');
        } else {
            return false;
        }
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = tag;
            myField.focus();
        }
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var cursorPos = endPos;
            myField.value = myField.value.substring(0, startPos)
                          + tag
                          + myField.value.substring(endPos, myField.value.length);
            cursorPos += tag.length;
            myField.focus();
            myField.selectionStart = cursorPos;
            myField.selectionEnd = cursorPos;
        }
        else {
            myField.value += tag;
            myField.focus();
        }
    }
/* ]]> */
</script>
<div id="smilelink"><!-- 下面全部替换为你的表情图片路径 -->
<a onclick="javascript:grin(':?:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_question.gif" title="汗" alt="汗" /></a>
<a onclick="javascript:grin(':razz:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_razz.gif" title="色" alt="色" /></a>
<a onclick="javascript:grin(':sad:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_sad.gif" title="悲" alt="悲" /></a>
<a onclick="javascript:grin(':evil:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_evil.gif" title="闭嘴" alt="闭嘴" /></a>
<a onclick="javascript:grin(':!:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_exclaim.gif" title="调皮" alt="调皮" /></a>
<a onclick="javascript:grin(':smile:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_smile.gif" title="笑" alt="笑" /></a>
<a onclick="javascript:grin(':oops:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_redface.gif" title="惊" alt="惊" /></a>
<a onclick="javascript:grin(':grin:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_biggrin.gif" title="亲" alt="亲" /></a>
<a onclick="javascript:grin(':eek:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_surprised.gif" title="雷" alt="雷" /></a>
<a onclick="javascript:grin(':shock:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_eek.gif" title="馋" alt="馋" /></a>
<a onclick="javascript:grin(':???:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_confused.gif" title="晕" alt="晕" /></a>
<a onclick="javascript:grin(':cool:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_cool.gif" title="酷" alt="酷" /></a>
<a onclick="javascript:grin(':lol:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_lol.gif" title="奸" alt="奸" /></a>
<a onclick="javascript:grin(':mad:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a>
<a onclick="javascript:grin(':twisted:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_twisted.gif" title="狂" alt="狂" /></a>
<a onclick="javascript:grin(':roll:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_rolleyes.gif" title="萌" alt="萌" /></a>
<a onclick="javascript:grin(':wink:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_wink.gif" title="吃" alt="吃" /></a>
<a onclick="javascript:grin(':idea:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_idea.gif" title="贪" alt="贪" /></a>
<a onclick="javascript:grin(':arrow:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_arrow.gif" title="囧" alt="囧" /></a>
<a onclick="javascript:grin(':neutral:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_neutral.gif" title="羞" alt="羞" /></a>
<a onclick="javascript:grin(':cry:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a onclick="javascript:grin(':mrgreen:')"><img src="<?php bloginfo('template_directory'); ?>/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a>
</div>

步骤三

表情图片有了、替换代码也有了,现在就可以插入这些表情。找到主题的评论模板comments.php,在textarea标签上面或里面(也就是你要插入表情的合适位置)加入以下调用代码:(注意你放置smiley.php文件的位置要对应下面的路径)

<?php include(TEMPLATEPATH . '/smiley.php'); ?>

其中 TEMPLATEPATH 就是主题根目录。

步骤四

让评论中显示出来的表情为你的自定义表情,将下面的代码加入functions.php中:

// 评论显示自定义表情
add_filter ( 'smilies_src', 'inlojv_custom_smilies', 10, 2 );
function inlojv_custom_smilies($img_src, $img) {
    return get_stylesheet_directory_uri () . '/images/smilies/' . $img;
}

步骤五

到此基本就可以结束了,剩下就是加入必要的样式,表情的id是smilelink,可以加入以下样式:

#smilelink{cursor:pointer;position: relative;top: 5px;left:5px;display:none}
#smilelink a img:hover{position: relative;top: -2px;}

重点是cursor:pointer和display:none,后者是为了方便js控制点击显示/隐藏用的。如果需要这个功能可以添加步骤六,如果不需要就去掉display:none即可。

步骤六

这一步需要用到jQuery里面的fadeToggle()方法,首页要在comments.php里面加入一个a标签方便绑定点击事件,这里我顺便将插入图片地址插入链接地址等插入xhtml代码的方式也加了进去。找个地方加入以下代码:

<div id="comt_tools">                    
    <a href="javascript:;" class="smilies tbox" id="comt_smilies">表情</a><a href="javascript:;" class="img tbox" id="comt_img">插入图片</a><a href="javascript:;" class="url tbox" id="comt_url">插入链接</a>
</div>

之后在js的全局变量点击事件中加入以下代码:

'#comt_img': function() { // 点击填入图片地址
            var content = $('#comment').val(); // textarea区的id
            content += '<img src="图片地址" title="" />';
            $('#comment').val(content); // textarea区的id
},
 '#comt_url': function() { // 点击填入链接地址
            var content = $('#comment').val(); // textarea区的id
            content += '<a href="链接地址" target="_blank" rel="nofollow">链接名称</a>';
            $('#comment').val(content); // textarea区的id
},
'#comt_smilies': function() { // 点击显示/隐藏表情
            $('#smilelink').fadeToggle(900).css('display','inline');
},

 

需要jQuery库的支持,自行引用。最后,当然也要对这些div进行适当的样式化,在此就不罗嗦了。最终效果见本站评论表情按钮。