Hướng Dẫn Thêm Button Vào WordPress Editor (TinyMCE)

Bài viết này rất quan trọng đối với các bạn làm Content WordPress, giúp việc chèn mã ngắn (Shortcode) vào trình soạn thảo trở nên dễ dàng và thuận tiện, đồng thời giảm thiểu sai sót tối đa.

Đôi khi, bạn cần thêm danh sách sản phẩm vào đúng vị trí trong bài viết nhưng lại gặp khó khăn khi phải ghi nhớ hoặc tìm lại đoạn ShortCode của sản phẩm. Vậy làm sao để giải quyết vấn đề này? Hãy đọc tiếp bài viết để tìm ra cách thức đơn giản và hiệu quả giúp bạn làm việc này dễ dàng hơn!

1. Điều kiện để thêm button vào Classic Editor

Plugin Classic Editor phải được kích hoạt.

Bạn có thể cài plugin nếu chưa tìm thấy trong danh sách các plugin nhé.

Và phải được bật như sau:

2. Cách thêm Nút Button vào Soạn Thảo Editor (TinyMCE)

Sao chép và dán đoạn code sau vào functions.php nằm trong theme đang kích hoạt.

// Nhúng đoạn code này vào functions.php
// Thêm nút vào TinyMCE Editor
function wpshare247_add_tinymce_button() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof tinymce !== 'undefined') {
                tinymce.create('tinymce.plugins.wpshare247_custom_button', {
                    init : function(editor, url) {
                        // Tạo menu dropdown với các submenu
                        editor.addButton('wpshare247_custom_button', {
                            type: 'menubutton', // Loại nút là menubutton
                            text: 'Thêm sản phẩm', // Tên menu
                            icon: 'insert', // Icon menu
                            menu: [
                                {
                                    text: 'Mới thêm', // Tên submenu
                                    icon: 'list', // Icon cho submenu
                                    onclick: function() {
                                        editor.insertContent('[recent_products limit="16" columns="4" order="desc"]');
                                    }
                                },
                                {
                                    text: 'Nổi bật', // Tên submenu
                                    icon: 'dashicons dashicons-trash', // Icon cho submenu
                                    onclick: function() {
                                        editor.insertContent('[featured_products limit="16" columns="4" order="desc"]');
                                    }
                                },
                                {
                                    text: 'Giảm giá', // Tên submenu
                                    icon: 'dashicons dashicons-trash', // Icon cho submenu
                                    onclick: function() {
                                        editor.insertContent('[sale_products limit="16" columns="4" order="desc"]');
                                    }
                                },
                                {
                                    text: 'Theo danh mục', // Tên submenu
                                    icon: 'dashicons dashicons-trash', // Icon cho submenu
                                    onclick: function() {
                                        editor.insertContent('[product_category category="322" limit="16" columns="4" orderby="rand" order="desc"]');
                                    }
                                }
                            ]
                        });
                    //--------------------------------------------   
                    }
                });
                tinymce.PluginManager.add('wpshare247_custom_button', tinymce.plugins.wpshare247_custom_button);
            }
        });
    </script>
    <?php
}

// Thêm nút vào thanh công cụ TinyMCE
function wpshare247_register_tinymce_button($buttons) {
    array_push($buttons, 'wpshare247_custom_button'); // ID của nút
    return $buttons;
}

// Đăng ký plugin TinyMCE
function wpshare247_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpshare247_custom_button'] = ''; // Không cần URL của JS, vì JS nhúng trực tiếp
    return $plugin_array;
}

// Thêm các tính năng vào TinyMCE khi chỉnh sửa bài viết
function wpshare247_add_tinymce_features() {
    if (current_user_can('edit_posts') && current_user_can('edit_pages')) {
        // Thêm nút vào thanh công cụ
        add_filter('mce_buttons', 'wpshare247_register_tinymce_button');
        
        // Đăng ký plugin JS
        add_filter('mce_external_plugins', 'wpshare247_register_tinymce_plugin');
        
        // Chèn JavaScript vào footer của trang admin
        add_action('admin_footer', 'wpshare247_add_tinymce_button');
    }
}
add_action('admin_head', 'wpshare247_add_tinymce_features');

Giải Thích Mã PHP

• Thêm Button Vào TinyMCE:
  • editor.addButton() được sử dụng để tạo một nút mới trong trình soạn thảo. Bạn có thể chỉ định tên button, văn bản hiển thị, icon và hành động khi người dùng nhấp vào nút. Trong ví dụ này, nút sẽ chèn [recent_products limit=”16″ columns=”4″ order=”desc”] vào bài viết.
  • Chèn JavaScript Vào Admin: Đoạn mã này sẽ đảm bảo rằng mã JavaScript của bạn được tải vào trang quản trị của WordPress, giúp nút được hiển thị đúng cách.

Thêm Button để chèn các nội dung khác: Nếu bạn muốn nút chèn các nội dung khác, chỉ cần thay đổi nội dung của editor.insertContent().

onclick: function() {
    editor.insertContent('<p>Chào các bạn tôi là WPSHARE247.</p>');
}

Danh sách Shortcode:

[recent_products limit="16" columns="4" order="desc"]
[featured_products limit="16" columns="4" order="desc"]
[sale_products limit="16" columns="4" order="desc"]
[product_category category="322" limit="16" columns="4" orderby="rand" order="desc"]

Bạn có thể tìm và thay thế Shortcode WooCommerce tại đây Copy ShortCode Sản Phẩm hoặc bạn cũng có thể tự tạo riêng cho mình 1 custom shortcode rồi sử dụng chúng

Vì vậy:

Việc thêm button vào WordPress Editor (TinyMCE) giúp bạn và người dùng dễ dàng thêm nội dung, shortcode, hoặc các phần tử HTML vào bài viết mà không cần phải viết mã thủ công. Chỉ với vài bước đơn giản và một chút mã PHP, bạn có thể tối ưu hóa quy trình viết bài của mình và tiết kiệm thời gian.

Hãy thử ngay hôm nay và khám phá cách thức này có thể giúp bạn nâng cao hiệu quả viết bài và quản lý nội dung trên WordPress!