Làm thế nào để tạo Shortcodes trong WordPress?

Làm thế nào để tạo Shortcodes trong WordPress?

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, 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 – Cho phép bạn nhúng các file âm thanh.
• caption – 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 – Cho phép bạn nhúng một loạt các nội dung như video, âm thanh và tweet.
• gallery – Cho phép bạn chèn các gallery hình ảnh.
• video – 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 <a href="http://feeds.feedburner.com/wpcanban" title="Subscribe blog của tôi">subscribe WP Căn bản thông qua RSS</a>.';
}
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 <a href="http://feeds.feedburner.com/wpcanban" title="Subscribe blog của tôi">subscribe WP Căn bản thông qua RSS</a>.';

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.

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 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 <a href='%1$s'>thông qua %2$s</a>.',
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 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.

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.

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.

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.

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.

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.

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. :)