Kinh Nghiệm về Hướng dẫn thêm nút shortcode vào TinyMCE Mới Nhất
READ ALSO
Hướng dẫn lấy Google Map API từ A – Z
Thumbnail là gì? Hướng dẫn thiết kế Thumbnail thu hút
NỘI DUNGREAD ALSOTinyMCE là gì?Shortcode là gì?Thao tác thêm nút shortcode vào TinyMCETinyMCE 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 nhờ vào Javascript HTML WYSIWYG được phát hành bởi LGPL web.
Hiểu đơn thuần và giản dị, 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 khối mạng lưới 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à sửa đổi định dạng những đoạn văn bản như blog, description… sẽ thuận tiện và đơn thuần và giản dị hơn.
Bạn trọn vẹn có thể tìm và tải về TinyMCE trên kho plugin của WordPress. Plugin này thường xuyên được update 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, trọn vẹn có thể xuất phát từ nguyên nhân là website của bạn không được update lên phiên bản mới.
Shortcode là gì?
Một trong những tính năng độc lạ của WordPress là shortcode (tạm dịch: Mã ngắn/chuỗi số ngắn). Sử dụng shortcode, bạn cũng trọn vẹn có thể tạo ra nhiều hiệu suất cao tùy biến. Từ đó, người tiêu dùng trọn vẹn có thể sử dụng trong nội dung của nội dung bài viết hoặc widget thậm chí còn 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 trách nhiệm nào đó của shortcode đã được bạn định sẵn trong lúc tạo.
Trong nội dung 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ó hiệu suất cao tạo nhanh 1 icon những hình 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 ”;
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 trọn vẹn có thể khai báo nội dung bằng phương pháp 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=”
‘;
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(‘ ‘ + linkElm.getAttribute(‘data-mce-alt’) + ‘ ‘);
this.hide();
,
tooltip: ‘Emoticons’
);
);
Bước 4: Bạn khai báo tương tự css cho hình 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 in như sau :Cuối cùng, bạn truy vấn lại trình sửa đổi editor classic của WordPress. Bạn sẽ thấy hình tượng tạo shortcode icon bạn vừa tạo ra. Lúc này, bạn cũng trọn vẹn có thể chọn nhanh shortcode hình tượng icon khuôn mặt mà bạn vừa tạo ra.
Chúc bạn thêm nút shortcode vào TinyMCE thành công xuất sắc nhé!
Mọi thắc mắc và góp ý tương quan, xin vui lòng liên hệ ngay TinoHost để được tư vấn rõ ràng hoặc Fanpage để update những thông tin mới nhất nhé!
Với bề dày kinh nghiệm tay nghề hơn 5 năm phục vụ hosting, dịch vụ cho thuê sever, những dịch vụ tương quan đến tên miền và bảo mật thông tin website, hãy để TinoHost sát cánh cùng bạn trên con phố xác lập thương hiệu trên map công nghệ tiên tiến toàn thế giới!
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í MinhVăn phòng đại diện thay mặt thay mặt: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí MinhĐiện thoại: 0364 333 333Tổng đài miễn phí: 1800 6734Email: [email protected]: www..org
Website:
Tags: thêm nút shortcode vào TinyMCE
Video Hướng dẫn thêm nút shortcode vào TinyMCE mới nhất?
Pro đang tìm kiếm từ khóa Hướng dẫn thêm nút shortcode vào TinyMCE 2022-11-04 01:33:41 san sẻ Mẹo Hướng dẫn trong nội dung bài viết một cách Mới Nhất.
#Hướng #dẫn #thêm #nút #shortcode #vào #TinyMCE Hướng dẫn thêm nút shortcode vào TinyMCE
===> Nếu bạn có thắc mắc hay yếu tố gì nội dung bài viết trọn vẹn có thể để lại phản hồi cuối bài nha.