Shortcode trong WordPress từ A đến Z

Khi làm việc với WordPress các bạn sẽ được tiếp cận với 1 thuật ngữ nữa có tên là shortcode. Thuật ngữ này bạn sẽ sử dụng rất nhiều khi cài các plugin vào website WordPress. Trong bài viết này, tôi sẽ chia sẻ cho các bạn hiểu rõ về shortcode, cách sử dụng, cách tự tạo shortcode cho riêng mình.

Shortcode là gì?

Bạn sẽ thấy shortcode gần giống như các cặp thẻ html, nó chỉ khác là dùng dấu ngoặc vuông. Chúng ta có hiểu shortcode là những code ngắn được định nghĩa ra để hiển thị những đoạn code dài, phức tạp. Thường được chèn vào nội dung, text widget, themes (Chèn vào file PHP).

Hiện nay, các shortcode phổ biến đều đã có các plugin hỗ trợ. Bạn chỉ cần tìm và cài plugin là có thể sử dụng các shortcode mà mình mong muốn.

Cách sử dụng Shortcode

Để chèn shortcode, bạn chỉ cần copy shortcode và paste vào khu vực muốn chèn.

Ví dụ:

[slider id="1"]

[box]Nội dung[/box]

Mặc định phần nội dung bài viết, trang của WordPress có hỗ trợ sẵn việc hiển thị shortcode, nên bạn chỉ cần chèn shortcode vào khung soạn thảo là được.

Nếu chèn shortcode vào khung soạn thảo bài viết mà khi xem nội dung trên trang web không hiển thị bạn cần kiểm tra lại theme có gọi hàm the_content() hay không?

Hiển thị shortcode trong Text Widget

Trong một số theme không hỗ trợ hiển thị Shortcode trong Text Widget. Để khắc phục vấn đề này, bạn chỉ cần chèn đoạn code sau vào file functions.php của theme bạn đang sử dụng.

add_filter('widget_text', 'do_shortcode');

Hiển thị shortcode trong file PHP

Để hiển thị shortcode trong file PHP, bạn cần phải gọi qua hàm do_shortcode() để shortcode hiển thị.

<?php
echo do_shortcode('[ten_shortcode]');
?>

Cách tạo Shortcode cho riêng mình

Trong một số trường hợp, các shortcode có sẵn không đáp ứng được yêu cầu của bạn, bạn cần phải tự tạo shortcode cho riêng mình. Trong WordPress cho phép chúng ta tạo shortcode thông qua hook add_shortcode

Để tạo shortcode, chúng ta cần phải làm những công việc sau:

• Tạo hàm để thực thi shortcode
• Tạo tên shortcode dựa vào hàm đã tạo

Các bạn bỏ đoạn code sau vào file functions.php của theme đang dùng:

<?php
function create_shortcode_box(){
return '<div class="box">Nội dung ở đây</div>';
}

add_shortcode('box', 'create_shortcode_box');
 ?>

Với ví dụ trên, bạn chỉ cần chèn shortcode [box] vào khu vực muốn hiển thị bạn sẽ thấy shortcode hiển thị.

Như vậy:

• box: Tên shortcode cần tạo
• create_shortcode_box: Tên hàm thực thi shortcode

Trong hàm thực thi bạn thấy tôi viết là return. Nếu bạn thay thành echo thì nội dung sẽ hiển thị lên đầu trang, chứ không hiện tại vị trí chúng ta chèn shortcode.

Cho nên:

• Trong shortcode hãy thay thế echo thành return (Kể cả với HTML)
• Nếu HTML nhiều quá, hãy gán tất cả vào 1 biến của PHP

Khi HTML quá nhiều, bạn sẽ thấy việc gán vào biến PHP khá rối và dễ bị nhầm. Tiếp theo, tôi xin chia sẻ kỹ thuật sử dụng ob_get_contents() để đưa tất cả echo vào 1 biến PHP.

<?php 
function create_shortcode_box(){
ob_start();
?>
<div class="box">Nội dung ở đây</div>
<?php
$result = ob_get_contents();
ob_end_clean();
return $result;
} 
add_shortcode('box', 'create_shortcode_box'); 
?>

Khi nhìn vào đoạn code trên bạn sẽ thấy tất cả nội dung hiển thị trong cặp ob_start() và ob_end_clean() sẽ được đưa vào biến $result thông qua hàm ob_get_contents()

Tạo shortcode có nội dung

Shortcode có nội dung là loại shortcode có thẻ mở, thẻ đóng như các thẻ HTML và có nội dung ở giữa cặp mở và đóng

Ví dụ: [box]Nội dung ở đây[/box]

Để tạo shortcode có nội dung bạn chỉ cần thêm tham số $content vào phần viết hàm thực thi.

<?php 
function create_shortcode_box($content){ 
	ob_start(); 
	?> 
	<div class="box"><?php echo $content; ?></div>
	<?php 
	$result = ob_get_contents(); 
	ob_end_clean(); 
	return $result; 
} 
add_shortcode('box', 'create_shortcode_box'); ?>

Tạo shortcode có tham số

Cũng giống như HTML, shortcode cũng có tham số như các thuộc tính của HTML. Điều này giúp shortcode linh hoạt hơn về chức năng.

Ví dụ: [box color="red" bgcolor="blue"]Nội dung[/box]

Trong ví dụ trên:

• color, bgcolor là 2 tham số
• Nội dung ở giữa cặp mở và đóng là nội dung cần hiển thị

Để làm được điều này, bạn hãy tham khảo đoạn code dưới đây:

<?php 
function create_shortcode_box($args, $content){ 
	ob_start(); 
	?> 
	<div class="box" style="color: <?php echo $args['color']; ?>; background: <?php echo $args['bgcolor']; ?>;"><?php echo $content; ?></div>
	<?php 
	$result = ob_get_contents(); 
	ob_end_clean(); 
	return $result; 
} 
add_shortcode('box', 'create_shortcode_box'); ?>

Bạn sẽ thấy hàm thực thi được thêm tham số $args, và khi định nghĩa các tham số bạn chỉ cần truyền key của mảng $args.

Giả sử: Tôi viết $args['color'], khi gọi shortcode tham số sẽ là color

Chú ý: Nếu bạn muốn tạo 1 shortcode chỉ có tham số mà không có nội dung bạn vẫn cần phải truyền vào cả $args và $content. Nếu không nó sẽ hiểu là $args là content.

Kết luận

Trên đây tôi đã chia sẻ cho các bạn hiểu về shortcode, ý nghĩa, cách sử dụng và hơn hết là cách tự tạo shortcode của riêng mình để phục vụ dự án.

Nếu có bất kỳ câu hỏi nào về vấn đề này, vui lòng comment dưới bài viết này.