Shortcode trong WordPress 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. Bài viết “Hướng dẫn cách tạo Shortcode trong WordPress” sẽ giúp bạn thực hiện các tác vụ đã định sẵn trong lúc tạo shortcode ra sao. Nào chúng ta cùng bắt đầu.
Giới thiệu về Shortcode trong WordPress
Bây giờ shortcode được sử dụng khá phổ biến, bạn có thể vào thư viện plugin WordPress và tìm plugin với từ khóa 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ó thể hỗ trợ sẵn một vài shortcode của nó.
Toàn bộ code trong bài này bạn viết vào file functions.php của theme nhé.
2 bước tạo shortcode trong WordPress
- 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ó.
Để dễ hình dung, mình đưa ra một mẫu tạo shortcode thế này.
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. Nghĩa là lúc này nếu bạn viết [test_shortcode] vào nội dung bài viết thì nó sẽ hiển thị 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ẽ luôn luôn ở đầu bài viết do chúng ta sử dụng lệnh echo. Nếu muốn cho nó hiển thị ngay đúng vị trí đặt shortcode, bạn nên sử 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.
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é.
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(). Thực 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 đó lại để mình dùng hàm ob_get_contents() vào biến $list_post, sau đó 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 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 cần hiển thị danh sách bài ngẫu nhiên trong bài là xong.
Tạo shortcode trong WordPress 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 đơn giản, 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 bạn muốn cho người dù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ố.
Ví dụ, ở đoạn shortcode trên chúng ta đã cho hiển thị 10 bài viết ngẫu nhiên. Nhưng nếu khi sử 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 bạn 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’ );
Đầu 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 nghĩa là giá trị của tham số mà người dù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 sử 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à đó 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 ví dụ 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 toàn bộ chữ trong nội dung của shortcode không?
Thế thì, tại sao ví dụ trên mình chỉ sử dụng $content mà phải khai báo cả $args? Bởi vì mặc định nếu 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ỳ.
Tóm lại
$args sẽ có cấu trúc 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 toàn bộ nội dung được đặt giữa thẻ mở shortcode và thẻ đóng shortcode.
Lời kết
Hy vọng bài viết tạo shortcode trong WordPress hữu ích đối với bạn. Chúc các bạn tạo Shortcode trong WordPress hữu ích riêng cho mình.
Xem thêm
- Cài wordpress trên localhost với Xampp
- Hướng dẫn kích hoạt theme Newpaper
- Hướng dẫn đăng bài trong WordPress, đơn giản bằng hình ảnh
- Tạo nút trở về đầu trang trong WordPress
[wpcc-iframe title=”Thiết kế web chuẩn SEO bằng wordpress cho người mới bắt đầu_David Thanh” width=”769″ height=”433″ src=”https://www.youtube.com/embed/39VVCO8KsG4?feature=oembed” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen]