Hướng dẫn sử dụng shortcode trong theme WordPress

Hướng Dẫn Sử Dụng Shortcode Trong Theme WordPress

Shortcode là một tính năng mạnh mẽ trong WordPress, cho phép bạn dễ dàng thêm các chức năng phức tạp vào bài viết, trang hoặc widget mà không cần viết bất kỳ code nào. Chúng hoạt động như những thẻ tag nhỏ, dễ nhớ và sử dụng, tự động được WordPress thay thế bằng nội dung hoặc chức năng tương ứng khi trang được hiển thị. Bài viết này sẽ hướng dẫn bạn cách sử dụng shortcode trong theme WordPress một cách hiệu quả.

Shortcode Là Gì?

Shortcode là một đoạn code ngắn, được đặt trong dấu ngoặc vuông [], dùng để biểu diễn một chức năng cụ thể. Khi bạn thêm shortcode vào nội dung của mình, WordPress sẽ tự động gọi hàm PHP tương ứng và hiển thị kết quả thay vì chính shortcode đó. Ví dụ, shortcode

có thể hiển thị một thư viện ảnh, hoặc [contact-form] có thể chèn một form liên hệ.

Shortcode giúp:

• Đơn giản hóa việc thêm các chức năng phức tạp vào trang web.
• Tái sử dụng code dễ dàng.
• Giúp người dùng không rành về code vẫn có thể tùy chỉnh nội dung.
• Tách biệt logic code khỏi nội dung, giúp việc bảo trì dễ dàng hơn.

Các Loại Shortcode Phổ Biến

WordPress có sẵn một số shortcode mặc định, và bạn cũng có thể cài đặt thêm shortcode thông qua plugin hoặc tạo shortcode tùy chỉnh. Dưới đây là một số loại shortcode phổ biến:

• Shortcode mặc định của WordPress: Bao gồm ,

  

  , , , .
• Shortcode từ plugin: Rất nhiều plugin WordPress cung cấp shortcode riêng để thêm các tính năng như form liên hệ, bản đồ Google, nút chia sẻ mạng xã hội, slider ảnh, và nhiều hơn nữa.
• Shortcode tùy chỉnh: Bạn có thể tự tạo shortcode để thực hiện các chức năng đặc biệt mà bạn cần.

Cách Sử Dụng Shortcode

Sử dụng shortcode rất đơn giản. Bạn chỉ cần chèn shortcode vào vị trí bạn muốn hiển thị nội dung hoặc chức năng tương ứng.

1. Chèn Shortcode vào Bài Viết hoặc Trang

Trong trình soạn thảo WordPress (Gutenberg hoặc Classic Editor), bạn chỉ cần gõ shortcode vào nội dung. Ví dụ:

Đây là một thư viện ảnh: 

Khi trang được hiển thị, shortcode sẽ được thay thế bằng thư viện ảnh chứa các ảnh có ID là 1, 2 và 3.

2. Chèn Shortcode vào Widget

Bạn cũng có thể chèn shortcode vào widget văn bản (Text widget) hoặc widget tùy chỉnh HTML (Custom HTML widget). Điều này cho phép bạn thêm các chức năng đặc biệt vào sidebar, footer hoặc các khu vực widget khác của theme.

1. Vào Appearance > Widgets trong dashboard WordPress.
2. Kéo widget Text hoặc Custom HTML vào khu vực widget bạn muốn.
3. Dán shortcode vào nội dung của widget.
4. Nhấn Save.

3. Chèn Shortcode vào Template Theme

Nếu bạn muốn chèn shortcode trực tiếp vào file template của theme, bạn cần sử dụng hàm do_shortcode() trong PHP. Ví dụ:

<?php echo do_shortcode('[contact-form]'); ?>

Đoạn code này sẽ gọi shortcode [contact-form] và hiển thị kết quả vào vị trí bạn đã chèn code này trong template.

Tạo Shortcode Tùy Chỉnh

