Shortcode là một tính năng rất hay của wordpress, giúp bạn thêm thắt nội dung, chức năng tùy biến một cách linh động vào bài viết, trang hoặc sidebar. Rất nhiều plugins, themes sử dụng shortcode để hiển thị định dạng nội dung đặc biệt như form liên hệ, gallery ảnh, slide,…
Bài viết này sẽ hướng dẫn các bạn viết shortcode đơn giản theo từng bước cụ thể.
Shortcode là gì?
Shortcode trong WordPress được định nghĩa là những dòng code ngắn, thực hiện những chức năng nhất định trả về nội dung động(dynamic content) theo ngữ cảnh bài viết. Shortcode có thể được sử dụng ở bài viết, trang và cả sidebar widget. Một ví dụ về shortcode mẫu có dạng như sau:
[vietrick_shortcode]Để có thể hiểu sâu về shortcode, chúng ta hãy bắt đầu tìm hiểu về hoàn cảnh ra đời của shortcode trong WordPress. WordPress áp dụng một bộ lọc tất cả các nội dung trong bài viết, trang,.. để đảm bảo không ai có thể chèn mã độc vào cơ sở dữ liệu. Điều này có nghĩa là ở bất cứ trình soạn thảo nội dung nào bạn dùng trên WordPress đều không thể chạy được mã PHP, và bạn chỉ có thể đơn giản là dùng mã HTML mà thôi.
Và rồi vào một ngày đẹp trời, nếu bạn cần chạy một số code PHP ngắn để tùy biến trong bài viết thì sao ? Shortcode được sinh ra để đáp ứng nhu cầu này. Chạy code mà bạn muốn ở bất kỳ vị trí nào trên trang mà bạn muốn.
Về cơ bản thì shortcode cho phép chúng ta viết và chạy code dưới dạng một hàm (function), và hàm này được đăng ký trong WordPress dưới dạng shortcode. Người dùng có thể dễ dàng sử dụng shortcode tại bất kỳ đâu. Khi WordPress bắt gặp một shortcode, nó sẽ bắt đầu biên dịch và chạy shortcode đã được đăng ký.
Hướng dẫn sử dụng Shortcode
Hướng dẫn chèn Shortcode vào Bài viết/Trang
Để chèn shortcode vào bài viết hoặc trang, bạn tiến hành chỉnh sửa Bài viết/Trang mong muốn. Sau đó trong trình soạn thảo Gutenberg, bạn chọn khối cần thêm vào, tìm và chèn khối Shortcode
Sau khi click chọn khối Shortcode, bạn đơn giản chỉ cần nhập tên shortcode cần dùng là được. Tên shortcode có thể được khai báo bởi các plugins mà bạn cài vào như Contact Form 7 để chèn mẫu liên hệ, WP Call button để chèn nút gọi,… hoặc bạn cũng có thể viết một shortcode, chi tiết ở phần sau.
Chèn shortcode trong WordPress Sidebar Widget
Để chèn shortcode vào Sidebar, ở phần Tùy biến widget, các bạn thêm widget Văn bản(text), và phần nội dung văn bản các bạn nhập shortcode vào là được.
Sau đó các bạn nhớ nhấn Lưu thay đổi để lưu tùy chỉnh lại nhé.
Chèn shortcode vào Theme WordPress
Shortcode thường được sử dụng nhiều ở bài viết, trang và sidebar widget. Tuy nhiên, đôi khi chúng ta cũng cần nhúng shortcode ở trong Theme. WordPress cho phép chúng ta chỉnh sửa các tệp .php trong theme. Nếu bạn muốn dùng shortcode ở phần nào của theme, chỉ cần tìm đến tệp .php tương ứng rồi chèn đoạn mã sau vào:
<?php echo do_shortcode("[ten_shortcode]"); ?>Hướng dẫn viết shortcode đơn giản
Shortcode thực sự hữu dụng nếu bạn cần tùy biến nội dung bài viết, chạy một vài dòng code PHP. Tuy nhiên, để viết shortcode, các bạn cần có một ít kinh nghiệm viết code nhé. Phần này mình sẽ hướng dẫn chi tiết các bạn viết và khai báo một shortcode đơn giản.
Chuẩn bị các tệp PHP
Mặc dù không phải là bắt buộc, tuy nhiên, để đảm bảo các chức năng khác vận hành bình thường và thuận tiện cho việc debug sau này, chúng ta sẽ tạo 1 tệp custom-shortcode.php để chứa shortcode. Tệp này sẽ nằm trong thư mục theme mà bạn đang xài, cùng phân cấp với tệp functions.php nhé. Ví dụ bạn dùng theme Aluka, thì tạo tệp trong đường dẫn /wp-content/themes/aluka/ nhé.
Trong tệp custom-shortcode.php mới tạo, các bạn chỉ cần chèn nội dung như sau:
<?php
?>Tiếp đến, các bạn mở tệp functions.php trong thư mục chứa theme đang dùng, và chèn dòng sau vào cuối tệp.
include('custom-shortcode.php');Shortcode đơn giản
Sau khi đã chuẩn bị xong xuôi, giờ chúng ta sẽ viết một shortcode đơn giản, có chức năng hiển thị một hình ảnh mỗi khi được gọi.
Để viết một shortcode hiển thị hình ảnh bên mỗi khi được gọi, đầu tiên, các bạn mở tệp custom-shortcode.php lên và chèn đoạn mã sau vào:
function vietrick_logo_function() {
return '<img src="https://vietrick.com/wp-content/uploads/2019/12/mstile-144x144-1.png" alt="Vietrick-logo" width="144" height="144" class="left-align">';
}Trong đoạn mã trên, hàm vietrick_logo_function() sẽ trả về kết quả xử lý là nội dung thẻ <img> hiển thị hình ảnh Logo của Vietrick.
Sau khi tạo 1 hàm để xử lý, tiếp đến chúng ta cần khai báo hàm này cho WordPress với tư cách shortcode mỗi khi được dùng. Ở trong tệp custom-shortcode.php, các bạn chèn tiếp dòng sau vào để tiến hành khai báo shortcode:
add_shortcode('vietrick_logo', 'vietrick_logo_function');Để đăng ký shortcode trong wordpress, chúng ta sử dụng hàm add_shortcode sẵn có. Trong dòng trên, vietrick_logo chính là tên shortcode mà chúng ta đăng ký sử dụng.
Lưu ý: Tên shortcode phải ở dạng ký tự in thường(lower-case), viết liền không dấu, và có thể dùng dấu _.
Sau khi lưu tệp, các bạn có thể sử dụng shortcode vừa viết như hướng dẫn ở trên.
[vietrick_logo]Shortcode có dùng tham số (Parameter)
Ở phần ví dụ shortcode đơn giản trên, ta không có nhiều tùy biến. Ở phần này, chúng ta sẽ tiếp tục tùy biến shortcode một chút bằng cách truyền vào tham số (parameter) để thay đổi hình ảnh tương ứng.
Mở tệp custom-shortcode.php, các bạn chèn thêm đoạn sau:
function logo_number_function( $atts = array() ) {
// Gán giá trị mặc định: number=1
extract(shortcode_atts(array(
'number' => '1'
), $atts));
return "<img src=\"https://vietrick.com/wp-content/uploads/2019/12/mstile-144x144-$number.png\"
alt=\"logo-number\" width=\"144\" height=\"144\" class=\"left-align\" />";
}Hàm logo_number_funtion() mà ta vừa khai báo ở trên có sử dụng tham số number, nếu không khai báo thì giá trị mặc định của number sẽ là 1. Các giá trị tham số truyền vào được lưu trong hàm shortcode_atts. Các bạn cũng đừng quên khai báo shortcode nhé.
add_shortcode('logo_number', 'logo_number_funtion');Với shortcode vừa viết, chúng ta có thể sử dụng như sau:
[logo_number number=1]Bạn cũng có thể không cần truyền giá trị cho tham số number:
[logo_number]Enclosing shortcode
Ở các ví dụ trên, chúng ta làm việc với các shortcode tự đóng(self-closing), ngoài ra còn 1 loại shortcode khác nữa là enclosing shortcode. Shortcode này cho phép chúng ta sử dụng tương tự như BBcode trên các forum:
[viet_code]code mau[/viet_code]Enclosing shortcode rất hữu dụng khi bạn muốn đưa vào shortcode các nội dung đính kèm, thường là nội dung phức tạp. Việc sử dụng enclosing shortcode cho phép chúng ta chỉ tập trung vào nội dung cần xử lý thay vì cấu hình shortcode.
Tạo enclosing shortcode
Chúng ta tiếp tục quay lại tệp custom-shortcode.php, các bạn thêm đoạn mã sau vào:
function vietlink_function( $atts, $content = null ) {
return '<a href="https://vietrick.com/" target="blank" class="vietrick" rel="noopener noreferrer">' . $content . '</a>';
}Trong hàm vietlink_function() ở trên sẽ trả về kết quả là liên kết đến trang Vietrick, nội dung liên kết chính là nội dung shortcode. Tham số $content = null được dùng để khai báo giá trị nội dung của shortcode, mặc định bằng null. Khi nào bạn muốn xử lý nội dung của shortcode thì gọi biến $content.
Cũng đừng quên khai báo shortcode:
add_shortcode('vietlink', 'vietlink_function');Vậy là cơ bản chúng ta đã tự viết được một enclosing shortcode đơn giản rồi.
Sử dụng enclosing shortcode
Enclosing shortcode thì không khác gì mấy so với self-closing shortcode bình thường.
[vietlink]Vietrick - Chia sẽ thủ thuật[/vietlink]Ở trên là một ví dụ đơn giản về enclosing shortcode, giờ chúng ta tiếp tục đi sâu hơn, thêm thắt các tham số(parameter) vào cho shortcode.
Cũng ở tệp custom-shortcode.php, các bạn thêm đoạn code sau vào:
function vlink_function( $atts = array(), $content = null ) {
// Gán giá trị mặc định
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<a href="'. $link .'" target="blank" class="vlink" rel="noopener noreferrer">' . $content . '</a>';
}Ở đoạn code trên, chúng ta thêm phần trích xuất giá trị tham số trong array $atts. Đồng thời biến $link cũng được gán giá trị mặc định là #.
Tiếp tục khai báo shortcode với wordpress:
add_shortcode('vlink', 'vlink_function');Các bạn có thể sử dụng shortcode vừa viết với cú pháp như sau:
[vlink link="https://vietrick.com/"]Chia sẽ thủ thuật và công nghệ[/vlink]Như các bạn đã thấy, so với self-closing shortcode, chúng ta có thể làm được nhiều thứ phức tạp hơn với enclosing shortcode.
Shortcode trên Widget
Ở phần trên, mình có hướng dẫn các bạn dùng shortcode ở trong sidebar widget. Tuy nhiên, mặc định thì shortcode chỉ hỗ trợ chạy được ở nội dung Bài viết / Trang hoặc Bài viết dạng tùy chỉnh. Để shortcode bạn viết có thể hoạt động được ở khu vực widget, các bạn cần thêm đoạn mã khai báo sau vào tệp functions.php.
add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );Sau khi lưu tệp, giờ shortcode của bạn cũng đã có thể hoạt động được ở khu vực widget.
Kết
Qua bài viết này, hy vọng các bạn sẽ dễ dàng viết được shortcode đơn giản như mong muốn mà không tốn nhiều thời gian và công sức. Viết Shortcode thật đơn giản và tiện dụng. Phần chuyên sâu hơn về shortcode mình sẽ viết tiếp ở các bài sau nhé.