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

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' );

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.