WordPress shortcode là một trong những công cụ mạnh mẽ giúp bạn tạo nội dung động mà không cần kiến thức lập trình chuyên sâu. Chúng cho phép nhúng các yếu tố phức tạp như biểu mẫu, bảng, thư viện ảnh, video hoặc các nội dung đặc biệt khác chỉ với một đoạn mã ngắn gọn.

Nếu bạn muốn tối ưu website WordPress về SEO, hiệu suất và trải nghiệm người dùng, việc sử dụng shortcode đúng cách là yếu tố quan trọng. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng WordPress shortcode hiệu quả để cải thiện chất lượng trang web.

1.1. Định Nghĩa WordPress Shortcode

WordPress shortcode là một tính năng mạnh mẽ được giới thiệu từ phiên bản WordPress 2.5, cho phép người dùng chèn các chức năng nâng cao vào bài viết, trang hoặc widget chỉ với một đoạn mã ngắn. Shortcode hoạt động như một “placeholder” đại diện cho một đoạn mã phức tạp hơn, giúp bạn hiển thị nội dung động mà không cần can thiệp vào mã nguồn.

Shortcode thường được đặt trong dấu ngoặc vuông [ ], giúp WordPress dễ dàng nhận diện và xử lý chúng. Ví dụ, thay vì phải nhúng mã HTML hoặc PHP dài dòng để tạo thư viện ảnh, bạn chỉ cần sử dụng:

html

CopyEdit

[gallery]

WordPress sẽ tự động chuyển đổi đoạn shortcode này thành một thư viện ảnh đẹp mắt trên trang web của bạn.

Ngoài ra, shortcode cũng có thể nhận tham số để điều chỉnh hiển thị theo nhu cầu. Ví dụ:

html

CopyEdit

[gallery ids="10,20,30" columns="3"]

Shortcode trên sẽ hiển thị thư viện ảnh gồm ba hình có ID 10, 20, 30, được sắp xếp theo ba cột.

1.2. Vai Trò Quan Trọng Của Shortcode Trong WordPress

1.2.1. Tiết Kiệm Thời Gian

Shortcode giúp bạn dễ dàng thêm các tính năng nâng cao mà không cần viết mã thủ công. Điều này đặc biệt hữu ích đối với người không rành lập trình. Ví dụ, nếu bạn muốn chèn một nút kêu gọi hành động (Call-To-Action), thay vì viết mã HTML và CSS phức tạp, bạn chỉ cần sử dụng:

html

CopyEdit

[button url="https://example.com" text="Mua ngay"]

1.2.2. Giúp Tối Ưu Nội Dung Một Cách Linh Hoạt

Shortcode giúp bạn quản lý và cập nhật nội dung dễ dàng hơn. Nếu bạn đang quản lý một trang web có hàng trăm bài viết sử dụng cùng một dạng hiển thị nội dung, thay vì chỉnh sửa từng bài, bạn có thể thay đổi nội dung của shortcode trong file functions.php và tất cả các bài viết sẽ tự động cập nhật.

Ví dụ: Bạn tạo một shortcode hiển thị thông tin sản phẩm:

php

CopyEdit

function product_info() { return "<p>Sản phẩm đang có giá khuyến mãi! Hãy mua ngay.</p>"; } add_shortcode('promo', 'product_info');

Sau đó, chỉ cần chèn [promo] vào bất kỳ bài viết nào, nội dung sẽ tự động hiển thị. Nếu cần chỉnh sửa, bạn chỉ thay đổi nội dung trong functions.php mà không cần sửa từng bài viết riêng lẻ.

1.2.3. Cải Thiện Trải Nghiệm Người Dùng

Một website chuyên nghiệp cần có giao diện đẹp và nội dung sinh động. Shortcode giúp bạn dễ dàng thêm các phần tử nâng cao như:

• Bảng giá: Hiển thị danh sách giá dịch vụ.

• Form liên hệ: Cho phép khách truy cập dễ dàng gửi yêu cầu hỗ trợ.

• Bài viết liên quan: Giữ chân người dùng lâu hơn trên website.

Nhờ đó, trang web của bạn không chỉ đẹp mắt mà còn thân thiện với người dùng hơn.

1.3. Các Loại Shortcode Trong WordPress

Có hai loại shortcode chính trong WordPress:

• Self-Closing Shortcode (Shortcode Tự Đóng): Đây là loại không cần thẻ đóng, ví dụ: [gallery], [video].

