Shortcode là API rất hay của WordPress, bạn có thể sử dụng shortcode để tạo ra nhiều chức năng tùy biến, từ đó 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. Bài viết này mình sẽ hướng dẫn cho bạn cách thêm nút shortcode vào thanh công cụ của trình soạn thảo WordPress.
Để thực hiện được bài viết này thì trước tiên bạn phải tìm hiểu Shortcode API của WordPress trước. Bạn hãy tạo ra một shortcode bất kỳ nào đó, tiếp theo bạn tiến hành thêm nút shortcode vừa tạo vào thanh công cụ của trình soạn thảo WordPress, việc này sẽ giúp bạn giảm thiểu thời gian khi phải nhớ nhiều shortcode.
function hocwp_custom_shortcode_mce_button_init() {
if(!current_user_can('edit_posts') && !current_user_can('edit_pages') && get_user_option('rich_editing') == 'true') {
return;
}
add_filter('mce_external_plugins', 'hocwp_custom_shortcode_script');
add_filter('mce_buttons', 'hocwp_custom_add_shortcode_button');
}
add_action('init', 'hocwp_custom_shortcode_mce_button_init');
function hocwp_custom_shortcode_script($plugin_array) {
$plugin_array['hocwp_shortcode'] = '/js/duong-dan-thu-muc-toi-tap-tin-script/shortcode.js';
return $plugin_array;
}
function hocwp_custom_add_shortcode_button($buttons) {
$buttons[] = 'hocwp_shortcode';
return $buttons;
}
Bạn mở tập tin functions.php của giao diện lên và thêm vào đoạn code bên trên. Đoạn code này với chức năng chạy hook khai báo script và thêm nút của bạn vào danh sách mce_buttons.
Trong đoạn code bên trên bạn để ý thấy có tải tập tin shortcode.js, trong tập tin này bạn thêm nội dung như bên dưới. Nhớ là chỉnh sửa lại thông tin cho phù hợp với shortcode của bạn.
jQuery(document).ready(function($) {
tinymce.create('tinymce.plugins.hocwp_shortcode_plugin', {
init: function(ed, url) {
ed.addCommand('hocwp_insert_shortcode', function() {
var selected = tinyMCE.activeEditor.selection.getContent(),
content = '';
if(selected) {
content = '[hocwp_shortcode]' + selected + '[/hocwp_shortcode]';
} else {
content = '[hocwp_shortcode]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
ed.addButton('hocwp_shortcode', {
title: 'Insert shortcode',
cmd: 'hocwp_insert_shortcode',
image: 'https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png'
});
}
});
tinymce.PluginManager.add('hocwp_shortcode', tinymce.plugins.hocwp_shortcode_plugin);
});
Bây giờ bạn thử tạo bài viết mới, bên trong thanh công cụ TinyMCE của trình soạn thảo sẽ có thêm nút shortcode của bạn với icon là hình kính lúp mình để ví dụ. Qua bài viết này thì bạn đã biết cách thêm một nút chức năng đơn giản vào thanh công cụ trình soạn thảo của WordPress rồi. Cứ như thế lần sau bạn dựa vào nội dung của bài này mà triển khai mở rộng thêm nhé, chúc bạn thành công.
