Thêm quicktags form bình luận WordPress

Giới Thiệu về Quicktags trong WordPress

Quicktags là một tính năng tích hợp sẵn trong WordPress, cho phép người dùng dễ dàng định dạng văn bản trong khu vực soạn thảo (editor) bằng cách sử dụng các nút lệnh nhanh. Ban đầu, quicktags được thiết kế cho trình soạn thảo văn bản cổ điển (Classic Editor), nhưng chúng cũng có thể được tùy chỉnh và sử dụng trong khu vực bình luận (comment form) để giúp người dùng thêm các định dạng cơ bản như in nghiêng, in đậm, trích dẫn và liên kết một cách nhanh chóng và tiện lợi.

Trong khu vực bình luận, quicktags đặc biệt hữu ích vì nó giúp người dùng không quen thuộc với mã HTML vẫn có thể tạo ra các bình luận được định dạng tốt, góp phần làm cho cuộc thảo luận trở nên dễ đọc và chuyên nghiệp hơn.

Tại Sao Nên Thêm Quicktags vào Form Bình Luận WordPress?

Việc thêm quicktags vào form bình luận WordPress mang lại nhiều lợi ích đáng kể:

• **Cải thiện trải nghiệm người dùng:** Quicktags giúp người dùng dễ dàng định dạng văn bản bình luận của họ mà không cần phải biết HTML. Điều này đặc biệt quan trọng đối với những người dùng không rành về kỹ thuật.
• **Tăng tính tương tác:** Bình luận được định dạng tốt thường dễ đọc và hấp dẫn hơn, khuyến khích người dùng tham gia vào cuộc thảo luận.
• **Giảm thiểu bình luận spam:** Mặc dù không trực tiếp ngăn chặn spam, nhưng việc cung cấp một công cụ định dạng dễ sử dụng có thể giảm số lượng bình luận có định dạng kém và trông giống spam.
• **Nâng cao tính chuyên nghiệp:** Một trang web có bình luận được định dạng tốt trông chuyên nghiệp hơn và thể hiện sự quan tâm đến trải nghiệm người dùng.

Các Bước Thêm Quicktags vào Form Bình Luận

Để thêm quicktags vào form bình luận WordPress, bạn sẽ cần sử dụng code và tùy chỉnh theme của mình. Hãy nhớ sao lưu theme của bạn trước khi thực hiện bất kỳ thay đổi nào để tránh mất dữ liệu nếu có sự cố xảy ra. Bạn có thể sử dụng child theme để đảm bảo rằng các thay đổi của bạn không bị ghi đè khi cập nhật theme.

Bước 1: Thêm JavaScript vào Theme

Đầu tiên, bạn cần thêm một đoạn mã JavaScript vào theme của mình để thêm các nút quicktags vào form bình luận. Bạn có thể tạo một file JavaScript riêng (ví dụ: `comment-quicktags.js`) và đặt nó trong thư mục theme của bạn. Sau đó, bạn cần thêm đoạn mã sau vào file `functions.php` của theme (hoặc child theme) để tải file JavaScript này:

“`php

“`

Đoạn mã này kiểm tra xem trang hiện tại có phải là một trang đơn (single post/page) và có cho phép bình luận hay không. Nếu cả hai điều kiện đều đúng, nó sẽ tải file `comment-quicktags.js` và đảm bảo rằng jQuery và quicktags đã được tải trước đó. `get_stylesheet_directory_uri()` trả về đường dẫn đến thư mục theme (hoặc child theme) đang hoạt động.

Bước 2: Tạo File JavaScript (comment-quicktags.js)

Tiếp theo, bạn cần tạo file `comment-quicktags.js` và thêm đoạn mã JavaScript sau vào file này. Đoạn mã này sẽ thêm các nút quicktags vào form bình luận:

“`javascript
(function($) {
$(document).ready(function() {
if (typeof QTags != ‘undefined’) {
QTags.addButton( ‘strong’, ‘b’, ‘‘, ‘‘, ‘b’, ‘Bold’, ‘1’ );
QTags.addButton( ’em’, ‘i’, ‘‘, ‘‘, ‘i’, ‘Italic’, ‘2’ );
QTags.addButton( ‘link’, ‘link’, ‘‘, ‘‘, ‘link’, ‘Link’, ‘3’ );
QTags.addButton( ‘blockquote’, ‘b-quote’, ‘

‘, ‘

‘, ‘b-quote’, ‘Blockquote’, ‘4’ );
QTags.addButton( ‘code’, ‘code’, ‘', '‘, ‘code’, ‘Code’, ‘5’ );
}
});
})(jQuery);
“`