• Enclosing Shortcode (Shortcode Có Thẻ Đóng): Dùng để bao quanh một đoạn nội dung, ví dụ:

html

CopyEdit

[testimonial] Đây là phản hồi của khách hàng. [/testimonial]

WordPress sẽ xử lý đoạn văn bản bên trong shortcode theo cách đặc biệt, giúp bạn hiển thị nội dung một cách sáng tạo hơn.

2.1. Cách Sử Dụng Shortcode Có Sẵn Trong WordPress

WordPress cung cấp một số shortcode mặc định giúp bạn dễ dàng nhúng nội dung vào bài viết:

• [gallery] – Hiển thị thư viện ảnh.

• [audio] – Nhúng file âm thanh.

• [video] – Nhúng video vào bài viết.

• [caption] – Thêm chú thích cho ảnh.

Cách sử dụng rất đơn giản, chỉ cần chèn shortcode vào bài viết hoặc trang là WordPress sẽ tự động hiển thị nội dung tương ứng.

2.2. Cách Tạo Shortcode Tùy Chỉnh

Bạn có thể tự tạo shortcode riêng để hiển thị nội dung theo ý muốn bằng cách thêm đoạn mã sau vào file functions.php:

php

CopyEdit

function my_custom_shortcode() { return "<p>Đây là nội dung được tạo bởi shortcode tùy chỉnh!</p>"; } add_shortcode('custom_text', 'my_custom_shortcode');

Sau đó, bạn chỉ cần sử dụng [custom_text] trong bài viết để hiển thị đoạn nội dung trên.

2.2.1. Tạo Shortcode Có Tham Số

Bạn có thể mở rộng shortcode để nhận tham số tùy chỉnh, giúp hiển thị nội dung linh hoạt hơn.

Ví dụ:

php

CopyEdit

function custom_button_shortcode($atts) { $atts = shortcode_atts( array( 'url' => '#', 'text' => 'Nhấn vào đây', ), $atts, 'custom_button' ); return '<a href="'.esc_url($atts['url']).'" class="custom-button">'.$atts['text'].'</a>'; } add_shortcode('custom_button', 'custom_button_shortcode');

Sử dụng trong bài viết:

html

CopyEdit

[custom_button url="https://example.com" text="Mua ngay"]

2.3. Sử Dụng Shortcode Trong Widget Và Theme

2.3.1. Dùng Shortcode Trong Widget

Bạn có thể chèn shortcode vào widget bằng cách:

1. Vào Giao diện → Widget.

2. Chèn Widget văn bản và nhập shortcode vào.

3. Lưu lại và kiểm tra hiển thị trên trang web.

2.3.2. Dùng Shortcode Trong Theme

Nếu muốn sử dụng shortcode trong file PHP của theme, bạn cần sử dụng hàm do_shortcode():

php

CopyEdit

echo do_shortcode('[custom_text]');

Cách này rất hữu ích khi bạn muốn nhúng shortcode vào file header.php, footer.php hoặc các template khác của theme.

3.1. Tối ưu SEO với shortcode

• Chèn nội dung động vào bài viết: Ví dụ, sử dụng shortcode để hiển thị bảng giá cập nhật tự động, giúp nội dung luôn mới mẻ.

• Sử dụng shortcode cho FAQ Schema: Giúp cải thiện thứ hạng Google bằng cách hiển thị các câu hỏi thường gặp.

• Tối ưu heading và thẻ alt hình ảnh trong shortcode để đảm bảo Google có thể thu thập dữ liệu chính xác.

3.2. Cải thiện hiệu suất website khi dùng shortcode

• Tránh shortcode gây tải chậm: Một số shortcode từ plugin có thể làm giảm tốc độ trang. Hãy kiểm tra bằng công cụ như GTmetrix hoặc Google PageSpeed Insights.

• Tận dụng bộ nhớ đệm (caching) để lưu kết quả của shortcode, giúp tải trang nhanh hơn.

• Giảm tải hình ảnh và video bằng cách sử dụng shortcode tối ưu như lazy load hoặc CDN.

3.3. Các plugin hỗ trợ WordPress shortcode tốt nhất

• Shortcodes Ultimate – Bộ công cụ shortcode mạnh mẽ với hơn 50+ shortcode hữu ích.

• WP Shortcode by MyThemeShop – Hỗ trợ tạo shortcode tùy chỉnh đơn giản.

• Elementor Shortcode – Nếu bạn sử dụng Elementor, có thể nhúng shortcode vào trình dựng trang này.