Hướng dẫn cách tạo Shortcode cho WordPress

Shortcode, còn được gọi là đoạn mã nhỏ, được WordPress giới thiệu trong Shortcode API 6 năm trước với việc phát hành WordPress 2.5. Mã ngắn hiện được sử dụng bởi một số lượng lớn plugin WordPress để cho phép người dùng thêm nội dung vào bài đăng và trang của họ. Trong bài viết này IMO sẽ hướng dẫn các bạn tạo Shortcode cho WordPress nhanh chóng. Hãy cùng nhau tìm hiểu.

WordPress Shortcode là gì?

Shortcode theo nghĩa tiếng Việt là mã ngắn hay nói cách khác là shortcode. Dùng để thay thế một nội dung hoặc chức năng của một chức năng mà bạn đã xác định trước đó. Mã ngắn có thể được sử dụng để nhúng thanh trượt, biểu mẫu hoặc bảng giá.

Mã ngắn được cung cấp để người dùng tạo và chỉnh sửa nội dung phức tạp mà không phải lo lắng về mã 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 của riêng mình để hiển thị bất cứ thứ gì. Bạn có thể sử dụng nó để xuất video Youtube, xuất hộp liên hệ, v.v. hoặc tạo bất cứ thứ gì bạn muốn. Dưới đây là một số ví dụ về cách tạo mã ngắn WordPress đơn giản và chi tiết. Xin vui lòng tham khảo.

Thiết Kế Website - Thiết kế web chuẩn SEO không chỉ đẹp mắt mà còn mang về nhiều lượt truy cập, nhiều đơn hàng. Và điều quan trọng nhất hiện nay là khi thiết kế website bắt buộc phải chuẩn SEO với Google. Giúp website thân thiện với Google và nhanh lên TOP hơn so với 1 website thông thường. Với đội ngũ thiết kế web luôn chăm chút từ nội dung, chức năng đến cả cách thức vận hành.

Ví dụ cơ bản về tạo Shortcode cho WordPress

Để giúp bạn hiểu rõ về cách WordPress Shortcode hoạt động, hãy bắt đầu với tính năng Shortcode cơ bản.

Trước khi chúng tôi lấy ví dụ về trình tạo mã ngắn WordPress, điều quan trọng cần lưu ý là mã ngắn phải được tạo cho nội dung và tính năng bạn sử dụng thường xuyên. Toàn bộ quan điểm của việc sử dụng Shortcode là để tiết kiệm thời gian của người dùng. Nếu bạn chỉ sử dụng nó một lần, việc tạo mã ngắn WordPress có thể không hoạt động.

Trong ví dụ này, IMO sẽ giúp bạn tạo shortcode cho WordPress thông qua ví dụ về theme Elegant. Trên blog Thanh Lịch, hiện có khoảng chục bài chia sẻ kiến ​​thức mỗi tuần. Dưới mỗi bài đăng, Elegant thường khuyến khích những người yêu thích đăng ký theo dõi blog của mình. Tuy nhiên, để có thể tiết kiệm được nhiều thời gian, chúng ta sẽ thực hiện bằng cách tạo Shortcode cho văn bản.

Để làm điều này, bạn có thể thêm một chức năng như thế này vào mẫu functions.php của chủ đề:

Những bạn mới viết mã có thể thấy đoạn mã trên hơi khó hiểu, nhưng sẽ dễ hiểu hơn khi bạn chia mã xuống từng dòng một.

Điều đầu tiên cần làm là thêm một bình luận phía 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 mã vào một ngày sau đó.

// Function to add subscribe text to posts and pages

Sau khi định nghĩa hàm, chúng ta sẽ đặt tên dễ hiểu, ví dụ đặt tên hàm như sau: “subscribe_link_shortcode“.

