Cách tạo shortcode đơn giản trong WordPress

Cập nhật lần cuối: 20 Tháng Năm 2017

WordPress

2,042 Lượt xem

Shortcode được tối ưu để giúp người dùng dễ dang sử dụng mà không cần phải chèn quá nhiều các đoạn code thô. Shortcode trong wordpress được rất nhiều các Plugin sử dụng như để chèn các thông tin cần thiết vào các vùng ưu thích. Trong bài viết này mình sẽ giới thiệu đến bạn cách tạo ra shortcode từ a-z giúp bạn có thể phát triển themes của mình tốt hơn.

Tạo hàm và add shortcode

Thông thường cũng như viết các chức năng khác, bạn phải tạo ra một hàm và móc cái hàm đó vào một cái hook. shortcode cũng là một cái acction hook trong wordpress có tên là add_shortcode. với 2 tham số là tên shortcode và tên hàm cần móc. Cấu trúc add_shortcode($tagname, $function). Shortcode cũng có 2 dạng đó là không truyền tham số và truyền tham số. Cụ thể như sau.

Hàm shortcode bình thường

Shortcode này không có gì đặt biệt, tuy nhiên nó được sử dụng rất nhiều để người dùng dễ dàng gọi ra các chức năng mà không cần thêm bớt gì trong đoạn shortcode. Cấu trúc hàm và móc hook như sau:

function ham_shortcode() {

}
add_shortcode( 'tenshortcode', 'ham_shortcode' );

Hàm shortcode có truyền tham số

Shortcode có tham số cho khả năng tùy chỉnh cao hơn shortcode thông thường. Giả sử để lấy ra một loạt các bài viết nhưng bạn có thể lựa chọn được việc lấy nó ở danh mục nào theo ID hoặc số lượng hiển thị là bao nhiêu, cho phép hiển thị những gì,…. Các này xuất hiện rất nhiều trên các themes tùy biến cao. Cấu trúc như sau:

function ham_thamso($thamso, $noidung) {

}
add_shortcode( 'tenshortcodethamso', 'ham_thamso' );

Cách sử dụng shortcode trong WordPress

Sử dụng shortcode cũng có 2 cách sử dụng là sử dụng trong bài viết và sử dụng trong file PHP.

Sử dụng shortcode trong bài viết.

Đối với shortcode bình thường bạn chỉ cần chèn đoạn shortcode ngắn như thế này: [tenshortcode] là xong. Đối với shortcode có tham số thì bạn có 2 cách sử dụng.

Cách 1: truyền các tham số bình thường: ví dụ: [tenshortcodethamso thamso1=”giá trị 1″ thamso2=”giá trị 2″]. các giá trị này sẽ được gán vào biến mảng $thamso nên trong hàm các bạn lấy giá trị ra sẽ có biến $thamso[‘thamso1’].
Cách 2: truyền các tham số kèm nội dung: ví dụ: [tenshortcodethamso]nội dung[/tenshortcodethamso]. Ví dụ này không chèn tham số, nhưng có chèn nội dung. Nội dung này sẽ được đưa vào biến $noidung trong hàm để xử lý.

Sử dụng shortcode trong tệp file PHP

Đôi khi bạn cũng muốn cố định các shortcode để nó tự động được hiển thị mà không cần phải thao tác gì thêm. Ví dụ như mình hay dùng các Plugin tạo form, và nó chỉ cung cấp các dạng shortcode mà không có hàm nên buột phải sử dụng một hàm của WordPress để làm việc này, đó là hàm do_shortcode().

Cách sử dụng đơn giản là bạn chỉ cần chèn nó vào hàm này là xong vd như <?php echo do_shortcode(‘[tenshortcode]’); ?>

Sử dụng shortcode trong widget

Widget của WordPress không cho phép chạy shortcode, không chèn được PHP, vì thế để có thể sử dụng được shortcode trong đây bạn phải add vào một cái bộ lọc có tên do_shortcode cho phép nó thực thi shortcode. Hàm add bộ lọc đó như sau: add_filter(‘widget_text’, ‘do_shortcode’);

Tạo button add shortcode trong trình soạn thảo của WordPress

Có một điều rất bất tiện đó là trước đây mình tạo các shortcode theo yêu cầu của khách hàng nhưng khi họ sử dụng thì liên tục gọi mình vì không nhớ các đoạn shortcode đó, thâm chí đến mình cũng không nhớ được rồi phải mở lại file function xem. Lúc đó cũng tính tới việc viết một cái nút để họ tiện việc chèn nhưng mà mình bận quá, hơn nữa khách hàng không yêu cầu, vì cái shortcode này mình bonus cho họ thôi. Tuy nhiên nếu bạn viết themes cho mình hoặc cho người nào đó mà dùng shortcode đừng quên làm việc này nhé. Đoạn code đầy đủ như sau:

Tạo nút button trong Text Editor (văn bản) của WordPress

function shortcode_button() 
{
   if(wp_script_is("quicktags"))
  {
  ?>
   <script type="text/javascript">
    function getSel()
   {
     var txtarea = document.getElementById("content");
     var start = txtarea.selectionStart;
     var finish = txtarea.selectionEnd;
     return txtarea.value.substring(start, finish);
   }

   QTags.addButton( 
                            "code_shortcode", 
                            "Chèn Shortcode", 
                            callback
   );

   function callback()
   {
     var selected_text = getSel();
     QTags.insertContent("[tenshortcode]" + selected_text + "[/tenshortcode]");
   }
   </script>
 <?php
   }
}
add_action("admin_print_footer_scripts", "shortcode_button");

Đoạn code trên bạn cần để ý đến cái tên của nút và cái chỗ QTags.insertContent, thôi còn lại mình sẽ không nói ở đây. Sau khi add cái này thì bạn có thể thấy như sau:

Tuy nhiên nó chỉ hiển thị và sử dụng được trong phần Text Editor (văn bản) thôi, còn phần trực quan (Visual Editor) thì không. Để thêm nút vào phần trực quan bạn có thể sử dụng Plugin nhé. Ở đây mình không viết phần đó vì nó khá dài.

Chúc bạn thành công.