Nếu bạn cần một chức năng đặc biệt mà không có shortcode nào đáp ứng được, bạn có thể tự tạo shortcode tùy chỉnh. Dưới đây là hướng dẫn cơ bản:

1. Mở file functions.php của theme: Hoặc tốt hơn, tạo một plugin tùy chỉnh để chứa shortcode. Việc chỉnh sửa trực tiếp functions.php của theme có thể gây ra vấn đề khi bạn cập nhật theme.
2. Thêm code để định nghĩa shortcode: Sử dụng hàm add_shortcode().
3. Viết hàm xử lý shortcode: Hàm này sẽ trả về nội dung mà bạn muốn hiển thị khi shortcode được gọi.

Ví dụ:

<?php
function my_custom_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name' => 'Người dùng',
        ), $atts, 'greeting'
    );

    return '<p>Xin chào, ' . esc_html( $atts['name'] ) . '!</p>';
}
add_shortcode( 'greeting', 'my_custom_shortcode' );
?>

Trong ví dụ này:

• Hàm my_custom_shortcode() định nghĩa logic của shortcode. Nó nhận một mảng các thuộc tính $atts và sử dụng hàm shortcode_atts() để thiết lập các giá trị mặc định cho các thuộc tính này.
• Hàm add_shortcode() đăng ký shortcode greeting và liên kết nó với hàm my_custom_shortcode().
• Bạn có thể sử dụng shortcode này trong bài viết, trang hoặc widget như sau: [greeting name="Tên của bạn"]. Nếu bạn không chỉ định thuộc tính name, nó sẽ mặc định là “Người dùng”.

Lưu Ý Quan Trọng Khi Sử Dụng Shortcode

Để sử dụng shortcode hiệu quả và tránh các vấn đề có thể xảy ra, hãy lưu ý những điều sau:

• Cẩn thận khi chỉnh sửa file functions.php: Nếu bạn không quen thuộc với code, tốt nhất là tạo một plugin tùy chỉnh để chứa shortcode.
• Sử dụng hàm esc_html() để bảo vệ khỏi XSS: Khi hiển thị dữ liệu nhập từ người dùng (ví dụ, thuộc tính của shortcode), hãy sử dụng hàm esc_html() để mã hóa dữ liệu và ngăn chặn các tấn công XSS.
• Kiểm tra tính tương thích: Một số shortcode có thể không tương thích với một số theme hoặc plugin. Hãy kiểm tra kỹ trước khi sử dụng.
• Đọc kỹ tài liệu: Nếu bạn sử dụng shortcode từ plugin, hãy đọc kỹ tài liệu của plugin để hiểu rõ cách sử dụng và các tùy chọn cấu hình.

Ví Dụ Về Các Shortcode Hữu Ích

Dưới đây là một số ví dụ về các shortcode hữu ích mà bạn có thể sử dụng trên trang web của mình:

• Form liên hệ: Sử dụng plugin như Contact Form 7 hoặc WPForms để tạo form liên hệ và chèn nó vào trang web bằng shortcode.
• Bản đồ Google: Sử dụng plugin như WP Google Maps để chèn bản đồ Google vào trang web bằng shortcode.
• Nút chia sẻ mạng xã hội: Sử dụng plugin như AddToAny để thêm nút chia sẻ mạng xã hội vào bài viết và trang bằng shortcode.
• Slider ảnh: Sử dụng plugin như MetaSlider hoặc Smart Slider 3 để tạo slider ảnh và chèn nó vào trang web bằng shortcode.
• Bảng giá: Sử dụng plugin như Easy Pricing Tables để tạo bảng giá và chèn nó vào trang web bằng shortcode.

Kết Luận

Shortcode là một công cụ mạnh mẽ giúp bạn mở rộng chức năng của trang web WordPress một cách dễ dàng. Bằng cách sử dụng shortcode mặc định, shortcode từ plugin hoặc tạo shortcode tùy chỉnh, bạn có thể thêm các tính năng phức tạp vào bài viết, trang và widget mà không cần viết nhiều code. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cơ bản để sử dụng shortcode một cách hiệu quả.