Cách tạo Shortcode từ A tới Z trong wordpress

Shortcode là gì? tại sao phải sử dụng shortcode?

Shortcode dịch theo đúng nghĩa tiếng việt là code ngắn hay gọi là một đoạn code ngắn. Đoạn code ngắn này sẽ thực thi những tác vụ gì đó mà bạn đã định sẵn trong quá trinh tạo shortcode, ví dụ hiển thị video youtube chằng hạn.

Bạn có thể thực thi shortcode này ở bất cứ đâu ngoại trừ excerpt và widget, nhưng mình sẽ hướng dẫn bạn khắc phục, đọc bài này: Chèn shortcode vào widget text trong wordpress

Một số hàm thao tác với shortcode

• add_shortcode
• shortcode_atts
• do_shortcode
• shortcode_parse_atts
• remove_shortcode
• strip_shortcodes

Cách tạo shortcode

Để tạo một shortcode gồm 2 bước chính:

• Thiết lập function thực thi code trong shortcode.
• Tạo một tên shortcode dựa vào function đã tạo cho nó.

Toàn bộ code trong bài viết này mình viết vào functions.php của theme.
Sử dụng hàm add_shortcode để tạo shortcode, với cú pháp:

add_shortcode($tag , $func);

Trong đó:

• $tag: chuỗi xác định tên shortcode, VD: myshortcode khi sử dụng: [myshortcode]
• $func: hàm sử lý shortcode.

//Khởi tạo function cho shortcode
function create_shortcode() {
        echo "Hello World!";
}
//Tạo shortcode tên là [test_shortcode] và sẽ thực thi code từ function create_shortcode
add_shortcode( 'test_shortcode', 'create_shortcode' );

– Hàm sử lý shortcode này sẽ in ra chữ “Hello World!”, nhớ rằng bạn có thể sử lý bất cứ công việc gì hiển thị ra frontend hoặc chỉ sử lý dữ liệu. Chèn mã shortcode vào nội dung bài viết, lúc này hàm sử lý shortcode được gọi, ví dụ mình sẽ thêm chuỗi sau vào bài viết.

[test_shortcode]

Khi view bài viết, chuỗi này sẽ được thay thế bởi chữ “Hello World!”. Nhưng có một vấn đề là chuỗi này luôn nằm ở đầu bài viết vì echo.

– Tại sao lại vậy? lý do trước hiển thị nội dung bài viết, wordpress kiểm tra và sử lý toàn bộ shortcode có trong bài viết rồi đưa vào mảng các nội dung được tách bởi shortcode theo đúng thứ tự rồi cuối cùng ghép lại với nhau. Vì lệnh echo là in chuỗi ngay ra frontend, nên kết quả là hiển thị ở đầu nội dung bài viết.
– Để tránh điều này hàm phải trả về giá trị. Sửa lại hàm trên như sau:

function create_shortcode() {
        return "Hello World!";
}

Về sau này khi viết shortcode tránh dùng echo hay print_r, var_dump,printf.

Tương tự, ta áp dụng thêm một xíu kiến thức về Loop và Query để tạo một shortcode hiển thị 10 bài ngẫu nhiên nhé.

< ?php
function create_shortcode_randompost() {
 
        $random_query = new WP_Query(array(
                'posts_per_page' => 10,
                'orderby' => 'rand'
        ));
 
        ob_start();
        if ( $random_query->have_posts() ) :
                "<ol>";
                while ( $random_query->have_posts() ) :
                        $random_query->the_post();?>
 
                                <li><a href="<?php the_permalink(); ?>"><h5>< ?php the_title(); ?></h5></a></li>
 
                < ?php endwhile;
                "</ol>";
        endif;
        $list_post = ob_get_contents(); //Lấy toàn bộ nội dung phía trên bỏ vào biến $list_post để return
 
        ob_end_clean();
 
        return $list_post;
}
add_shortcode('random_post', 'create_shortcode_randompost');
?>
</ol>

Ở đoạn code trên bạn nhìn thấy có ob_start, ob_end_clean và ob_get_contents, 2 lệnh này có tác dụng lấy nội dung in ra của php đưa vào biến nó thực sự hữu dụng nếu nội dung sử lý phức tạp html bạn không thể dùng nhiều echo sẽ gây rối mắt và khó kiểm xoát. Xem ví dụ đơn giản mình lưu chuỗi HTML vào biến, thỏa sức thiết kế HTML và không sợ đụng tới php.

< ?php
ob_start();
?>
<table border="1">
<tr>
   <td>row 1-col1</td>
   <td>row 1-col2</td>
</tr>
<tr>
   <td>row 2-col1</td>
   <td>row 2-col2</td>
</tr>
</table>
< ?php
$html=ob_get_contents();
ob_get_clean();
echo $html;
?>

Tạo shortcode sử dụng tham số

function create_shortcode_thamso($args, $content) {
        return "Đây là số ". $args['thamso1'];
}
add_shortcode( 'shortcode_thamso', 'create_shortcode_thamso' );

[shortcode_thamso thamso1="100]Đây là biến $content[/shortcode_thamso]

< ?php
function create_shortcode_tinhtong($args, $content) {
        $tong = $args['term1'] + $args['term2'];
        return "Tổng là ".$tong;
}
add_shortcode( 'tinhtong', 'create_shortcode_tinhtong' );
?>

[tinhtong term1="50" term2="30"]

function create_shortcode_content($args, $content) {
        return strtoupper($content); //In hoa toàn bộ content trong shortcode
}
add_shortcode('shortcode_content', 'create_shortcode_content');

Cách viết shortcode vào file PHP

Shortcode chỉ thực thi trong môi trường trình soạn thảo wordpress, trong môi trường code nó sẽ không hiểu, để chạy shortcode trong code php bạn sử dụng hàm do_shortcode.

< ?php do_shortcode('[test_shortcode]'); ?>

Cách viết shortcode vào widget Text

Xem bài viết này: /wordpress-site/chen-shortcode-vao-widget-text-trong-wordpress

Khai báo cố định các thuộc tính của shortcode.

< ?php
add_shortcode('get_hello','echo_hello');
function echo_hello($prop,$content){
     //note: $args xác định các thuộc tính mặc định, ngoài các thuộc tính này ra không chấp nhận.	
 	$args=array('thuoctinh1'=>'A1','thuoctinh2'=>'A2');
      $d=shortcode_atts($args,$prop);
       extract($d);		
	return 'text-here';
}
?>

Loại bỏ shortcode trong chuỗi nội dung.

Chúng ta có hàm strip_shortcodes để loại bỏ tất cả các mã shortcode trong chuỗi được truyền vào.

echo strip_shortcodes(get_the_content());

Sử dụng shortcode có sẵn

Trong phiên bản wordpress gần đây, có hỗ trợ sẵn một vài shortcode tiện ích. Xem tất cả các shortcode đã cài đặt bao gồm mặc định và những shortcodes tạo thêm bởi plugin…với công cụ sau:
https://wordpress.org/plugins/shortcode-reference

Nếu bạn có nhu cầu thiết kế web WordPress sử dụng shortcodes, hãy liên hệ với Hoàng nhé!
Chúc bạn học tốt.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook