---
title: "Làm thế nào để tạo Shortcodes trong WordPress?"
author: "Trung Hiếu"
date: "2014-06-21"
lastmod: "2022-06-19"
url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/lam-the-nao-de-tao-shortcodes-trong-wordpress.html"
---
# Làm thế nào để tạo Shortcodes trong WordPress?
Làm thế nào để tạo Shortcodes trong WordPress?
*[WordPress](https://wpcanban.com/category/wordpress)* đã giới thiệu các *shortcode API* cách đây 6 năm với việc phát hành của *WordPress 2.5*. Hiện tại, *Shortcodes* được sử dụng bởi một số lượng lớn *[WordPress plugins](https://wpcanban.com/category/wordpress/wordpress-plugins)*, cho phép người dùng chèn thêm nội dung vào các bài viết và trang của họ.
*Shortcode API* cho phép bạn tạo *shortcodes* của riêng mình bằng cách thêm chức năng vào file *functions.php* của theme bạn đang dùng (file này nằm trong đường dẫn: *www.yourwebsite.com/wp-content/themes/yourtheme/*).
Ngoài việc tạo ra *shortcodes* của riêng bạn, *WordPress* cũng bao gồm 5 *shortcodes* mặc định, được tích hợp vào *WordPress Core*:
- [audio](http://codex.wordpress.org/Audio_Shortcode) – Cho phép bạn nhúng các file âm thanh.
- [caption](http://codex.wordpress.org/Caption_Shortcode) – Cho phép bạn thêm nội dung chú thích. Nó thường được sử dụng với hình ảnh.
- [embed](http://codex.wordpress.org/Embed_Shortcode) – Cho phép bạn nhúng một loạt các nội dung như video, âm thanh và tweet.
- [gallery](http://codex.wordpress.org/Gallery_Shortcode) – Cho phép bạn chèn các gallery hình ảnh.
- [video](http://codex.wordpress.org/Video_Shortcode) – Cho phép bạn nhúng các file video.
Mặc dù *WordPress shortcodes* mặc định được sử dụng rất nhiều, nhưng ít người dùng *WordPress* biết tận dụng lợi thế của các *shortcode API* để thiết kế những *shortcode* “độc nhất vô nhị” cho trang web của họ. Trong bài viết này, tôi sẽ chỉ cho các bạn cách tăng cường sức mạnh của trang web với các *shortcode* tùy chỉnh.
Hãy chắc chắn rằng bạn đã tạo một bản backup của file *functions.php* và tất cả tập tin có liên quan khác, trước khi tiến hành chỉnh sửa.
Tạo một shortcode – Ví dụ cơ bản
Để cung cấp cho bạn những hiểu biết tốt nhất về cách *WordPress shortcode API* hoạt động, chúng ta hãy bắt đầu với một chức năng *shortcode* cơ bản.
Hãy nhớ rằng, *shortcodes* phải được tạo ra cho các nội dung và chức năng mà bạn sử dụng thường xuyên. Ưu điểm của việc sử dụng *shortcodes* là tiết kiệm thời gian. Nếu bạn chỉ sử dụng cái gì đó một lần, bạn không cần tạo ra một *shortcode* cho riêng nó.
Tôi viết khoảng một chục bài viết mỗi tuần. Giả sử, điều tôi thường xuyên làm là khuyến khích khách truy cập *subscribe* blog của tôi. Việc này lặp đi lặp lại khiến tôi mất khá nhiều thời gian, tuy nhiên, tôi có thể tiết kiệm thời gian cho bản thân bằng cách tạo ra một *shortcode* dành cho văn bản.
Để làm điều này, tôi có thể thêm một chức năng như sau vào file *functions.php* của theme tôi đang sử dụng:
```
// Function to add subscribe text to posts and pages
function subscribe_link_shortcode() {
return 'Nếu bạn thích bài viết này, tôi khuyên bạn nên subscribe WP Căn bản thông qua RSS.';
}
add_shortcode('subscribe', 'subscribe_link_shortcode');
```
Những người không có kinh nghiệm về *coding* có thể sẽ thấy đoạn code trên khá là rắc rối, tuy nhiên nó rất dễ hiểu khi bạn phân tích code theo từng dòng.
Điều đầu tiên tôi làm là thêm một phần chú thích vào bên trên chức năng (function). Điều này sẽ giúp tôi nhanh chóng biết *function* này có tác dụng gì.
```
// Function to add subscribe text to posts and pages
```
Sau đó, tôi xác định chức năng của *shortcode.* Tôi thích sử dụng những cái tên có khả năng tự giải thích, vì vậy tôi đã gọi *function* là “*subscribe_link_shortcode*“.
```
function subscribe_link_shortcode() {
```
Tiếp theo, tôi sẽ định nghĩa thông điệp mà tôi muốn đề cập. Câu lệnh *return* sẽ hiển thị thông báo của tôi khi nó được gọi. Nó cũng lưu các tin nhắn (như trái ngược với *echo*, chỉ hiển thị mà không lưu nó).
```
return 'Nếu bạn thích bài viết này, tôi khuyên bạn nên subscribe WP Căn bản thông qua RSS.';
```
*Function* sau đó sẽ được đóng lại.
```
}
```
Sau đó, tôi xác định *shortcode* bằng cách sử dụng chức năng *add_shortcode*. Biến đầu tiên giúp xác định shortcode được sử dụng và biến thứ hai dùng để gọi chức năng của chúng tôi.
```
add_shortcode('subscribe', 'subscribe_link_shortcode');
```
Sau khi lưu file *functions.php*, chúng ta có thể gọi nó bất cứ khi nào muốn sử dụng *shortcode subscribe* bằng cú pháp:
```
[subscribe]
```
Sử dụng *subscription shortcode* trong bài viết hoặc trang, bạn sẽ nhận được thông báo có dạng như sau:
>
Nếu bạn thích bài viết này, tôi khuyên bạn nên [subscribe WP Căn bản thông qua RSS](http://feeds.feedburner.com/wpcanban).
Tôi đã sử dụng một thông điệp đơn giản trong ví dụ của tôi, tuy nhiên bạn có thể sửa đổi nó để hiển thị nhiều thứ khác. Ví dụ, bạn có thể tạo ra một shortcode để hiển thị quảng cáo [\*Adsense\*](https://wpcanban.com/tag/kiem-tien-voi-google-adsense/) hoặc một *subscription form* cho bản tin từ blog của bạn và sau đó chèn chúng vào bất cứ nơi nào bạn muốn hiển thị trong bài viết.
Tạo một shortcode với các thuộc tính
Thuộc tính (attributes) có thể mở rộng chức năng của *shortcodes* bằng cách cho phép bạn truyền dữ liệu thông qua *shortcodes*.
Trong ví dụ dưới đây, tôi sẽ chỉ cho các bạn cách sử dụng các thuộc tính để mở rộng chức năng mà chúng ta đã tạo ra trước đó. Như bạn thấy, có rất nhiều *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/wpcanban',
), $atts, 'multilink' ) );
return sprtinf( 'Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai thông qua %2$s.',
esc_url( $subtypeurl ),
esc_html( $subtype )
);
}
add_shortcode( 'subscribe', 'subscribe_multilink_shortcode' );
```
`$atts` là tên của mảng thuộc tính của tôi. Sau đó, tôi sử dụng *extract function* để *import* (nhập) biến từ mảng của tôi (thông qua *[shortcode\_atts](http://codex.wordpress.org/Function_Reference/shortcode_atts)WordPress function*).
Hai thuộc tính này được xác định là: *subtype* và *ubtypeurl*. Chúng đại diện cho các loại *subscription* và *subscription URL*. Những thuộc tính này sau đó được gọi trong tin nhắn của tôi.
Loại *subscription* mặc định của tôi là *RSS* và URL đăng ký mặc định của tôi là [\*http://feeds.feedburner.com/wpcanban\*](http://feeds.feedburner.com/wpcanban).
Thông tin này sẽ được hiển thị khi không có thuộc tính nào được định nghĩa. Vì vậy, khi bạn thêm shortcode sau vào một bài viết:
```
[subscribe]
```
Chúng ta sẽ thấy thông báo như sau:
>
*Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai [thông qua RSS](http://feeds.feedburner.com/wpcanban).*
Nếu chúng ta định nghĩa thuộc tính, kết quả cho ra sẽ khác nhau. Ví dụ sử dụng đoạn code sau đây:
```
[subscribe]
[subscribe subtype="Twitter" subtypeurl="http://www.twitter.com/ItachiUchihaSu/"]
[subscribe subtype="Facebook" subtypeurl="http://www.facebook.com/wpcanban/"]
[subscribe subtype="Google" subtypeurl="http://plus.google.com/+TrungHiếuBùi93/"]
```
Bạn sẽ nhận được kết quả:
>
*Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai [thông qua RSS](http://feeds.feedburner.com/wpcanban).Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai [thông qua Twitter](http://www.twitter.com/wpcanban).Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai [thông qua Facebook](http://www.facebook.com/wpcanban/).Hãy đăng ký theo dõi WP Căn bản để cập nhật các bài viết mới trong tương lai [thông qua Google](http://plus.google.com/+TrungHiếuBùi93/).*
Mặc dù đây chỉ là một ví dụ cơ bản về cách thức hoạt động của các thuộc tính, tuy nhiên, dựa vào nó, bạn có thể dễ dàng để xem cách các nhà phát triển plugin sử dụng *shortcode API* để thêm các chức năng phức tạp hơn, thân thiện với người dùng hơn.
*Mọi thắc mắc vui lòng gửi vào khung bình luận bên dưới. Như thường lệ, nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)*