fbpx
  • Giới thiệu
  • Cloud Server
  • Hosting giá rẻ
  • SSL
  • Chính sách bảo mật
  • Liên Hệ
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO - Web Hosting, Dịch vụ máy chủ, cho thuê máy chủ, thuê chỗ đặt máy chủ, cho thuê VPS, máy chủ ảo, Cloud hosting, VPS Cloud, Email hosting, Tên miền, Đại lý hosting
  • Hosting giá rẻ
  • Webmasters
  • Kiến thức Hosting
  • Khuyến Mãi
    • TinoHost
    • Thông Báo
  • Hướng dẫn
    • Hướng dẫn chung
  • Kiếm tiền online
  • Kiểm tra tên miền
TinoHost Blog
  • Hosting giá rẻ
  • Webmasters
  • Kiến thức Hosting
  • Khuyến Mãi
    • TinoHost
    • Thông Báo
  • Hướng dẫn
    • Hướng dẫn chung
  • Kiếm tiền online
  • Kiểm tra tên miền
TinoHost Blog
Trang chủ Webmasters

Hướng dẫn thêm nút shortcode vào TinyMCE

được đăng bởi Hồng Nhi
trong chuyên mục Webmasters
AA
them-nut-shortcode-vao-tinymce
Mục lục ẩn
1 TinyMCE là gì?
2 Shortcode là gì?
3 Thao tác thêm nút shortcode vào TinyMCE

TinyMCE là gì?

TinyMCE là chữ viết tắt của cụm “Tiny Moxiecode Content Editor”. Đây là một nền tảng độc lập dựa trên Javascript HTML WYSIWYG được phát hành bởi LGPL web.

Hiểu đơn giản, TinyMCE là một trình soạn thảo văn bản mở rộng của WordPress. Người dùng thường thêm TinyMCE vào hệ thống quản trị website để nhập liệu nội dung, hình ảnh, … Nhờ TinyMCE, thao tác soạn thảo và chỉnh sửa định dạng những đoạn văn bản như blog, description… sẽ dễ dàng hơn.

Bạn có thể tìm và download TinyMCE trên kho plugin của WordPress. Plugin này thường xuyên được cập nhật và tương thích với phiên bản WordPress mới nhất. Đôi lúc giao diện trang soạn thảo văn bản WordPress của bạn bị lỗi, có thể xuất phát từ nguyên nhân là trang web của bạn chưa được update lên phiên bản mới.

Shortcode là gì?

Một trong những tính năng độc đáo của WordPress là shortcode (tạm dịch: Mã ngắn/chuỗi số ngắn). Sử dụng shortcode, bạn có thể tạo ra nhiều chức năng tùy biến. Từ đó, người dùng có thể sử dụng trong nội dung của bài viết hoặc widget thậm chí là sử dụng tại bất kỳ nơi nào trong giao diện WordPress.

Tính năng thực thi một nhiệm vụ nào đó của shortcode đã được bạn định sẵn trong lúc tạo.

Trong bài viết này, TinoHost sẽ hướng dẫn bạn cách thêm nút shortcode vào thanh công cụ của trình soạn thảo TinyMCE.

Thao tác thêm nút shortcode vào TinyMCE

Bước 1: Đầu tiên, bạn khai báo 1 shortcode có chức năng tạo nhanh 1 icon các biểu tượng cảm xúc trên TinyMCE.

Bước 2: Bạn chèn nội dung tại cuối file function.php của theme đang sử dụng.

function mce_smiley_button($buttons) {
    array_push($buttons, 'smiley');
    return $buttons;
}

add_filter('mce_buttons', 'mce_smiley_button');

function mce_smiley_js($plugin_array) {
    $plugin_array['smiley'] = get_template_directory_uri() .'/plugin.js';
    return $plugin_array;
}


add_filter('mce_external_plugins', 'mce_smiley_js');