function subscribe_link_shortcode() {

Sau đó, khi đã xác định được thông báo mà Elegant muốn gửi, câu lệnh return sẽ xuất thông báo khi được gọi, nó cũng lưu trữ các thông báo (ngược lại với echo, chỉ in ra chứ không lưu trữ).

Sau đó, chức năng này sẽ được đóng lại.

}

Tiếp theo, chúng tôi xác định Mã ngắn 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ẽ sử dụng và biến thứ hai sẽ gọi hàm (tức là biến chúng ta đã xác định ở trên).

add_shortcode(‘subscribe’, ‘subscribe_link_shortcode‘);

Sau khi lưu mẫu functions.php, giờ đây chúng ta có thể sử dụng cuộc gọi đăng ký blog bất cứ khi nào chúng ta muốn bằng cách sử dụng mã ngắn đăng ký.

[subscribe]

Sau khi sử dụng Mã ngắn đăng ký trong một bài đăng hoặc trang, nó sẽ tạo ra thông báo sau:

Nếu bạn thích bài viết này, hãy đăng ký blog của Elegant.

Vì vậy, IMO đã làm một bài hướng dẫn tạo Shortcode đơn giản cho WordPress để hiểu rõ hơn về ví dụ trên. Bạn cũng có thể tạo một mã ngắn để hiển thị quảng cáo kiếm tiền hoặc biểu mẫu đăng ký bản tin, sau đó chèn chúng vào bất cứ đâu 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 Mã ngắn bằng cách cho phép bạn chuyển dữ liệu qua Mã ngắn của mình. Trong ví dụ dưới đây, IMO sẽ chỉ cho bạn cách sử dụng các thuộc tính để mở rộng chức năng mà chúng ta vừa tạo trong ví dụ trên. Như bạn có thể thấy, hầu hết mã vẫn giữ nguyên.

Trong đó, $atts là tên của mảng thuộc tính của chúng ta. Sau đó, chúng tôi sử dụng chức năng giải nén để nhập các biến từ mảng này (thông qua chức năng shortcode_atts của WordPress).

Sau đó, hai thuộc tính được xác định: subtype và subtypeurl. Chúng đại diện cho loại đăng ký và URL đăng ký, sau đó được gọi trong thông báo.

Loại đăng ký mặc định là RSS và URL giống như 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 thông báo:

[subscribe]

Khi đó bạn sẽ nhận được kết quả hiển thị mong muốn như sau:

Đừng quên đăng ký các bản cập nhật RSS trong tương lai của chủ đề phong cách.

Nếu bạn chỉ định các thuộc tính, kết quả sẽ giống như đoạn mã sau:

Kết quả sẽ hiển thị như sau:

Đừng quên đăng ký các bản cập nhật RSS của Elegant Themes trong tương lai.

Hãy nhớ đăng ký các bản cập nhật trong tương lai của Chủ đề Twitter sành điệu.

Đừng quên đăng ký các bản cập nhật trong tương lai của Chủ đề Facebook sành điệu.

Đừng quên đăng ký các bản cập nhật trong tương lai của Google’s Stylish Themes.

Mặc dù đây là một ví dụ cơ bản về cách hoạt động của các thuộc tính, nhưng thật dễ dàng để thấy cách các nhà phát triển plugin có thể sử dụng Shortcode API để làm 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.

Kết luận

Như vậy, chỉ cần làm theo các bước được đưa ra trong hướng dẫn này, bạn đã có hiểu biết cơ bản về cách tạo trang web và mã ngắn WordPress tùy chỉnh của riêng mình. Mã ngắn là một cách tuyệt vời để đơn giản hóa các tác vụ phức tạp, đó là lý do tại sao IMO khuyến khích bạn dùng thử và nếu bạn gặp bất kỳ khó khăn nào, vui lòng để lại nhận xét bên dưới. Chúc may mắn.

Link bài viết Hướng dẫn cách tạo Shortcode cho WordPress: https://imo.com.vn/huong-dan-cach-tao-shortcode-cho-wordpress/