Shortcode WordPress – Hướng dẫn tạo shortcode

Home / Shortcode WordPress – Hướng dẫn tạo shortcode
Shortcode wordpress giúp bạn hiện thị nội dung động vào website thông qua post, page hoặc custom post type. Shortcode sẽ rất hữu ích nếu bạn muốn hiển thị một vấn đề hay nội dung nào đó trong website lên bất kì vị trí nào trong website thông post, page…

1. Khởi tạo shortcode

function create_my_shortcode(){ 
echo "Đây là shortcode đầu tiên của tôi"; 
} 
add_shortcode( 'my-shortcode', 'create_my_shortcode' ); 
// Giờ bạn chỉ việc in ra theo cú pháp [my-shortcode]

Để chèn hiển thị câu chào “Đây là shortcode đầu tiên của tôi” ra chỗ nào thì bạn chỉ việc chèn [my-shortcode] lên vị trí đó khi soạn thảo post hoặc page..
Bạn cũng có thể thêm các thẻ html vào shortcode

function create_my_shortcode(){
   echo "<div calss='my-shortcode'>Đây là shortcode đầu tiên của tôi<div>";
}
add_shortcode( 'my-shortcode', 'create_my_shortcode' );
// Giờ bạn chỉ việc in ra theo cú pháp [my-shortcode]

Khi thêm các thẻ html thì sẽ tiện hơn cho các bạn style nó trong css.

2. Tạo shortcode có chứa tham số

function begin_shortcode_variable($args, $content) { 
return "Đây là số ". $args['variable1']; 
} 
add_shortcode( 'variable', 'begin_shortcode_variable' ); 
//cách gọi: [variable variable1="10] Đây là biến $content[/variable] 

Vậy khi bạn gọi shortcode [variable variable1=”10] Đây là biến $content[/variable] thì nó sẽ hiển thị “Đây là biến 10”

3. Áp dụng shortcode vào tính toán

function sum_variable($args, $content) {
        $sum = $args['var1'] + $args['var2'];
        return "<div class='tinh-tong'>Tổng của".$args['var1']." và ".$args['var1']." là: ".$sum."</div>";
}
add_shortcode( 'sum-item', 'sum_variable' );
// Cách gọi : [sum-item var1="20" var2="30"] 

Khi bạn gọi [sum-item var1=”20″ var2=”30″] thì sẽ hiển thị văn bản: “Tổng của 20 và 30 là 50”

4. Sử dụng biến $content

function uppercase_content($args, $content){
 return  strtoupper($content);
}
add_shortcode( 'uppercase-content', 'uppercase_content' );

Vậy khi bạn viết một đoạn văn bản nào đó mà muốn in hoa thì bạn chỉ cần gọi shortcode trên theo cú pháp:
[uppercase-content]Viết hoa nội dung này[/uppercase-content]

5. Gọi shortcode vào file php

 echo do_shortcode('[short-code]');// Xem mục 6 

6. Viết shortcode gọi menu theo name slug vào bài viết hoặc trang

function print_menu_items($atts, $content = null) {
    extract(shortcode_atts(array('name' => null), $atts));
    return wp_nav_menu( array( 'menu' => $name,'echo' => false ) );
}
add_shortcode('call-menu-exam', 'print_menu_items');
// Cách gọi: [call-menu-exam name="main-menu"]

Như vậy khi muốn gọi menu nào vào bất kì vị trí nào trong bài viết thì bạn chỉ việc sử dụng shortcode và điền đùng tên name slug vào, ở ví dụ trên thì mình sẽ gọi menu có name slug là main-menu.

Để tìm ra name slug của 1 menu thì bạn vào Appearance » Menu. Menu có tên là “Liên kết nhanh” thì name slug sẽ là “lien-ket-nhanh” .
Để gọi menu vào bất kì vị trí nào trong file php bạn làm như mục 5:

 
echo do_shortcode('[call-menu-exam name="main-menu"]'); 

7. Viết shortcode chứa shortcode hoặc có chứa nhiều thành phần khác bên trong

function shortcode_wrap( $atts, $content = null ) {
   return '<div class="shortcode_wrap">' . do_shortcode($content) . '<div>';
}
add_shortcode('wrap', 'shortcode_wrap');
//[wrap]Nội dung hoặc shortcode khác [/wrap]

Như vậy khi bạn gọi [wrap]Nội dung hoặc shortcode khác [/wrap] thì toàn bộ nội dung văn bản và cả nội dung của shortcode con bên trong cũng được hiển thị. Nếu bạn không có hàm do_shortcode($content) thì shortcode của bạn sẽ không chứa shortcode khác hoặc các thành phần phức tạp của content bên trong được.

Trên đây là những chia sẻ của mình về cách tạo và sử dụng shortcode wordpress, bạn có thể tìm hiểu thêm Shortcode API nếu bạn nào có thắc mắc gì thì cứ để lại comment bên dưới để được giúp đỡ.
Bài viết trước
Tắt thông báo update plugin của wordpress
Bài viết tiếp theo
Wordpress Editor - Thêm nhiều lựa chọn khi soạn thảo

    Đăng kí nhận thông tin

    Đăng ký ngay để nhận được những thông tin khi có bài viết mới!