Mục lục

Cách tạo Shortcode WordPress từ A đến Z năm 2022

Tạo Shortcode WordPress là cách đơn giản để bạn có thể thêm thắt nhiều yếu tố quan trọng vào Website của mình mà không cần phải chỉnh sửa code. Hôm nay, ATP Web sẽ hướng dẫn bạn Cách tạo Shortcode WordPress từ A đến Z năm 2022.

Shortcode là gì?

Shortcode dịch theo đúng tiếng Việt nghĩa là Code ngắn hay nói cách khác 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ì đấy mà bạn đã định sẵn trong quá trình tạo shortcode, ví dụ như hiển thị một Loop chẳng hạn. bạn sẽ thực thi shortcode này ở bất cứ đâu như trong bài viết, trong theme, ngoại trừ excerpt và widget, tuy nhiên mình sẽ có cách chỉ dẫn bạn khắc phục.

Bây giờ shortcode được dùng khá phổ biến, bạn có thể vào thư viện plugin WordPress và tìm plugin với Keyword shortcode ra là có rất nhiều plugin hỗ trợ bạn sẵn một số shortcode đủ yêu cầu, nào là trang trí bài viết, nào là làm các công việc phức tạp hơn. Và trong nhiều theme, nó cũng có khả năng hỗ trợ sẵn một vài shortcode của nó.

Cách tạo Shortcode WordPress từ A đến Z
Cách tạo Shortcode WordPress từ A đến Z

Cách tạo Shortcode WordPress từ A đến Z

Phần nhiều code trong bài này bạn viết vào tệp functions.php của theme nhé.

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

  • Cài đặt function thực thi code trong shortcode.
  • Tạo một tên shortcode dựa vào function đã tạo cho nó.

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

//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’ );

Những gì quan trọng mình đã comment hết vào code rồi. có nghĩa là lúc này nếu như bạn viết [test_shortcode] vào nội dung bài viết thì nó sẽ xuất hiện cụm từ Hello World! Thay cho cái shortcode bạn vừa viết.

Nhưng có một vấn đề là cái chữ Hello World! Nó sẽ thường xuyên ở đầu bài content do chúng ta sử dụng lệnh echo. nếu mong muốn cho nó hiển thị ngay đúng vị trí đặt shortcode, bạn nên dùng cú pháp return thay vì echo. bạn có thể sửa echo “Hello World!” thành return “Hello World!” nhé và sau này khi viết shortcode, tránh dùng echo.

Cách tạo Shortcode WordPress từ A đến Z
Cách tạo Shortcode WordPress từ A đến Z

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é.

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%20the_permalink();%20?>”><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’);

Bạn có thể thấy từ đoạn 08 đến 21 mình viết loop bên trong hàm ob_start() và ob_end_clean(). bản chất ở đây mục đích của mình không phải là cache gì cả mà mình sẽ wrap phần đấy lại để mình vận dụng hàm ob_get_contents() vào biến $list_post, sau đấy là return cái biến này ra mà thôi vì khi làm shortcode mình phải dùng return mà. nếu như ai có cách nào hay hơn thì cho mình biết nhé.

Bây giờ thì bạn viết shortcode [random_post] vào vị trí mà bạn phải cần hiển thị danh sách bài ngẫu nhiên trong bài là xong.

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

Ở phần trước chúng ta chỉ tìm hiểu qua cách để tạo một shortcode dễ dàng, nghĩa là nó chỉ hiển thị y chóc những gì ta đã viết vào shortcode mà không cho phép chỉnh lại theo ý muốn của người sử dụng. nếu như bạn muốn cho quý khách hàng có thể tự sửa lại những gì hiển thị ra thì ở đây chúng ta phải sử dụng các tham số.

Cách tạo Shortcode WordPress từ A đến Z
Cách tạo Shortcode WordPress từ A đến Z

VD, ở đoạn shortcode trên chúng ta đã cho hiển thị 10 bài content ngẫu nhiên. nhưng nếu như khi dùng tham số, chúng ta có thể cho người dùng tùy biến lại tham số ở phần số lượng bài viết hiển thị ra và có thể tùy chọn thứ tự sắp xếp nếu như bạn mong muốn.

Để tạo shortcode có chứa tham số, 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’ );

Trước tiên là ở phần tạo function, ta có hai tham số là $args và $content. Biến $args nghĩa là tham số trong shortcode và biến $content nghĩa là đoạn nội dung được bọc trong code. Bạn xem ví dụ dưới:

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

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

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

Tương tự, mình có một ví dụ rất cơ bản như sau, ta làm một shortcode tính tổng chẳng hạn.

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

Và 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“. Right?

Và thêm một VD có sử dụng biến $content nè.

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

Và bây giờ bạn thử viết trong bài shortcode này xem.

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

Có phải là nó đã in hoa đầy đủ chữ trong thông tin của shortcode không?

