在 WordPress 评论中添加表情

原 Blogych 4,508 0

在 博客YCH 中，评论和写作都有着许多表情。今天就来讲一讲怎样在 WordPress 的评论中添加表情[aru_14]。

准备

无需准备什么，如果条件允许，准备一个 宝塔面板 是最好的。[aru_1]

过程

非常简单，首先打开 comments.php ，并在 <body> 顶部添加以下代码：

<script src="https://blogych.top/emoji/lib/script/jquery.min.js"></script>
<script src="https://blogych.top/emoji/dist/js/jquery.emoji.min.js"></script>
<script src="https://blogych.top/emoji/dist/js/emoji.list.js"></script>
<link rel="stylesheet" href="https://blogych.top/emoji/dist/css/jquery.emoji.css" />

然后，再到底部添加这样的一段：

<script>
    $("#comment").emoji({
    	button: '#comment-smiley',
    	animation: 'fade',
    	basePath: 'https://blogych.top/emoji/images/emoji',
    	icons: emojiLists
    });
    $("p[id!=comment-form-comment]").emojiParse({
    	basePath: 'https://blogych.top/emoji/images/emoji',
    	icons: emojiLists
    });
</script>

最后的最后，只用在你想要添加“添加表情”按钮 的地方加上代码：

<div class="comment-smiley-">
	<input type="button" id="comment-smiley" value="添加表情"><br><br>
</div>
<style>
#comment-smiley{cursor:pointer;border-width:1px;border-color:rgb(224,224,224);border-radius:3px;background-color:white;box-shadow:none;}
</style>

就大功告成啦。[aru_17]

例子

为了防止大家不理解， 这里给出了例子。这是博主的测试博客的 comments.php 的代码。

<?php
if ( post_password_required() ) {
	return;
}
?>

<script src="https://blogych.top/emoji/lib/script/jquery.min.js"></script>
<script src="https://blogych.top/emoji/dist/js/jquery.emoji.min.js"></script>
<script src="https://blogych.top/emoji/dist/js/emoji.list.js"></script>
<link rel="stylesheet" href="https://blogych.top/emoji/dist/css/jquery.emoji.css"/>

<div id="comments" class="comments-area">
    <?php if ( comments_open() ) : ?>	
	<div id="respond" class="comment-respond">
        <h3 id="reply-title" class="comment-reply-title">发表评论
            <small><?php cancel_comment_reply_link( '取消回复' ); ?></small>
        </h3>
		
		<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
		<p>您必须 [<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">登录</a>] 才能发表留言！</p>
		<?php else : ?>
        
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
			<?php if ($user_ID) : ?>
			<div class="user_avatar">
				<?php echo my_avatar( get_userdata($user_ID)->user_email,40,$default='',$comment->comment_author); ?>
				登录者：<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a> 
				<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="退出">退出</a>
			</div>
			<?php elseif ($comment_author): ?>
			<div class="author_avatar">
                <a href="http://mkblog.cn/695/?from=cmt" target="_blank" title="修改头像">
                    <?php echo my_avatar($comment_author_email, 40, $default='', $comment->comment_author); ?>
                </a>
				
                欢迎
                <a href="javascript:toggleCommentAuthorInfo();" title="点击编辑用户信息" class="comment-author-name">
                    <?php echo $comment_author; ?> 
                    <i class="fa fa-edit"></i>
                </a>
                再次光临！ 
				
				<span class="plxiaoshi"><?php echo WelcomeCommentAuthorBack($comment_author_email); ?></span>
				<script type="text/javascript" charset="utf-8">
					function toggleCommentAuthorInfo() {
						jQuery('#comment-author-info').slideToggle('slow');
					}
					jQuery(document).ready(function(){
						jQuery('#comment-author-info').hide();
					});
				</script>
			</div>
			<?php endif; ?>

			<?php if ( ! $user_ID ): ?>
			<div id="comment-author-info">
				<p class="comment-form-author">
					<input type="text" name="author" id="author" class="commenttext" value="<?php echo $comment_author; ?>" tabindex="1" />
					<label for="author">昵称<?php if ($req) echo "（必填）"; ?></label>
				</p>
				<p class="comment-form-email">
					<input type="text" name="email" id="email" class="commenttext" value="<?php echo $comment_author_email; ?>" tabindex="2" />
					<label for="email">邮箱<?php if ($req) echo "（必填）"; ?></label>
				</p>
				<p class="comment-form-url">
					<input type="text" name="url" id="url" class="commenttext" value="<?php echo $comment_author_url; ?>" tabindex="3" />
					<label for="url">网址</label>
				</p>
			</div>
			<?php endif; ?>
			
            <p class="smiley-box">
                <?php get_template_part( 'inc/smiley' ); ?>
            </p>
            
            <p class="comment-tools-box">
                <?php get_template_part( 'inc/comment-tools' ); ?>
            </p>
            
            <p class="comment-form-comment" id="comment-form-comment">
                <textarea id="comment" name="comment" rows="4" tabindex="4" placeholder="在我这里，点赞和评论都是一件很有趣的事，不信你试试~"></textarea>
            </p>

            <!--p class="comment-tool" id="comment-smiley-">
                <span class="single-tag"><a class="smiley" href="" title="插入表情">表情</a></span>
            </p-->
            <div class="comment-smiley-">
				<input type="button" id="comment-smiley-" value="添加表情"><br><br>
		</div>
		<style>
			.#comment-smiley{cursor:pointer;border-width:1px;border-color:rgb(224,224,224);border-radius:3px;background-color:white;box-shadow:none;}
			</style>
			<p class="form-submit">
				<input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
				<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
			</p>
		</form>
		<script type="text/javascript">
			document.getElementById("comment").onkeydown = function (moz_ev){
                var ev = null;
                ev = window.event? window.event: moz_ev;
                // Ctrl + 回车 发送	
                if (ev != null && ev.ctrlKey && ev.keyCode == 13){
                    document.getElementById("submit").click();
                }
            }
		</script>
 		<?php endif; // 非必须登录 ?>
	</div>     <!-- respond -->
	<?php else: ?>
	<p class="no-comments"><i class="fa fa-commenting-o"></i> 评论已关闭</p>
	<?php endif; ?>
	
	<!-- 评论列表 -->
	<?php if ( have_comments() ) : ?>
	<ol class="comment-list">
		<?php wp_list_comments( 'type=comment&callback=mytheme_comment' ); ?>
	</ol><!-- .comment-list -->
	<?php endif; ?>

</div>  <!-- .comments-area -->

<!-- 评论翻页 -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-navigation">
    <div class="pagination">
        <?php paginate_comments_links('prev_text=<i class="fa fa-angle-left"></i>&next_text=<i class="fa fa-angle-right"></i>'); ?>
    </div>
</nav>
<div class="clear"></div>
<?php endif; ?>

<script>
    $("#comment").emoji({
    	button: '#comment-smiley',
    	animation: 'fade',
    	basePath: 'https://blogych.top/emoji/images/emoji',
    	icons: emojiLists   
	});
	$("p[id!=comment-form-comment]").emojiParse({
    	basePath: 'https://blogych.top/emoji/images/emoji',
    	icons: emojiLists   // 注：详见 js/emoji.list.js
	});
</script>

请自行在此代码中寻找上文提供的代码！（提示：第 7、87、133 行）[aru_31]

本文作者为Blogych，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

分享