Shortcode là gì? hướng dẫn tạo shortcode

Shortcode là một đoạn code ngắn, thực hiện các tác vụ đã được thiết lập sẵn. Đây là một tính năng vô cùng hữu hiệu mà các bạn lập trình viên cần nên biết. Hãy cùng với khóa học WordPress tìm hiểu shortcode là gì? Cách tạo shortcode nhé.

Khái niệm Shortcode là gì?

Shortcode dịch ra tiếng Việt nghĩa là Code ngắn hoặc có thể hiểu là một đoạn code ngắn. Đoạn code ngắn này sẽ thực hiện các tác vụ mà bạn đã thiết lập sẵn trong lúc tạo shortcode. Hiện nay, shortcode đang được sử dụng khá nhiều. Bạn có thể vào thư viện plugin của WordPress sau đó, tìm kiếm plugin với từ khóa shortcode là sẽ có rất nhiều plugin hỗ trợ cho bạn, hãy cùng chúng tôi tìm hiểu tiếp cách tạo shortcode nhé

Hướng dẫn tạo Shortcode

Sau khi đã biết shortcode là gì? Mình sẽ hướng dẫn bạn cách tạo shortcode. Toàn bộ phần code trong bài viết này, các bạn sẽ viết vào file functions.php của theme nhé.

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

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

Để bạn có thể dễ hình dung, mình sẽ đưa ra một mẫu tạo shortcode như thế này.

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

Các phần quan trọng mình đã comment vào code rồi. Có nghĩa là nếu bạn viết [test_shortcode] vào nội dung của bài viết thì nó sẽ hiển thị cụm từ Hello World! thay vì shortcode mà bạn vừa mới viết. Nhưng chữ Hello World! sẽ luôn ở đầu bài viết bởi vì chúng ta sử dụng lệnh echo. Nếu bạn muốn nó hiển thị ngay vị trí đặt shortcode, bạn nên sử dụng return thay cho echo. Bạn có thể thay echo “Hello World!” thành return “Hello World!”, sau này, khi viết shortcode, bạn cũng nên tránh dùng echo.

Để hiểu thêm shortcode là gì? Chúng ta cùng sử dụng kiến thức về Loop và Query để tạo một shortcode hiển thị 10 bài ngẫu nhiên nhé.

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

Từ đoạn 6 đến 16 mình viết loop trong hàm ob_start() và ob_end_clean(). Mục đích là mình sẽ wrap phần đó lại để mình sử dụng hàm ob_get_contents() vào biến $list_post, sau đó là return biến này ra mà thôi. Bây giờ, bạn viết shortcode [random_post] vào vị trí cần hiển thị danh sách bài ngẫu nhiên trong bài nữa là xong.

Hướng dẫn tạo Shortcode sử dụng tham số

Ở phần trên, chúng ta chỉ tìm hiểu shortcode là gì? và cách tạo shortcode đơn giản, có nghĩa là nó chỉ hiển thị chính xác những gì chúng ta đã viết vào shortcode nhưng lại không cho phép chỉnh sửa lại theo ý muốn của người sử dụng. Nếu bạn muốn người dùng có thể tự chỉnh sửa lại những gì đã hiển thị ra thì chúng ta phải dùng đến các tham số.

Ví dụ, ở đoạn shortcode ở phần trên chúng ta đã cho hiển thị 10 bài viết ngẫu nhiên. Nhưng nếu dùng tham số, chúng ta có thể cho người dùng chỉnh lại tham số tại phần số lượng bài viết được hiển thị ra và có thể thay đổi thứ tự sắp xếp nếu muốn.

Để tạo đoạn shortcode có chứa tham số, chúng ta tạo lại shortcode như sau:

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

Ở phần tạo function, chúng ta có 2 tham số là $args và $content. Biến $args có nghĩa là tham số trong shortcode và $content có nghĩa là đoạn nội dung được bọc trong code. Ví dụ:

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

Chúng ta có thamso1 là tham số và 100 có nghĩa là giá trị của tham số người dùng có thể đặt bất kỳ. $content là phần nội dung được bọc bên trong shortcode, nhưng tại đoạn trên mình không dùng biến $content để in nên nếu bạn có viết như vậy thì phần $content cũng chưa hiển thị ra được.

Bây giờ bạn viết shortcode trên vào bài thì nó sẽ hiển thị là “Đây là số 100“. Đó cũng chính là shortcode có chứa tham số.

Tương tự, mình có một ví dụ làm một shortcode tính tổng như sau.

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

Khi viết shortcode, ta sẽ viết như sau:

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

Kết quả sẽ trả về là “Tổng là 80“.

Và thêm một ví dụ có dùng biến $content:

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

Bây giờ bạn hãy thử viết trong bài shortcode này:

[shortcode_content]Viết cái gì đó vào đây[/shortcode_content]

Có phải nó đã in hoa toàn bộ chữ trong phần nội dung của shortcode không? Tại sao ở ví dụ trên mình chỉ dùng $content mà cần phải khai báo cả $args? Bởi vì, nếu như bạn chỉ khai báo một tham số thì mặc định nó sẽ tự hiểu rằng biến đó chính là tham số thứ nhất, nên bạn nên khai báo cả 2 biến, tất nhiên, bạn có thể đặt tên bất kỳ.

Tóm lại:

• $args sẽ có cấu trúc tham số dạng $args[‘thamso’], và chữ thamso là tham số trong shortcode mà bạn phải ghi giống vậy.
• $content là biến in toàn bộ nội dung được đặt giữa thẻ mở shortcode và thẻ đóng shortcode.

Hướng dẫn viết Shortcode vào file PHP

Nếu bạn biết shortcode là gì? Thì bạn cũng cần biết shortcode chỉ được thực thi trong trình soạn thảo của WordPress, ở các hoàn cảnh khác nó sẽ không hiểu. Do vậy, nếu bạn muốn chèn shortcode vào file PHP thì bạn phải dùng hàm do_shortcode() để nó thực thi. Ví dụ:

Hướng dẫn viết Shortcode vào Widget Text

Widget Text mặc định sẽ không cho bạn chèn shortcode, nếu muốn nó thực thi thì bạn chỉ cần filter lại nó là xong. Bạn hãy chèn đoạn sau vào file functions.php

add_filter('widget_text', 'do_shortcode');

Như vậy là chúng ta đã cùng nhau tìm hiểu shortcode là gì? 1 số cách tạo shortcode. Hãy để lại bình luận của các bạn cho khóa học WordPress nếu có gì thắc mắc nhé