Thế thì, vì sao VD trên mình chỉ vận dụng $content mà phải khai báo cả $args? Bởi vì mặc định nếu như bạn chỉ khai báo một tham số thì nó sẽ tự hiểu biến đó chính là tham số thứ nhất, nên tốt nhất bạn nên khai báo cả 2 biến, dĩ nhiên bạn có thể đặt tên bất kỳ.

Cách tạo Shortcode WordPress từ A đến Z
Cách tạo Shortcode WordPress từ A đến Z

Tóm lại:

$args sẽ có cấu tạo tham số dạng $args[‘thamso’], và cái chữ thamso là tham số trong shortcode mà bạn phải ghi giống vậy.

$content là biến in ra phần nhiều thông tin được đặt giữa thẻ mở shortcode và thẻ đóng shortcode.

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

Shortcode chỉ thực thi trong trình soạn thảo của WordPress thôi chứ ở các hoàn cảnh khác nó không hiểu biết. vì lẽ đó nếu như bạn muốn chèn shortcode vào một tệp PHP thì phải vận dụng hàm do_shortcode() để nó thực thi. VD như sau:

<?php echo do_shortcode(‘[test_shortcode]’); ?>

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

Mặc định widget Text sẽ không cho bạn chèn shortcode vào, nếu như muốn nó thực thi thì bạn chỉ cần filter lại nó là xong. Chèn đoạn sau vào tệp functions.php

add_filter(‘widget_text’, ‘do_shortcode’);

Những ví dụ Điển hình để làm shortcode

Shortcode hiển thị video từ Youtube

Mặc định đoạn mã nhúng video từ Youtube sẽ có dạng.

[html]<iframe src=”//www.youtube.com/embed/0KJ60uJZ3-Q” height=”480″ width=”640″ allowfullscreen=”” frameborder=”0″></iframe>[/html]

Vậy thì ở đây chúng ta chơi luôn 3 tham số là:

  • Tham số nhập ID của clip.
  • Tham số chỉnh chiều rộng của clip.
  • Tham số chỉnh chiều ngang của clip.

Ok let’s do it!

function create_youtube_shortcode( $args, $content ) {
$content = ‘<iframe src=”//www.youtube.com/embed/’.$args[‘id’].’” height=” ‘.$args[‘height’].’” width=”’.$args[‘width’].’” allowfullscreen=”” frameborder=”0″></iframe>’;
return $content;
}
add_shortcode(‘youtube’, ‘create_youtube_shortcode’);

Và cách viết shortcode sẽ là thế này (xóa dấu / đi):

[/youtube width=”500″ height=”300″ id=”0KJ60uJZ3-Q”]

Nó sẽ tự truyền các tham số mà bạn đã nhập vào shortcode.

Chèn một box thông báo đủ màu sắc

Ví dụ này ta sẽ làm việc với $content trong shortcode.

function create_thongbao_shortcode($args, $content) {
return ”
<div class=’thongbao’>”.$content.”</div>
“;
}
add_shortcode( ‘thongbao’, ‘create_thongbao_shortcode’ );

Và thêm một xíu CSS vào file style.css nhé

.thongbao {
background: #585858;
padding: 1.5em 2em;
color: #FFF;
border: 1px solid #C7C7C7;
}

Ok, bây giờ bạn sẽ viết vào nội dung là [thongbao]Nội dung thông báo[/thongbao] rồi xem kết quả nhé.

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

thiet ke website tron goi tai Thanh pho Thu Duc.PNG
Thiết kế website tại ATPWeb
  • Website bán hàng ATPWeb giúp tối ưu hiệu quả SEO: Giúp bạn có một Website chuẩn SEO, khách hàng có thể tìm bạn trên Google một cách dễ dàng nhất.
  • 500+ giao diện Responsive đẹp mắt, tùy biến cao: Giúp bạn có một Website thân thiện, dù là bất cứ thiết bị nào Website sẽ cho họ một trải nghiệm mua hàng hấp dẫn.
  • Website tốc độ cao và băng thông không giới hạn: Giúp bạn có một Website tốc độ cao, khách hàng của bạn sẽ được trải nghiệm tốc độ load của một trang báo.
  • Dịch vụ cài đặt dễ dàng và nhanh chóng.
  • Tiết kiệm chi phí: Khi sử dụng dịch vụ thiết kế web trọn gói của ATPWeb bạn sẽ nhận được nhiều ưu đãi như: Kho bài viết, tài liệu, cẩm nang và khóa học miễn phí, khuyến mãi tùy theo từng gói dịch vụ, miễn phí các dịch vụ phát sinh và nhiều lợi ích khác.

ATPWeb – XÂY DỰNG NGÔI NHÀ ONLINE

Đánh giá bài viết post

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

LIÊN HỆ TƯ VẤN

Thiết Kế Web
BLOG
Đăng ký tư vấn
Thiết kế website
Đồng hành cùng ATP WEB

Đăng ký tư vấn Thiết kế website