[WordPress] Thêm Shortcode vào trình soạn thảo TinyMCE

Hi mọi người!

Cũng đã rất lâu rồi tôi mới lại có bài viết về mục WordPress này, những bài viết trên blog chủ yếu là chia sẻ những kinh nghiệm, thủ thuật để giải quyết những vấn đề mà tôi gặp phải trong quá trình làm dự án. Tuần trước tôi được yêu cầu chèn Shortcode vào trình soạn thảo TinyMCE để khách hàng dễ dàng thêm những Buttons, Images…họ muốn vào nội dung bài viết. Và hôm nay tôi sẽ chia sẻ với các bạn những gì tôi đã làm.

Trước tiên, như thường lệ, chúng ta hãy cùng làm quen với một số khái niệm cơ bản về Shortcode nhé.

1, Shortcode là gì ?

Shortcode là một tính năng mạnh mẽ, độc đáo của WordPress dùng để định nghĩa một đoạn code hay một hàm (function) nào đó và thường gói gọn trong một vài từ đơn giản (những từ này hoàn toàn do bạn tự định nghĩa). Vì sự tùy biến cao nên đa số Shortcode thường được dùng để chèn vào nội dung bài viết để làm bài viết đó trở nên phong phú, hấp dẫn hơn.

Dưới đây là một số tutorial giới thiệu về Shortcode khá hay và cơ bản mà các bạn có thể tham khảo thêm

• Shortcode API — WordPress
• How to create your own WordPress shortcodes
• How to Add A Shortcode in WordPress?
• Toàn tập về shortcode trong WordPress
• WordPress Tut — Shortcode
• Giới thiệu về ShortCode

2, Cách sử dụng và mục đích của Shortcode

Để sử dụng Shortcode khá đơn giản, bạn chỉ cần sử dụng theo cú pháp sau

// Dạng 1

[shortcode-của-bạn] // Dạng 2 [shortcode-của-bạn thuộc-tính] // Dạng 3 [shortcode-của-bạn]nội dung bạn muốn chèn[/shortcode-của-bạn] // Dạng 4 [shortcode-của-bạn thuộc-tính-1=”” thuộc-tính-2=””][/shortcode-của-bạn] // Dạng 5 [shortcode-của-bạn thuộc-tính=””]nội dung bạn muốn chèn[/shortcode-của-bạn]

Mục đích sử dụng Shortcode là giúp cho việc tùy biến cho trang web trở nên đơn giản và linh hoạt hơn. Điều này rất có ý nghĩa cho những người không biết nhiều về lập trình. Vì sao ư ? Để trả lời câu hỏi này, tôi sẽ minh họa với ví dụ sau.

Giả sử bạn có 1 trang web bán hàng và mỗi bài viết là danh sách các mặt hàng nào đó. Khi đó mỗi sản phẩm xuất hiện được bạn chèn vào một thẻ DIV như sau

woocommerce marketing automation

<div class="product">
<div class="header">
<img src="../images/thumbnail.png" title="Hình-đại-diện-sản-phẩm" alt="Hình-đại-diện-sản-phẩm" width="" height="" />
<span class="Title">Tên-sản-phẩm<span>
</div>
<div class="content">
Mô-tả-sản-phẩm
</div>
</div>

Để tạo mới 1 sản phẩm nào đó, khách hàng của bạn, những người không hiểu biết nhiều lập trình, phải “vật lộn” với đống code đó. Giải pháp khả thi trong trường hợp này là dùng Shortcode. Đó cũng là lí do mà tôi phải chèn Shortcode vào trình soạn thảo TinyMCE để khách hàng của tôi dễ dàng chèn những gì họ muốn.

Các bạn hãy xem hình ảnh minh họa dưới đây

Với Shortcode các bạn hoàn toàn có thể tùy chỉnh các thuộc tính theo ý mình. Với hình minh họa này, chúng ta có thể thay đổi các giá trị width, height, align…Thật dễ dàng và tiện lợi, phải không các bạn ? 🙂

3, Thêm Shortcode vào trình soạn thảo TinyMCE

Trước khi bắt tay vào code, tôi cần các bạn chuẩn bị những thứ sau đây:

+ Tạo các file và folder cần thiết trong thư mục theme như sau

+ wp-content
+ themes
+ your-theme-folder
+ images
- insert_shortcode_tinymce.png
+ js
- custom.js
- function.php
- style.css

+ Sau khi đã tạo các file và folder, các bạn hãy dành chút thời gian đọc lướt qua hàm add_shortcode để hiểu hơn về code của tôi.

Nếu các bạn đã có những kiến thức cơ bản về Shortcode thì bây giờ chúng ta sẽ đi vào phần trọng tâm của bài viết hôm nay.

Tôi sẽ tạo 1 Shortcode mà cho phép người dùng chèn 1 Button với nội dung tùy thích vào nội dung bài viết. Và tôi đã làm như sau:

a) Đăng kí Shortcode trong WordPress

Bạn mở file funciton.php và chèn đoạn code sau đây

//Add Shortcode
add_shortcode("create_custom_button", "create_custom_button");
function create_custom_button( $atts, $content = null ) {
$str = '<div id="custom_button">'. $content .'</div>';
return $str;
}
//Hook shortcode into TinyMCE - WordPress
add_action('init', 'add_button');
function add_button() {
if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) {
add_filter('mce_external_plugins', 'add_plugin');
add_filter('mce_buttons', 'register_button');
}
}
function register_button($buttons) {
array_push($buttons, "create_custom_button");
return $buttons;
}
function add_plugin($plugin_array) {
$path = get_bloginfo('template_url') . '/js/custom.js';
$plugin_array['create_custom_button'] = $path;
return $plugin_array;
}

b) Chèn icon của Shortcode vào trình soạn thảo TinyMCE

Bạn thêm đoạn code dưới đây vào file js/custom.js

(function() {
//Insert Button Shortcode
tinymce.create('tinymce.plugins.create_custom_button', {
init : function(ed, url) {
ed.addButton('create_custom_button', {
title : 'Create New Custom Button',
image : url + '/../images/insert_shortcode_tinymce.png',
onclick : function() {
ed.selection.setContent('[create_custom_button]' + ed.selection.getContent() + '[/create_custom_button]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('create_custom_button', tinymce.plugins.create_custom_button);
})();

c) Tùy biến với những hiệu ứng đẹp mắt cho Button

Để làm cho Button của mình trở nên sinh động và lôi cuốn hơn thì phụ thuộc vào khả năng CSS của các bạn. Tôi đã mở file style.css và chỉnh CSS cho Button của tôi như sau

#custom_button {
width:180px;
height: auto;
padding: 10px;
text-align: center;
background-color: #21759B;
background-image: linear-gradient(to bottom, #2A95C5, #21759B);
border-color: #21759B #21759B #1E6A8D;
box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
color: #FFFFFF;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
font-size:14px;
}

4) Kiểm tra Shortcode

Sau khi chèn Shortcode vào trình soạn thảo TinyMCE, tôi thử tạo 1 bài viết mới như hình dưới

Và đây là nội dung bài viết khi sử dụng Shortcode

Hi vọng bài viết này sẽ giúp trang web của các bạn hấp dẫn và lôi cuốn hơn bằng cách sử dụng Shortcode. Thân ái!