Đoạn mã này sử dụng hàm `QTags.addButton()` để thêm các nút quicktags vào trình soạn thảo. Mỗi nút được định nghĩa bằng các tham số sau:

• `id`: ID duy nhất của nút.
• `display`: Văn bản hiển thị trên nút.
• `arg1`: Mã HTML được chèn vào trước vùng chọn văn bản.
• `arg2`: Mã HTML được chèn vào sau vùng chọn văn bản.
• `access_key`: Phím tắt để kích hoạt nút.
• `title`: Tiêu đề hiển thị khi di chuột qua nút.
• `priority`: Thứ tự hiển thị của nút (số càng nhỏ, hiển thị càng sớm).

Bạn có thể tùy chỉnh danh sách các nút quicktags bằng cách thêm hoặc xóa các dòng `QTags.addButton()`.

Bước 3: Tùy Chỉnh Vị Trí Hiển Thị Quicktags

Theo mặc định, các quicktags được thêm vào sẽ hiển thị ngay phía trên textarea của form bình luận. Nếu bạn muốn thay đổi vị trí này, bạn có thể cần phải chỉnh sửa trực tiếp file template chứa form bình luận của theme. File này thường là `comments.php` hoặc một phần template được bao gồm trong file này. Tìm kiếm thẻ `` cho khu vực bình luận và đảm bảo rằng đoạn mã JavaScript của bạn chèn các quicktags vào vị trí mong muốn so với thẻ textarea đó.</p> <p>Thông thường, các theme WordPress sử dụng hàm `comment_form()` để hiển thị form bình luận. Bạn có thể sử dụng filter `comment_form_defaults` để tùy chỉnh các tham số của form bình luận, nhưng việc này không cho phép bạn kiểm soát trực tiếp vị trí của quicktags. Vì vậy, việc chỉnh sửa trực tiếp file template có thể là cần thiết.</p> <h2><span class="ez-toc-section" id="Vi_Du_Ve_Tuy_Chinh_Quicktags"></span>Ví Dụ Về Tùy Chỉnh Quicktags<span class="ez-toc-section-end"></span></h2> <p>Bạn có thể tùy chỉnh các nút quicktags để phù hợp với nhu cầu của bạn. Ví dụ, bạn có thể thêm các nút cho các thẻ HTML khác nhau, thay đổi văn bản hiển thị trên các nút, hoặc thêm các phím tắt.</p> <p>Dưới đây là một vài ví dụ về cách tùy chỉnh quicktags:</p> <ul> <li>**Thêm nút cho thẻ ` <pre>`:** Để thêm một nút cho thẻ `<pre>` (preformatted text), bạn có thể sử dụng đoạn mã sau: ```javascript QTags.addButton( 'pre', 'pre', '<pre>', '</pre> <p>', 'pre', 'Preformatted Text', '6' );<br /> ```</p> </li> <li>**Thay đổi văn bản hiển thị trên nút:** Để thay đổi văn bản hiển thị trên nút "Bold" thành "In Đậm", bạn có thể thay đổi tham số `display` của hàm `QTags.addButton()`: <p> ```javascript<br /> QTags.addButton( 'strong', 'In Đậm', '<strong>', '</strong>', 'b', 'Bold', '1' );<br /> ```</p> </li> <li>**Thêm phím tắt:** Để thêm phím tắt "Ctrl+B" cho nút "Bold", bạn có thể thay đổi tham số `access_key` của hàm `QTags.addButton()`: <p> ```javascript<br /> QTags.addButton( 'strong', 'b', '<strong>', '</strong>', 'Ctrl+B', 'Bold', '1' );<br /> ```<br /> Tuy nhiên, hỗ trợ phím tắt có thể khác nhau tùy thuộc vào trình duyệt và hệ điều hành. </li> </ul> <h2><span class="ez-toc-section" id="Luu_Y_Quan_Trong"></span>Lưu Ý Quan Trọng<span class="ez-toc-section-end"></span></h2> <p>Khi thêm quicktags vào form bình luận, hãy nhớ những điều sau:</p> <ul> <li>**Kiểm tra tính tương thích:** Đảm bảo rằng các quicktags bạn thêm vào hoạt động tốt trên các trình duyệt và thiết bị khác nhau.</li> <li>**Xem xét khả năng sử dụng:** Chọn các quicktags hữu ích và dễ sử dụng cho người dùng của bạn. Không nên thêm quá nhiều nút, vì điều này có thể làm cho form bình luận trở nên lộn xộn.</li> <li>**Kiểm tra bảo mật:** Mặc dù quicktags giúp người dùng định dạng văn bản, bạn vẫn cần phải đảm bảo rằng các bình luận không chứa mã độc. Sử dụng các hàm như `wp_kses()` để lọc và loại bỏ các thẻ HTML không an toàn.</li> <li>**Sử dụng child theme:** Luôn sử dụng child theme để tùy chỉnh theme của bạn. Điều này sẽ giúp bạn tránh mất các thay đổi khi cập nhật theme.</li> </ul> <h2><span class="ez-toc-section" id="Ket_Luan"></span>Kết Luận<span class="ez-toc-section-end"></span></h2> <p>Việc thêm quicktags vào form bình luận WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng tính tương tác trên trang web của bạn. Bằng cách làm theo các bước được mô tả trong bài viết này, bạn có thể dễ dàng thêm các nút quicktags vào form bình luận của mình và tùy chỉnh chúng để phù hợp với nhu cầu của bạn. Hãy nhớ kiểm tra tính tương thích, xem xét khả năng sử dụng và đảm bảo bảo mật khi thực hiện các thay đổi này.</p> <div class="sharebaiviet"> <div class="facelike-bv"> <div class="fb-like" data-href="https://vn.123web.io.vn/them-quicktags-form-binh-luan-wordpress/" data-width="" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> </div> <div class="zalolike-bv"> <div class="zalo-share-button" data-href="https://vn.123web.io.vn/them-quicktags-form-binh-luan-wordpress/" data-oaid="1519305186852511949" data-layout="1" data-color="blue" data-customize=false></div> </div> </div> <script src="https://apis.google.com/js/platform.js"></script> <script src="https://sp.zalo.me/plugins/sdk.js"></script> <style> .sharebaiviet { float: left; width: 100%; } .facelike-bv { float: left; } .zalolike-bv { float: left; padding-right: 7px; } </style> <div class="box-seealso"> </div> <style> .box-seealso { width: 100%; height: auto; } .box-seealso ul li::before { content: ""; padding: 1px 0 0 10px; background: url(./images/bg_dot_gray_3x3.gif) no-repeat left 11px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .box-seealso ul a { color: #00648a; font: 400 14px arial; font-size: 15px; } span.mb-reader { width: 100%; height: auto; border-bottom: 2px dashed #00648a; font-size: 21px; font-weight: 400; padding-bottom: 5px; } ul.box-also { padding-top: 10px; margin-bottom: 13px !important; } .box-seealso ul a:hover { color: #333; } </style> <div class="post-tags"> <a href="https://vn.123web.io.vn/tag/download-quicktags/" rel="tag">download quicktags</a>, <a href="https://vn.123web.io.vn/tag/form-binh-luan-tuy-chinh/" rel="tag">form bình luận tùy chỉnh</a>, <a href="https://vn.123web.io.vn/tag/plugin-quicktags/" rel="tag">plugin quicktags</a>, <a href="https://vn.123web.io.vn/tag/them-nut-binh-luan/" rel="tag">thêm nút bình luận</a>, <a href="https://vn.123web.io.vn/tag/wordpress-binh-luan/" rel="tag">WordPress bình luận</a></div> <style> .post-tags { padding: 5px; overflow: hidden; margin-bottom: 10px; } .post-tags a { border: 1px solid #ddd; color: #4f4f4f; /* float: left; */ font-size: 13px; /* padding: 2px 8px; */ /* margin: 8px; */ text-decoration: none; text-transform: capitalize; background: #eee; padding: 0 5px; } .post-tags a:before { content: "# "; } </style> </div> <div class="col-sm-2 single-netweb"> <div class="author-desktop"> <div id="author-block"> <div class="author-meta"> <div class="author-avatar"> <img alt='' src='https://secure.gravatar.com/avatar/8122c347d9aead7902cb38db7deaf111b6a1383ce472d7e4e6e13a6ac402decc?s=300&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/8122c347d9aead7902cb38db7deaf111b6a1383ce472d7e4e6e13a6ac402decc?s=600&d=mm&r=g 2x' class='avatar avatar-300 photo' height='300' width='300' decoding='async'/> </div> <div class="author-name "> <a href="#" title="Posts by admin" rel="author">admin</a></div> <div class="author-desc"> </div> </div> </div> </div> <br> <div class="side-bar-right"> .. </div> </div> </div> </div> <style> .sub-youtube-123 h3 { color: #e62117; font-weight: bold; } .sub-youtube-123 { width: 100%; margin-top: 12px; margin-bottom: 11px; background: #e3e3e3; padding-top: 9px; padding-left: 13px; } .single-post h1 a { color: #4285f4 !important; } .single-post h1 a:hover { color: #e62117 !important; } </style> <div class="container-fluid footer-full-bt"> <div class="container bottom-footer"> <footer id="footer" class="block-reponsive"> <div class="footer-info"> <h2>vn.123web.io.vn</h2> <div class="row address-social"> <div class="col-sm-9 footer-address"> là trang web tài nguyên WordPress miễn phí dành cho người mới bắt đầu. vn.123web.io.vn. Mục tiêu của trang web này là cung cấp các mẹo, thủ thuật và tài nguyên WordPress chất lượng cho phép người mới bắt đầu sử dụng WordPress để cải thiện trang web của họ. <br> © Copyright 2026, ® All Reserved. </div> <div class="col-sm-3 footer-social"> <h4>Theo dõi vn.123web.io.vn</h4> <div class="fa-footer"> <a href="#" rel="nofollow noopener" target="_blank"><i class="fa fa-facebook-square"></i></a> <a href="#" target="_blank" rel="nofollow noopener"><i class="fa fa-youtube"></i></a> <a href="#" target="_blank" rel="nofollow noopener"><i class="fa fa-telegram"></i></a> </div> <div> <a href="http://www.dmca.com/Protection/Status.aspx?ID=fdf2ba87-9fb3-4585-85b2-8feb207279c9&refurl=https://vn.123web.io.vn/them-quicktags-form-binh-luan-wordpress/" target="_blank" title="DMCA.com Protection Status" class="dmca-badge"> <img src="//images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=fdf2ba87-9fb3-4585-85b2-8feb207279c9" alt="DMCA.com Protection Status"></a> </div> </div> </div> </div> </footer> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/likeweb.1.0/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-includes/js/hoverIntent.min.js?ver=1.10.2" id="hoverIntent-js"></script> <script type="text/javascript" id="megamenu-js-extra"> /* <![CDATA[ */ var megamenu = {"timeout":"300","interval":"100"}; //# sourceURL=megamenu-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/megamenu/js/maxmegamenu.js?ver=3.1.1" id="megamenu-js"></script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/megamenu-pro/assets/public.js?ver=2.1.1" id="megamenu-pro-js"></script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/netweb-easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0" id="jquery-smooth-scroll-js"></script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/netweb-easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="js-cookie-js"></script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/netweb-easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; //# sourceURL=ez-toc-js-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/plugins/netweb-easy-table-of-contents/assets/js/front.min.js?ver=2.0.17-1679639854" id="ez-toc-js-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://vn.123web.io.vn/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://vn.123web.io.vn/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> <script> (function($){ $(document).ready( function() { $('.netwebvn_post_view_count').each( function( i ) { var $id = $(this).data('id'); var $nonce = $(this).data('nonce'); var t = this; $.get('https://vn.123web.io.vn/wp-admin/admin-ajax.php?action=svl-ajax-counter&nonce='+$nonce+'&p='+$id, function( html ) { $(t).html( html ); }); }); }); })(jQuery); </script> <script src="https://vn.123web.io.vn/wp-content/themes/likeweb.1.0/js/popper.min.js" ></script> <script src="https://vn.123web.io.vn/wp-content/themes/likeweb.1.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://vn.123web.io.vn/wp-content/themes/likeweb.1.0/js/slick.min.js"></script> <script> jQuery(function() { //caches a jQuery object containing the header element var fix_netweb = $(".toc-netweb-custom"); jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 250) { fix_netweb.addClass("fix-ok"); } else { fix_netweb.removeClass("fix-ok").addClass('ok'); } }); var fix_sidebar1 = $(".side-bar-right"); jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 550) { fix_sidebar1.addClass("fix-ok"); } else { fix_sidebar1.removeClass("fix-ok").addClass('ok'); } }); }); </script> </body> </html>