欢迎光临
我们一直在努力
扫描二维码在手机上浏览

为WordPress评论框添加表情、图片、签到等功能

本教程以DUX主题为例进行说明,其它主题请自行修改代码,代码部分来自网络,具体是谁最先写出来的,已经不知道了,详细效果请看下图:

注意:对主题进行修改操作之前请自行备份需要修改的文件,以防误操作引起的网站崩溃!!!

具体步骤:

  1. 新建PHP文件

    新建一个 PHP 文件,将下面代码丢进去,文件名可自取,这里以 smiley.php 命名。创建完成后将 smiley.php 文件丢到主题根目录下以用于以后调取,其实你也可以将它放在网站的任何一个目录下,只需要保证后面引用代码调取时路径正确即可。

    <script type="text/javascript" language="javascript">
    /* <![CDATA[ */
        function grin(tag) {
          var myField;
          tag = ' ' + tag + ' ';
            if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
            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="smiley" style="display: none;">
    <a href="javascript:grin(':?:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_question.gif" alt=""></a>
    <a href="javascript:grin(':razz:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_razz.gif" alt=""></a>
    <a href="javascript:grin(':sad:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_sad.gif" alt=""></a>
    <a href="javascript:grin(':evil:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_evil.gif" alt=""></a>
    <a href="javascript:grin(':!:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_exclaim.gif" alt=""></a>
    <a href="javascript:grin(':smile:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_smile.gif" alt=""></a>
    <a href="javascript:grin(':oops:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_redface.gif" alt=""></a>
    <a href="javascript:grin(':grin:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_biggrin.gif" alt=""></a>
    <a href="javascript:grin(':eek:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_surprised.gif" alt=""></a>
    <a href="javascript:grin(':shock:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_eek.gif" alt=""></a>
    <a href="javascript:grin(':???:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_confused.gif" alt=""></a>
    <a href="javascript:grin(':cool:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_cool.gif" alt=""></a>
    <a href="javascript:grin(':lol:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_lol.gif" alt=""></a>
    <a href="javascript:grin(':mad:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_mad.gif" alt=""></a>
    <a href="javascript:grin(':twisted:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_twisted.gif" alt=""></a>
    <a href="javascript:grin(':roll:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_rolleyes.gif" alt=""></a>
    <a href="javascript:grin(':wink:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_wink.gif" alt=""></a>
    <a href="javascript:grin(':idea:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_idea.gif" alt=""></a>
    <a href="javascript:grin(':arrow:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_arrow.gif" alt=""></a>
    <a href="javascript:grin(':neutral:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_neutral.gif" alt=""></a>
    <a href="javascript:grin(':cry:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_cry.gif" alt=""></a>
    <a href="javascript:grin(':mrgreen:')"><img src="<?php bloginfo('template_url'); ?>/img/smilies/icon_mrgreen.gif" alt=""></a>
    </div>
    <div id="fontcolor" style="display: none;">
    <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>
    <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>
    <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>
    <a href="javascript:SIMPALED.Editor.magenta()" style="background-color: magenta"></a>
    <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>
    <a href="javascript:SIMPALED.Editor.chocolate()" style="background-color: chocolate"></a>
    <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>
    <a href="javascript:SIMPALED.Editor.aquamarine()" style="background-color: aquamarine"></a>
    <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>
    <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>
    <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>
    <a href="javascript:SIMPALED.Editor.thistle()" style="background-color: thistle"></a>
    <a href="javascript:SIMPALED.Editor.brown()" style="background-color: brown"></a>
    <a href="javascript:SIMPALED.Editor.peru()" style="background-color: peru"></a>
    <a href="javascript:SIMPALED.Editor.deeppink()" style="background-color: deeppink"></a>
    <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>
    <a href="javascript:SIMPALED.Editor.slategray()" style="background-color: slategray"></a>
    <a href="javascript:SIMPALED.Editor.tomato()" style="background-color: tomato"></a>
    </div>
  2. 新建JS文件

    新建一个 JS 文件,将下面代码丢进去,文件名可自取,这里以 comments.js 命名。创建完成后将 comments.js 文件丢到主题根目录下以用于以后调取,其实你也可以将它放在网站的任何一个目录下,只需要保证后面引用代码调取时路径正确即可。DUX主题完全可以将代码添加到 comment.js 文件中。

    // 表情符号切换
    $(function() {
        $("a.et_smilies").click(function() {
            $('#smilies-container').toggle(function() {
                $(document).click(function(event) {
                    if (!($(event.target).is('#smilies-container') || $(event.target).parents('#smilies-container').length || $(event.target).is('a.et_smilies'))) {
                        $('#smilies-container').hide(200);
                    }
                });
            });
        });
    });
    
    //表情颜色弹窗
    $(document).ready(function () {
    	$("#comment-smiley").click(function(){
    		$("#smiley").toggle(500);
    	});
    	$("#font-color").click(function(){
    		$("#fontcolor").toggle(500);
    	});
    });
     /* 评论编辑器
     -----------------------------------------------*/
    $(function() { // 评论编辑器
        function addEditor(a, b, c) {
            if (document.selection) {
                a.focus();
                sel = document.selection.createRange();
                c ? sel.text = b + sel.text + c: sel.text = b;
                a.focus()
            } else if (a.selectionStart || a.selectionStart == '0') {
                var d = a.selectionStart;
                var e = a.selectionEnd;
                var f = e;
                c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
                c ? f += b.length + c.length: f += b.length - e + d;
                if (d == e && c) f -= c.length;
                a.focus();
                a.selectionStart = f;
                a.selectionEnd = f
            } else {
                a.value += b + c;
                a.focus()
            }
        }
        /**		 * 时间对象;		 */		
        Date.prototype.format = function(format) {
        /** eg:format="yyyy-MM-dd hh:mm:ss";*/
    		var o = {
    		    "M+": this.getMonth() + 1, // month
    			"d+": this.getDate(), // day
    			"h+": this.getHours(), // hour
    			"m+": this.getMinutes(), // minute
    			"s+": this.getSeconds(), // second
    			"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
    			"S": this.getMilliseconds() // millisecond
    		}
    		if (/(y+)/.test(format)) {
    			format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    		}
    		for (var k in o) {
    			if (new RegExp("(" + k + ")").test(format)) {
    			  	format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    			}
    		}
    		return format;
        }
    
        var myDate = new Date().format("yyyy-MM-dd hh:mm:ss");
        var mytime = myDate.toLocaleString()
        var g = document.getElementById('comment') || 0;
        var h = {
        	daka: function() {
                addEditor(g, '<time>签到成功!签到时间:' + mytime, ',每日签到,生活更精彩哦~</time>');
                submit.click();
            },
            strong: function() {
                addEditor(g, '<strong>', '</strong>')
            },
            em: function() {
                addEditor(g, '<em>', '</em>')
            },
            del: function() {
                addEditor(g, '<del>', '</del>')
            },
            underline: function() {
                addEditor(g, '<u>', '</u>')
            },
            quote: function() {
                addEditor(g, '<blockquote>', '</blockquote>')
            },
            ahref: function() {
                var a = prompt('请输入链接地址', 'http://');
                var b = prompt('请输入要显示成文字链接的描述', '');
                if (a) {
                    addEditor(g, '<a target="_blank" href=”' + a + '" rel="external nofollow”>' + b + '</a>', '')
                }
            },
            img: function() {
                var a = prompt('请输入图片地址', 'http://');
                if (a) {
                    addEditor(g, '<img src="' + a + '" rel="external nofollow" alt="灵阳星空评论贴图https://www.jsksky.com" width="auto" height="auto" />', '')
                }
            },
            code: function() {
                addEditor(g, '<pre class="prettyprint linenums">', '</pre>')
            },
            empty: function() {
                g.value = "";
                g.focus()
            },
            red: function() {   
                addEditor(g, '<font color="red">', '</font>')   ;
            },   
            green: function() {   
                addEditor(g, '<font color="green">', '</font>')   ;
            },   
            blue: function() {   
               addEditor(g, '<font color="blue">', '</font>')   ;
            },   
            magenta: function() {   
                addEditor(g, '<font color="magenta">', '</font>')   ;
            },   
            yellow: function() {   
               addEditor(g, '<font color="yellow">', '</font>')   ;
            },   
            chocolate: function() {   
               addEditor(g, '<font color="chocolate">', '</font>')   ;
            },   
            black: function() {   
               addEditor(g, '<font color="black">', '</font>')   ;
            },   
            aquamarine: function() {   
               addEditor(g, '<font color="aquamarine">', '</font>')   ;
            },   
            lime: function() {   
               addEditor(g, '<font color="lime">', '</font>')   ;
            },   
            fuchsia: function() {   
              addEditor(g, '<font color="fuchsia">', '</font>')   ;
            },   
            orange: function() {   
               addEditor(g, '<font color="orange">', '</font>')   ;
            },   
            thistle: function() {   
                addEditor(g, '<font color="thistle">', '</font>')   ;
            },   
            brown: function() {   
                addEditor(g, '<font color="brown">', '</font>')   ;
            },   
            peru: function() {   
                addEditor(g, '<font color="peru">', '</font>')   ;
            },   
            deeppink: function() {   
                addEditor(g, '<font color="deeppink">', '</font>')   ;
            },   
            purple: function() {   
                addEditor(g, '<font color="purple">', '</font>')   ;
            },   
            slategray: function() {   
                addEditor(g, '<font color="slategray">', '</font>')   ;
            },   
            tomato: function() {   
                addEditor(g, '<font color="tomato">', '</font>')   ;
            }   
        };
        window['SIMPALED'] = {};
        window['SIMPALED']['Editor'] = h
    });

    如果是新建的 comments.js 文件,还需要在 footer.php 文件里调用该JS,代码放在上面一行就行:

    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script>
  3. 评论调用代码

    找到自己主题当中的 comments.php 在里面适当的位置添加下面代码:

    <div class="position">
    <a href="javascript:;" id="comment-smiley" title="表情"><i class="fa fa-smile-o"></i></a>
    <a href="javascript:" id="font-color" title="颜色"><i class="fa fa-font"></i></a>
    <a href="javascript:SIMPALED.Editor.quote()" title="引用"><i class="fa fa-quote-left"></i></a>
    <a href="javascript:SIMPALED.Editor.code()" title="插代码"><i class="fa fa-file-code-o"></i></a>
    <a href="javascript:SIMPALED.Editor.img()" title="插图片"><i class="fa fa-image"></i></a>
    <a href="javascript:SIMPALED.Editor.daka()" title="签到"><i class="fa fa-edit"></i> 签到</a>
    <label class="demo--label pvt"><input class="demo--radio" name="is-private" type="checkbox"><span class="demo--radioInput demo--checkbox"></span>私密评论</label>
    <!-- <a href="javascript:SIMPALED.Editor.strong()" title="粗体"><b><i class="fa fa-bold"></i></b></a>
    <a href="javascript:SIMPALED.Editor.em()" title="斜体"><b><i class="fa fa-italic"></i></b></a>
    <a href="javascript:SIMPALED.Editor.ahref()" title="插链接"><b><i class="fa fa-link"></i></b></a>
    <a href="javascript:SIMPALED.Editor.del()" title="删除线"><b><i class="fa fa-strikethrough"></i></b></a>
    <a href="javascript:SIMPALED.Editor.underline()" title="下划线"><b><i class="fa fa-underline"></i></b></a> -->
    </div>
     
    <?php include(TEMPLATEPATH . '/smiley.php');?>

    注意:DUX请将<?php include(TEMPLATEPATH . ‘/smiley.php’);?>添加在<div class=”comt-box”>的外围。

  4. CSS样式

    以下样式以DUX主题为例,把下面的CSS样式放倒自己主题当中的 main.css

      此处内容已隐藏,请  发表评论后查看。
  5. 禁用 Emoji 表情及恢复图片表情

    在主题的 functions.php 添加代码的代码即可:

    /**
    * Disable the emoji's
     */
    function disable_emojis() {
        remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
        remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
        remove_action( 'wp_print_styles', 'print_emoji_styles' );
        remove_action( 'admin_print_styles', 'print_emoji_styles' );    
        remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
        remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );  
        remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
        add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
    }
    add_action( 'init', 'disable_emojis' );
    /**
     * Filter function used to remove the tinymce emoji plugin.
     * 
     * @param    array  $plugins  
     * @return   array             Difference betwen the two arrays
     */
    function disable_emojis_tinymce( $plugins ) {
        return array_diff( $plugins, array( 'wpemoji' ) );
    }
    /**
     * WordPress 4.2 修复图片表情
     * 
     */
    function smilies_reset() {
        global $wpsmiliestrans, $wp_smiliessearch;
        // don't bother setting up smilies if they are disabled
        if ( !get_option( 'use_smilies' ) )
            return;
        $wpsmiliestrans = array(
            ':?:' => 'icon_question.gif',
            ':razz:' => 'icon_razz.gif',
            ':sad:' => 'icon_sad.gif',
            ':evil:' => 'icon_evil.gif',
            ':!:' => 'icon_exclaim.gif',
            ':smile:' => 'icon_smile.gif',
            ':oops:' => 'icon_redface.gif',
            ':grin:' => 'icon_biggrin.gif',
            ':eek:' => 'icon_surprised.gif',
            ':shock:' => 'icon_eek.gif',
            ':???:' => 'icon_confused.gif',
            ':cool:' => 'icon_cool.gif',
            ':lol:' => 'icon_lol.gif',
            ':mad:' => 'icon_mad.gif',
            ':twisted:' => 'icon_twisted.gif',
            ':roll:' => 'icon_rolleyes.gif',
            ':wink:' => 'icon_wink.gif',
            ':idea:' => 'icon_idea.gif',
            ':arrow:' => 'icon_arrow.gif',
            ':neutral:' => 'icon_neutral.gif',
            ':cry:' => 'icon_cry.gif',
            ':mrgreen:' => 'icon_mrgreen.gif',
        );
    }
    smilies_reset();

好了,至此全部完成。

标签
点赞0打赏分享
版权声明
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:灵阳星空 » 为WordPress评论框添加表情、图片、签到等功能
本文标题:为WordPress评论框添加表情、图片、签到等功能
本文日期:本文发表于2020/02/13 14:09:59,最后更新于2020/02/13 14:11:58,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/add-utility-to-wordpress-comment-box.html
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 2

A 作者 M 管理员

评论前必须登录!

 

  1. #2
    amiisk7天前 13:41

    签到成功!签到时间:2020-09-21 13:41:40,每日签到,生活更精彩哦~

    0Windows 7 x64 Edition Windows 7 x64 Edition Google Chrome 78.0.3904.108 Google Chrome 78.0.3904.108 安徽省合肥市 联通
  2. #1
    yuge03-27 18:04

    签到成功!签到时间:2020-03-27 18:03:41,每日签到,生活更精彩哦~

    0Windows 7 x64 Edition Windows 7 x64 Edition Google Chrome 80.0.3987.132 Google Chrome 80.0.3987.132 浙江省温州市 联通

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