function mce_smiley_css() {
    wp_enqueue_style('tinymce-smiley-button', get_theme_file_uri('/plugin.css', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'mce_smiley_css' );
add_action( 'wp_enqueue_scripts', 'mce_smiley_css' );

function mce_smiley_settings($settings) {
    global $wpsmiliestrans;

    if (get_option('use_smilies')) {
        $keys = array_map('strlen', array_keys($wpsmiliestrans));
        array_multisort($keys, SORT_ASC, $wpsmiliestrans);
        $smilies = array_unique($wpsmiliestrans);
        $smileySettings = array(
            'smilies' => $smilies,
            'src_url' => apply_filters('smilies_src', includes_url('images/smilies/'), '', site_url())
        );
        echo '<script>window._smileySettings = ' . json_encode($smileySettings) . '</script>';
    }

    return $settings;
}
add_filter('tiny_mce_before_init', 'mce_smiley_settings');

Bước 3: Bạn khai báo nội dung button js đã được gọi ở trên. Bạn có thể khai báo nội dung bằng cách tạo file plugin.js ngay chính thư mục root theme đang sử dụng. Nội dung như sau :

/* global tinymce, twemoji, _wpemojiSettings, _smileySettings */

(function() {

    function getSmileySrc(smiley) {

        if (/\.([^.]+)$/.test(smiley)) {

            return _smileySettings.src_url + smiley;

        }


        return ''.concat(twemoji.base, twemoji.size, '/', twemoji.convert.toCodePoint(smiley), twemoji.ext);

    }

    function getHtml() {

        var supportEmoji = '_wpemojiSettings' in window && _wpemojiSettings.supports && _wpemojiSettings.supports.everything;

        var smilies = _smileySettings.smilies;

        var idx = 1;

        var cols = 5;

        var emoticonsHtml;

        var text;

        var icon;

        emoticonsHtml = '<table role="list" class="mce-grid">';

        for (text in smilies) {

            if (Object.prototype.hasOwnProperty.call(smilies, text)) {

                icon = smilies[text];

                if (idx % cols === 1) emoticonsHtml += '<tr>';

                emoticonsHtml += '<td><div data-mce-alt="' + text + '" tabindex="-1" role="option" aria-label="' + text + '">';


                if ((!window._wpemojiSettings || supportEmoji) && icon.indexOf('.') === -1) {

                    emoticonsHtml += icon;

                } else {

                    emoticonsHtml += '<img src="' + getSmileySrc(icon) + '" />';

                }


                emoticonsHtml += '</div></td>';


                if (idx % cols === 5) emoticonsHtml += '</tr>';


                idx++;

            }

        }


        emoticonsHtml += '</table>';


        return emoticonsHtml;

    }


    tinymce.PluginManager.add('smiley', function(editor) {

        editor.addButton('smiley', {

            type: 'panelbutton',

            panel: {

                classes: 'smily',

                role: 'application',

                autohide: true,

                html: getHtml,

                onclick: function(e) {

                    var linkElm = editor.dom.getParent(e.target, 'div');


                    if (linkElm) {

                        editor.insertContent('&nbsp;' + linkElm.getAttribute('data-mce-alt') + '&nbsp;');


                        this.hide();

                    }

                }

            },

            tooltip: 'Emoticons'

        });

    });

Bước 4: Bạn khai báo tương tự css cho biểu tượng icon này tại file plugin.css với nội dung:

.mce-toolbar .mce-i-smiley {
     background: url(../../../wp-includes/images/smilies/simple-smile.png) no-repeat 50% 50%;
     background-size: contain;
}

.mce-smily .mce-grid div {
     font-size: 24px;
     line-height: 1;

    text-align: center;

    width: 1em;
    height: 1em;
    padding: 3px;
    border: 0;
    border-radius: 1px;
    cursor: pointer;
}

.mce-smily .mce-grid div:hover {
    background: #b4b9be;
}

.mce-smily .mce-grid img {
    font-size: inherit;
    width: 1em;
    height: 1em;
    vertical-align: top;
}


Bạn chèn và tạo nội dung tại 3 file trên theme đang sử dụng giống như sau :them-nut-shortcode-vao-tinymceCuối cùng, bạn truy cập lại trình chỉnh sửa editor classic của WordPress. Bạn sẽ thấy biểu tượng tạo shortcode icon bạn vừa tạo ra. Lúc này, bạn có thể chọn nhanh shortcode biểu tượng icon khuôn mặt mà bạn vừa tạo ra.

them-nut-shortcode-vao-tinymce

Chúc bạn thêm nút shortcode vào TinyMCE thành công nhé!

Mọi thắc mắc và góp ý liên quan, xin vui lòng liên hệ ngay TinoHost để được tư vấn chi tiếthoặc Fanpage để cập nhật những thông tin mới nhất nhé!

Với bề dày kinh nghiệm hơn 5 năm cung cấp hosting, dịch vụ cho thuê máy chủ, các dịch vụ liên quan đến tên miền và bảo mật website, hãy để TinoHost đồng hành cùng bạn trên con đường khẳng định thương hiệu trên bản đồ công nghệ toàn cầu!

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh
    Văn phòng đại diện: Tầng 31, Tòa nhà Landmark 2, Vinhomes Central Park, Số 720A Điện Biên Phủ, Phường 22, Quận Bình Thạnh, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333
    Tổng đài miễn phí: 1800 6734
  • Email: [email protected]
  • Website: www.tinohost.com
Rate this post
Thẻ : thêm nút shortcode vào TinyMCE
Chia sẻ166

Liên quan Bài đăng

ipconfig-flushdns-la-gi
Webmasters

Ipconfig/Flush DNS là gì? Tìm hiểu chi tiết về Ipconfig và Flush DNS

fix-loi-your-php-installation-appears-in-wordpress
Webmasters

Hướng dẫn fix lỗi “Your PHP installation appears to be missing the MySQL extension which is required by WordPress”

mau-theme-ban-hang-cho-wordpress-dep-nhat
Webmasters

Top 5 mẫu theme bán hàng cho WordPress đẹp nhất 2021

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Đề xuất.

MySQL là gì? Tầm quan trọng của MySQL server 1

MySQL là gì? Tầm quan trọng của MySQL server

Hướng dẫn dịch nhanh từ Tiếng Anh sang Tiếng Việt 2

Hướng dẫn dịch nhanh từ Tiếng Anh sang Tiếng Việt

Khuyến mãi Tinohost

  • – Hosting giá từ 9k
  • – VPS giá từ 139k
  • – Tên miền giá từ 39k
  • Giới thiệu
  • Cloud Server
  • Hosting giá rẻ
  • SSL
  • Chính sách bảo mật
  • Liên Hệ
Gọi ngay: 1800 6734

© 2018 TINOHOST

  • Hosting giá rẻ
  • Webmasters
  • Kiến thức Hosting
  • Khuyến Mãi
    • TinoHost
    • Thông Báo
  • Hướng dẫn
    • Hướng dẫn chung
  • Kiếm tiền online
  • Kiểm tra tên miền

© 2018 TINOHOST

TinoHost tặng kèm plugin Rank Math Seo Pro, WP-Rocket, WPML và nhiều plugin bản quyền khác trị giá hơn 800$ khi đăng ký dịch vụ.Tải ngay