本篇教程是使用ajax中最原始的load方法去加载自定义表情，因为我们几乎在打开每个页面时都会载入这些自定义表情，每一个表情就是一个图片，会增加一次页面请求。

而使用load方法可以在访客点击插入表情时才去请求这些图片，所以可以有效减少页面请求，加快页面载入速度！该方法大部分步骤和普通的自定义表情一样，下面是实现步骤：

当然，在此之前你要先下载好表情，放在主题某个文件夹内。

接着是自己新建一个smiley.php文件，放在自己主题内自定义的文件夹，比如 inc文件夹，文件内容如下：

<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="/wp-content/themes/inlojv/images/smilies/icon_question.gif" title="汗" alt="汗" /></a>
<a onclick="javascript:grin(':razz:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_razz.gif" title="色" alt="色" /></a>
<a onclick="javascript:grin(':sad:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_sad.gif" title="悲" alt="悲" /></a>
<a onclick="javascript:grin(':evil:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_evil.gif" title="闭嘴" alt="闭嘴" /></a>
<a onclick="javascript:grin(':!:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_exclAIm.gif" title="调皮" alt="调皮" /></a>
<a onclick="javascript:grin(':smile:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_smile.gif" title="笑" alt="笑" /></a>
<a onclick="javascript:grin(':oops:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_redface.gif" title="惊" alt="惊" /></a>
<a onclick="javascript:grin(':grin:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_biggrin.gif" title="亲" alt="亲" /></a>
<a onclick="javascript:grin(':eek:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_surprised.gif" title="雷" alt="雷" /></a>
<a onclick="javascript:grin(':shock:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_eek.gif" title="馋" alt="馋" /></a>
<a onclick="javascript:grin(':???:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_confused.gif" title="晕" alt="晕" /></a>
<a onclick="javascript:grin(':cool:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_cool.gif" title="酷" alt="酷" /></a>
<a onclick="javascript:grin(':lol:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_lol.gif" title="奸" alt="奸" /></a>
<a onclick="javascript:grin(':mad:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a>
<a onclick="javascript:grin(':twisted:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_twisted.gif" title="狂" alt="狂" /></a>
<a onclick="javascript:grin(':roll:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_rolleyes.gif" title="萌" alt="萌" /></a>
<a onclick="javascript:grin(':wink:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_wink.gif" title="吃" alt="吃" /></a>
<a onclick="javascript:grin(':idea:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_idea.gif" title="贪" alt="贪" /></a>
<a onclick="javascript:grin(':arrow:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_arrow.gif" title="囧" alt="囧" /></a>
<a onclick="javascript:grin(':neutral:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_neutral.gif" title="羞" alt="羞" /></a>
<a onclick="javascript:grin(':cry:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a onclick="javascript:grin(':mrgreen:')"><img src="/wp-content/themes/inlojv/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a>
</div>

上面的表情图片地址用了绝对路径，博主使用的路径并没有用wp的主题目录函数，因为如果这样在下面的load方法中会不起作用。上面图片的路径改成你自己的。

步骤二

在评论表单适当的位置添加一个表情div盒子，这个盒子用来装载要显示的评论表情，也就是装载上面的smiley.php文件，我们装载的方式就是用load方法。比如：博主将这个盒子放在评论工具之后：

<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 id="biaoqing"></div>
</div>

其中最后的;<div id="biaoqing"></div>就是表情盒子。

步骤三

添加js代码，toggle方法和load方法并用，前者控制表情的显示/隐藏，后者控制加载方式。

$('#comt_smilies').click(function() { //表情按钮的ID
    $('#biaoqing').fadeToggle(500).CSS('display','inline-block'); //控制表情盒子的显示/隐藏
    $('#biaoqing').load('/wp-content/themes/inlojv/inc/smiley.php'); //load方法将smiley.php装载到表情盒子内
});

值得注意的是#biaoqing要控制其css属性为display:none，先行隐藏。

通过load方法，把请求数大大降低：（如图 相比之前减少一半）

上一篇：WordPress UserAgent代码版

下一篇：WordPress获取文章评论数