Shortcode hay còn 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, mình sẽ hướng dẫn bạn tạo Shortcode cho WordPress nhanh chóng nhất.
Những điểm chính
- Khái niệm của WordPress shortcode: WordPress Shortcode là đoạn mã ngắn gọn, giúp người dùng dễ dàng chèn các nội dung hoặc chức năng phức tạp vào bài viết mà không cần kiến thức về code. Shortcode cho phép thay thế nội dung hoặc chức năng của một function đã được định nghĩa trước đó.
- Ví dụ cơ bản về Shortcode WordPress: Tạo Shortcode cho WordPress
[subscribe]để chèn nhanh lời kêu gọi đăng ký blog vào bài viết, giúp tiết kiệm thời gian thay vì phải gõ lại đoạn code HTML mỗi lần. Đoạn code này được thêm vào filefunctions.phpcủa theme. - Cách tạo một Shortcode cho WordPress với các thuộc tính: Shortcode WordPress có thể mở rộng chức năng bằng cách sử dụng các thuộc tính để truyền dữ liệu.
- Giới thiệu Vietnix: Là nhà cung cấp hosting hàng đầu Việt Nam, nổi bật với tốc độ cao, bảo mật tốt, và hỗ trợ kỹ thuật 24/7, giúp website hoạt động ổn định và hiệu quả.
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á.
function đã định nghĩa trước đó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.
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 tạo Shortcode cho WordPress 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, mình 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 mình đã 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, mình 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 tạo Shortcode cho WordPress 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.
Chính vì vậy, việc lựa chọn một nhà cung cấp web hosting chất lượng cao, được tối ưu cho WordPress là rất quan trọng. Hosting WordPress từ Vietnix với công nghệ LiteSpeed Web Server và ổ cứng NVMe sẽ giúp website của bạn tải nhanh và ổn định, xử lý mượt mà các shortcode mà không ảnh hưởng đến hiệu suất.
Vietnix – Đơn vị cung cấp hosting tốc độ cao, hỗ trợ 24/7
Vietnix là nhà cung cấp dịch vụ hosting hàng đầu, nổi bật với tốc độ vượt trội, hiệu suất ổn định và hệ thống bảo mật tiên tiến. Với hơn 12 năm hoạt động trong lĩnh vực máy chủ, Vietnix đảm bảo mang đến các giải pháp lưu trữ tối ưu, giúp website của bạn vận hành trơn tru và giảm thiểu tối đa các sự cố gián đoạn. Đội ngũ kỹ thuật chuyên nghiệp của Vietnix luôn sẵn sàng 24/7 để hỗ trợ bạn giải quyết mọi vấn đề một cách nhanh chóng và hiệu quả nhất.
Liên hệ ngay để được tư vấn dịch vụ phù hợp!
- Website: https://vietnix.vn/
- Hotline: 1800 1093
- Email: sales@vietnix.com.vn
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, TP HCM.
Việc tạo Shortcode cho WordPress bằng các bước hướng dẫn trên không chỉ giúp bạn tiết kiệm thời gian, mà còn hỗ trợ tối ưu hóa quy trình làm việc hiệu quả hơn. Nếu bạn đang quản lý một website lớn, thường xuyên phải chèn các đoạn code phức tạp, đừng bỏ qua phương pháp hữu ích này trong chiến lược xây dựng và phát triển website. Hy vọng hướng dẫn trên sẽ giúp bạn dễ dàng tạo Shortcode và nâng cao hiệu suất công việc một cách chuyên nghiệp hơn.
