Shortcode hay còn được gọi là một đoạn code ngắn được WordPress giới thiệu Shortcode API vào 6 năm trước với việc phát hành WordPress 2.5. Các Shortcode hiện được sử dụng bởi một số lượng lớn các plugin WordPress để cho phép user thêm nội dung vào các bài đăng và trang của họ. Trong bài viết này, Vietnix sẽ hướng dẫn bạn tạo Shortcode cho WordPress nhanh chóng nhất. Cùng tìm hiểu thôi nào.
WordPress Shortcode là gì?
Shortcode hiểu theo nghĩa tiếng Việt là đoạn code ngắn hay nói cách khác là đoạn mã ngắn. Sử dụng để thay thế một nội dung hoặc một chức năng của một function mà bạn đã định nghĩa trước đó. Shortcode có thể dùng để nhúng thanh trượt, biểu mẫu hoặc bảng định giá.
Shortcode được cung cấp cho người dùng để tạo và thay đổi nội dung phức tạp mà không còn lo lắng về HTML hoặc mã nhúng phức tạp. Đặc biệt, WordPress còn cho phép người dùng tạo Shortcode riêng cho mình để hiển thị bất cứ điều gì. Bạn có thể sử dụng nó để xuất một video Youtube, xuất box liên hệ,… hoặc xây dựng bất cứ điều gì bạn muốn. Sau đây là một số ví dụ về việc tạo Shortcode cho WordPress đơn giản và chi tiết. Mời bạn tham khảo nhé.
Ví dụ cơ bản về tạo Shortcode cho WordPress
Để bạn hiểu rõ về cách hoạt động của WordPress Shortcode, chúng ta hãy bắt đầu với một hàm Shortcode cơ bản.
Trước khi đi vào ví dụ tạo Shortcode cho WordPress, ta cần lưu ý Shortcode phải được tạo cho nội dung và chức năng mà bạn sử dụng thường xuyên. Toàn bộ ưu điểm của việc sử dụng Shortcode là tiết kiệm thời gian cho người dùng. Nếu bạn chỉ định sử dụng nó một lần, thì việc tạo WordPress Shortcode sẽ có thể không mang lại hiệu quả.
Trong ví dụ này, Vietnix sẽ giúp bạn tạo Shortcode cho WordPress thông qua ví dụ của Elegant Theme. Trên trang blog của Elegant hiện tại có khoảng chục bài chia sẻ kiến thức mỗi tuần. Dưới mỗi bài viết của Elegant thường làm là khuyến khích những người yêu thích nên đăng ký vào blog của họ. Tuy nhiên để có thể tiết kiệm được nhiều thời gian cho mình, ta sẽ làm việc này bằng cách tạo một Shortcode cho văn bản.
Để thực hiện việc này, có thể thêm một hàm như hàm sau đây vào template functions.php của theme:
// Function to add subscribe text to posts and pages
function subscribe_link_shortcode() {
return 'If you enjoyed this article, I encourage you to <a href="http://feeds.feedburner.com/ElegantThemes" title="Subscribe to Our Blog">subscribe to the Elegant Themes blog via RSS</a>.';
}
add_shortcode('subscribe', 'subscribe_link_shortcode');Những bạn chưa có kinh nghiệm viết code có thể thấy đoạn code trên hơi khó hiểu, tuy nhiên nó sẽ dễ hiểu hơn khi bạn ngắt đoạn code xuống từng dòng một.
Điều đầu tiên cần làm là thêm một nhận xét bên trên chức năng của nó. Điều này sẽ giúp người dùng nhanh chóng biết chức năng của nó là gì khi xem lại code vào một ngày sau đó.
// Function to add subscribe text to posts and pagesSau khi xác định được chức năng, tiếp theo ta sẽ sử dụng một cái tên dễ hiểu, ví dụ đặt tên hàm như sau: “subscribe_link_shortcode”.
function subscribe_link_shortcode() {Tiếp theo, khi đã xác định được thông điệp mà Elegant muốn gửi thì câu lệnh return sẽ hiển thị thông báo khi nó được gọi, nó cũng lưu trữ các thông điệp (trái ngược với echo, chỉ in ra chứ không lưu trữ).
return 'If you enjoyed this article, I encourage you to <a href="http://feeds.feedburner.com/ElegantThemes" title="Subscribe to Our Blog">subscribe to the Elegant Themes blog via RSS</a>.';Sau đó, chức năng này sẽ được đóng lại.
}Tiếp đến ta xác định Shortcode chính bằng cách sử dụng hàm add_shortcode. Biến đầu tiên được chỉ định để xác định Shortcode sẽ được sử dụng và biến thứ hai sẽ gọi hàm (tức là biến mà chúng ta đã xác định ở trên).
add_shortcode('subscribe', 'subscribe_link_shortcode');Sau khi lưu template functions.php, bây giờ chúng ta có thể sử dụng lời kêu gọi đăng ký blog bất cứ khi nào chúng ta muốn bằng cách sử dụng shortcode subscribe.
[subscribe]Sau khi bạn sử dụng Shortcode đăng ký trong một bài đăng hoặc trang sẽ tạo ra thông báo như sau:
Nếu bạn thích bài viết này, hãy đăng ký blog của Elegant.
Như vậy Vietnix đã hoàn thành hướng dẫn tạo Shortcode cho WordPress đơn giản để đưa ra thông báo trong ví dụ trên. Bạn cũng có thể tạo một Shortcode để hiển thị quảng cáo kiếm tiền hoặc một form đăng ký cho bản tin, sau đó chèn chúng vào bất cứ vị trí nào mà bạn muốn trong bài viết của mình.
Tạo một Shortcode cho WordPress với các thuộc tính
Các thuộc tính có thể mở rộng chức năng của Shortcode bằng cách cho phép bạn chuyển dữ liệu qua các Shortcode của mình. Trong ví dụ dưới đây, Vietnix sẽ chỉ cho bạn cách các thuộc tính có thể được sử dụng để mở rộng hàm mà chúng ta vừa tạo ra ở ví dụ trên. Như bạn có thể thấy, phần lớn code vẫn được giữ nguyên.
// Extended subscription function with subscription type variable
function subscribe_multilink_shortcode( $atts ) {
extract( shortcode_atts( array(
'subtype' => 'RSS',
'subtypeurl' => 'http://feeds.feedburner.com/ElegantThemes',
), $atts, 'multilink' ) );
return sprtinf( 'Be sure to subscribe to future Elegant Themes updates <a href='%1$s'>by %2$s</a>.',
esc_url( $subtypeurl ),
esc_html( $subtype )
);
}
add_shortcode( 'subscribe', 'subscribe_multilink_shortcode' );Trong đó, $ atts là tên mảng thuộc tính của chúng ta. Sau đó, ta sử dụng hàm trích xuất để nhập các biến từ mảng này (thông qua hàm shortcode_atts WordPress).
Hai thuộc tính sau đó được xác định là: subtype và và subtypeurl. Chúng thể hiện loại đăng ký và URL đăng ký, các thuộc tính này sau đó được gọi trong thông báo.
Kiểu đăng ký mặc định là RSS và URL có dạng http://feeds.feedburner.com/ElegantThemes. Thông tin này sẽ được hiển thị khi không có thuộc tính nào được xác định.
Do đó, khi bạn thêm nội dung sau vào bài đăng:
[subscribe]Sau đó bạn sẽ nhận được kết quả sẽ hiển thị mong muốn như sau:
Hãy nhớ đăng ký các bản cập nhật của Elegant Theme trong tương lai của RSS .
Nếu bạn xác định rõ các thuộc tính thì sẽ có kết quả như đoạn code sau:
[subscribe]
[subscribe subtype="Twitter" subtypeurl="http://www.twitter.com/elegantthemes/"]
[subscribe subtype="Facebook" subtypeurl="http://www.facebook.com/elegantthemes/"]
[subscribe subtype="Google" subtypeurl="http://plus.google.com/+elegantthemes/"]
Kết quả sẽ hiển thị là:
Hãy nhớ đăng ký các bản update Elegant Themes trong tương lai của RSS.
Hãy nhớ đăng ký các bản update Elegant Themes trong tương lai của Twitter.
Hãy nhớ đăng ký các bản update Elegant Themes trong tương lai của Facebook.
Hãy nhớ đăng ký các bản update Elegant Themes trong tương lai của Google.
Mặc dù đây là một ví dụ cơ bản về cách mà các thuộc tính hoạt động, nhưng có thể dễ dàng nhận thấy các nhà phát triển plugin có thể sử dụng Shortcode API để giúp cho các chức năng phức tạp trở nên thân thiện hơn với người dùng.
Việc sử dụng Shortcode có thể ảnh hưởng đến hiệu suất của website. Nếu hosting của bạn không đủ mạnh mẽ để xử lý các Shortcode phức tạp hoặc tài nguyên hosting bị hạn chế, website có thể gặp tình trạng tải chậm. Điều này có thể gây phiền toái cho khách truy cập và làm giảm trải nghiệm người dùng.
Lời kết
Như vậy, chỉ cần làm theo các bước được lưu ý trong hướng dẫn này, bạn đã có những hiểu biết cơ bản về cách tạo Shortcode cho WordPress tùy chỉnh của riêng mình và cho trang web của bạn. Shortcode là một cách tuyệt vời để làm cho các tác vụ phức tạp trở nên đơn giản hơn, vì vậy Vietnix khuyến khích bạn hãy thử thực hành và nếu có khó khăn, thắc mắc hãy để lại bình luận phía dưới nhé. Chúc bạn thành công.
