Hướng dẫn create shortcode wordpress - tạo shortcode wordpress

Đã đăng vào thg 12 25, 2016 7:40 SA 2 phút đọc 2 phút đọc

1.Shortcode trong WordPress là gì?

Đơn giản

add_shortcode( 'call_hello', 'hello_world' );

add_shortcode( 'call_hello', 'hello_world' );

add_shortcode( 'call_hello', 'hello_world' );

add_shortcode( 'call_hello', 'hello_world' );

2. Làm thế nào để tạo một shortcode?

Để tạo một Shortcode các bạn phải Register Shortcode đó với function của WordPress. Có 2 bước chính để tạo 1 Shortcode.

1 - Thiết lập function thực thi code trong shortcode.

2 - Tạo một tên shortcode dựa vào function đã tạo cho nó.

Chúng ta có một ví dụ đơn giản là hiển thị ra dòng chức

add_shortcode( 'call_hello', 'hello_world' );

function hello_world() {
echo "Hello World!";
}

Sau khi tạo Function cho Shortcode. Chúng ta tạo tên cho Shortcode tương ứng với Function đã tạo, Tên Shortcode tương tự như một Namespace để chúng ta dễ quản lí và dễ gọi ShortCode.

add_shortcode( 'call_hello', 'hello_world' );

Lúc này nếu bạn viết [call_hello] vào nội dung bài viết thì nó sẽ hiển thị nội dung được viết trong function hello_world. Chúng ta sẽ có kết quả là dòng chữ "Hello World!" hiển thị ra màn hình.

3. Shortcode có tham số

Phức tạp hơn 1 chút, chúng ta sẽ thêm tham số vào Shortcode để có thể xử lí những bài toán phức tạp hơn. Cũng rất đơn giản và tương tự như đưa tham số vào các function.

Ví dụ chúng ta có một Shortcode để hiển thị ra social icon và link.

Với các Shortcode có tham số, chúng ta phải định nghĩa các tham số sẽ được truyền vào, sau đó sẽ đến phần sử lí để hiển thị các tham số hoặc if else nếu các tham số đó là các điều kiện.

Như function shortcode_social trên đây chúng ta có thể thấy đây là một Shortcode để hiển thị ra một social icon gồm có link, icon và content. Các tham số truyền vào chúng ta sẽ có thể set giá trị mặc định cho nó.

Khi chúng ta gọi Shortcode social chúng ta sẽ truyền tham số vào như sau:

add_shortcode( 'call_hello', 'hello_world' );

Đoạn shortcode trên đây sẽ hiển thị ra một liên kết đến Facebook, với icon là icon Facebook và có text là Facebook

add_shortcode( 'call_hello', 'hello_world' );

Rất đơn giản phải không các bạn.

4. Cách hiển thị shortcode

Sau khi chúng ta đã định nghĩa các function và register shortcode thì việc quan trọng nhất là hiển thị shortcode đó ra như thế nào. Chúng ta có 2 cách chủ yếu hay sử dung để hiển thị ra shortcode.

1 - Khi viết trong content hoặc trong widget. Chúng ta sẽ sử dụng với cấu trúc:

Or

Or

Chú ý: nếu viết Shortcode vào Widget các bạn phải thêm một đoạn mã vào file function.php như sau:

Or

2 - Khi viết trong file code của chúng ta. Để hiển thị được Shortcode trong file code. Chúng ta cần sử dụng thêm function

Or

Ví dụ:

Or

Như vậy là mình đã giới thiệu xong các để tạo một Shortcode trong WordPress. Rất mong với bài viết này có thể giúp các bạn sử dụng được shortcode để làm việc với WordPress dễ dàng hơn.

All rights reserved

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

add_shortcode( 'call_hello', 'hello_world' );

add_shortcode( 'call_hello', 'hello_world' );

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é. 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.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ả.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.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 pages

Sau 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”.“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. 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.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.

add_shortcode( 'call_hello', 'hello_world' );

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

add_shortcode( 'call_hello', 'hello_world' );

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.

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