Bộ nhãn dãn mẫu
Các bạn bỏ ảnh này vào thư mục hình ảnh, ở đây mình dùng thư mục images
, thay đổi cho phù hợp với dự án của bạn.
CSS
.small-owl-emoji { display: flex; background-image: url(images/owl-emoji-small.jpg); background-size: auto; background-repeat: no-repeat; } .owl-emoji-panel .small-owl-emoji { display: inline-block; } .small-owl-emoji-smile { width: 90px; height: 63px; background-position: 0 0; } .small-owl-emoji-stun { width: 90px; height: 63px; background-position: 0 -65px; } .small-owl-emoji-cry { width: 90px; height: 63px; background-position: 0 -129px; } .small-owl-emoji-cute { width: 90px; height: 68px; background-position: 0 -193px; } .small-owl-emoji-down { width: 90px; height: 68px; background-position: 0 -262px; } .small-owl-emoji-angry { width: 90px; height: 65px; background-position: 0 -330px; } .small-owl-emoji-ple { width: 90px; height: 68px; background-position: 0 -395px; } .small-owl-emoji-ok { width: 90px; height: 75px; margin-right: 20px; background-position: 0 -468px; } .small-owl-emoji-up { width: 90px; height: 63px; background-position: 0 -548px; } .owl-emoji-btn { margin-top: 10px; font-size: larger; cursor: pointer; transition: all 0.2s ease; } .owl-emoji-btn:hover, .owl-emoji-btn:focus { color: #0faef1; } .owl-emoji-panel { padding: 15px; border: 1px solid #f4f5f7; margin-top: 10px; position: relative; } .owl-emoji-panel:after, .owl-emoji-panel:before { bottom: 100%; left: 133px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .owl-emoji-panel:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; margin-left: -7px; } .owl-emoji-panel:before { border-color: rgba(244, 245, 247, 0); border-bottom-color: #f4f5f7; border-width: 8px; margin-left: -8px; } .owl-emoji-panel .small-owl-emoji { cursor: pointer; transition: all 0.2s ease; } .owl-emoji-panel .small-owl-emoji:hover { opacity: .8; } .position-relative { position: relative; }
Cập nhật functions.php
// Comments Filter add_filter('comment_text', 'ocm_filter_comment'); function ocm_filter_comment($comment) { $replace = array( 'ocm:smile' => ' <span class="small-owl-emoji small-owl-emoji-smile"></span> ', 'ocm:stun' => ' <span class="small-owl-emoji small-owl-emoji-stun"></span> ', 'ocm:cry' => ' <span class="small-owl-emoji small-owl-emoji-cry"></span> ', 'ocm:cute' => ' <span class="small-owl-emoji small-owl-emoji-cute"></span> ', 'ocm:down' => ' <span class="small-owl-emoji small-owl-emoji-down"></span> ', 'ocm:angry' => ' <span class="small-owl-emoji small-owl-emoji-angry"></span> ', 'ocm:ple' => ' <span class="small-owl-emoji small-owl-emoji-ple"></span> ', 'ocm:ok' => ' <span class="small-owl-emoji small-owl-emoji-ok"></span> ', 'ocm:up' => ' <span class="small-owl-emoji small-owl-emoji-up"></span> ' ); $comment = str_replace(array_keys($replace), $replace, $comment); return $comment; }
Nếu bạn có sử dụng Lọc từ ngữ tục tĩu trong bình luận WordPress, chỉ cần thêm đoạn mã có ocm:
.
JQuery
Bài viết này áp dụng cho Giao diện bình luận WordPress tiếng Việt đầy đủ của trang giới thiệu, các bạn có thể tham khảo.
<script type="text/javascript"> $('#commentform textarea#comment').after('Thêm <u>01</u> nhãn dán: <span class="owl-emoji-btn glyphicon glyphicon-picture"></span><div class="hidden owl-emoji-panel"><span class="small-owl-emoji small-owl-emoji-smile" data-emoji="smile"></span><span class="small-owl-emoji small-owl-emoji-stun" data-emoji="stun"></span><span class="small-owl-emoji small-owl-emoji-cry" data-emoji="cry"></span><span class="small-owl-emoji small-owl-emoji-cute" data-emoji="cute"></span><span class="small-owl-emoji small-owl-emoji-down" data-emoji="down"></span><span class="small-owl-emoji small-owl-emoji-angry" data-emoji="angry"></span><span class="small-owl-emoji small-owl-emoji-ple" data-emoji="ple"></span><span class="small-owl-emoji small-owl-emoji-ok" data-emoji="ok"></span><span class="small-owl-emoji small-owl-emoji-up" data-emoji="up"></span></div>'); $('.owl-emoji-btn').click(function() { if ($('.owl-emoji-panel').hasClass('hidden')) { $('.owl-emoji-panel').removeClass('hidden'); } else { $('.owl-emoji-panel').addClass('hidden'); } }); // Chỉ được chọn 1 nhãn dán cho 1 bình luận $('.owl-emoji-panel span.small-owl-emoji').click(function() { if (!$('textarea#comment').val().includes('ocm:')) { $('textarea#comment').val($('textarea#comment').val() + 'ocm:' + $(this).data('emoji')); } }); // Chỉ hiện 1 nhãn dán duy nhất $('div.comment-content').each(function() { if ($(this).find('span.small-owl-emoji').length > 1) { $(this).find('span.small-owl-emoji').slice(1, $(this).find('span.small-owl-emoji').length).remove(); } }); </script>
Ta được kết quả.