Hướng dẫn thêm shortcode trong WordPress cho người mới
Hướng dẫn thêm Shortcode trong WordPress cho người mới
Chào mừng các bạn đến với hướng dẫn chi tiết về cách thêm shortcode trong WordPress! Shortcode là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm nội dung động và phức tạp vào trang web của mình mà không cần phải viết mã phức tạp. Bài viết này được thiết kế đặc biệt cho người mới bắt đầu, giúp bạn hiểu rõ shortcode là gì, tại sao chúng lại hữu ích và cách tạo và sử dụng chúng một cách hiệu quả.
Shortcode là gì và tại sao bạn nên sử dụng chúng?
Shortcode là những đoạn mã ngắn, được đặt trong dấu ngoặc vuông ([…]), mà WordPress nhận diện và thay thế bằng một nội dung hoặc chức năng cụ thể. Chúng giống như những phím tắt cho phép bạn thêm các tính năng phức tạp một cách đơn giản, dễ dàng quản lý và cập nhật.
Tại sao nên sử dụng shortcode?
- Tiết kiệm thời gian và công sức: Thay vì viết mã HTML hoặc PHP phức tạp, bạn chỉ cần sử dụng một shortcode đơn giản.
- Dễ dàng quản lý nội dung: Bạn có thể thay đổi chức năng của shortcode mà không cần chỉnh sửa trực tiếp nội dung trang web.
- Tăng tính linh hoạt: Shortcode cho phép bạn thêm nội dung động, chẳng hạn như form liên hệ, slideshow ảnh, nút chia sẻ mạng xã hội, v.v.
- Giảm thiểu lỗi: Shortcode giúp giảm thiểu khả năng mắc lỗi khi chỉnh sửa mã trực tiếp.
Các loại Shortcode trong WordPress
Có hai loại shortcode chính trong WordPress:
- Shortcode tự chứa (self-closing shortcode): Loại shortcode này chỉ bao gồm một dấu ngoặc vuông đóng, ví dụ:
[my_shortcode]. - Shortcode bao bọc (enclosing shortcode): Loại shortcode này bao gồm một thẻ mở và một thẻ đóng, ví dụ:
[my_shortcode]Nội dung bên trong[/my_shortcode].
Loại shortcode bạn sử dụng sẽ phụ thuộc vào chức năng bạn muốn shortcode thực hiện. Shortcode tự chứa thường được sử dụng cho các chức năng đơn giản, trong khi shortcode bao bọc được sử dụng cho các chức năng phức tạp hơn, chẳng hạn như hiển thị nội dung được định dạng đặc biệt.
Cách tạo Shortcode đơn giản trong WordPress
Để tạo shortcode, bạn cần thêm mã PHP vào file functions.php của theme bạn đang sử dụng (hoặc tốt hơn là tạo một plugin tùy chỉnh). Dưới đây là ví dụ về cách tạo một shortcode đơn giản hiển thị một đoạn văn bản:
function my_simple_shortcode() {
return '<p>Đây là nội dung được hiển thị bởi shortcode!</p>';
}
add_shortcode( 'my_shortcode', 'my_simple_shortcode' );
Giải thích đoạn mã:
function my_simple_shortcode(): Định nghĩa một hàm PHP có tên làmy_simple_shortcode. Hàm này sẽ trả về nội dung mà bạn muốn hiển thị.return '<p>Đây là nội dung được hiển thị bởi shortcode!</p>';: Trả về một đoạn HTML chứa nội dung bạn muốn hiển thị. Lưu ý rằng chúng ta sử dụng<và>để biểu thị dấu<và>trong HTML.add_shortcode( 'my_shortcode', 'my_simple_shortcode' );: Đăng ký shortcode với WordPress. Tham số đầu tiên là tên shortcode (my_shortcode), tham số thứ hai là tên hàm sẽ thực thi (my_simple_shortcode).
Sau khi thêm đoạn mã này vào file functions.php (hoặc plugin), bạn có thể sử dụng shortcode [my_shortcode] trong bài viết hoặc trang của mình. WordPress sẽ tự động thay thế shortcode này bằng đoạn văn bản bạn đã định nghĩa.
Cách tạo Shortcode với tham số (attributes)
Shortcode có thể nhận các tham số (attributes) để tùy chỉnh nội dung hiển thị. Dưới đây là ví dụ về cách tạo một shortcode hiển thị một thông báo với màu sắc và kích thước tùy chỉnh:
function my_custom_message_shortcode( $atts ) {
// Thiết lập giá trị mặc định cho các tham số
$atts = shortcode_atts(
array(
'color' => 'black',
'size' => '16px',
'text' => 'Thông báo mặc định',
),
$atts,
'my_message' // Tên shortcode (để phân biệt với các shortcode khác)
);
// Lấy giá trị của các tham số
$color = esc_attr( $atts['color'] );
$size = esc_attr( $atts['size'] );
$text = esc_html( $atts['text'] );
// Tạo HTML output
$output = '<p style="color:' . $color . '; font-size:' . $size . ';">' . $text . '</p>';
return $output;
}
add_shortcode( 'my_message', 'my_custom_message_shortcode' );
Giải thích đoạn mã:
$atts = shortcode_atts( ... ): Hàm này hợp nhất các tham số mặc định với các tham số được cung cấp trong shortcode. Nếu một tham số không được cung cấp, giá trị mặc định sẽ được sử dụng.esc_attr( $atts['color'] )vàesc_html( $atts['text'] ): Hàm này được sử dụng để làm sạch dữ liệu đầu vào, giúp ngăn chặn các cuộc tấn công XSS (Cross-Site Scripting).esc_attrđược sử dụng cho các tham số HTML attributes, cònesc_htmlđược sử dụng cho nội dung văn bản.$output = '<p style="color:' . $color . '; font-size:' . $size . ';">' . $text . '</p>';: Tạo đoạn HTML hiển thị thông báo với màu sắc và kích thước được tùy chỉnh.
Để sử dụng shortcode này, bạn có thể sử dụng cú pháp sau:
[my_message color="red" size="20px" text="Đây là thông báo tùy chỉnh!"]
Nếu bạn không chỉ định các tham số, giá trị mặc định sẽ được sử dụng:
[my_message]
Cách tạo Shortcode bao bọc (enclosing shortcode)
Shortcode bao bọc cho phép bạn xử lý nội dung nằm giữa thẻ mở và thẻ đóng. Dưới đây là ví dụ về cách tạo một shortcode bao bọc để tạo một hộp thông báo với tiêu đề:
function my_box_shortcode( $atts, $content = null ) {
// Thiết lập giá trị mặc định cho tham số tiêu đề
$atts = shortcode_atts(
array(
'title' => 'Thông báo',
),
$atts,
'my_box'
);
// Lấy giá trị của tham số tiêu đề
$title = esc_html( $atts['title'] );
// Tạo HTML output
$output = '<div class="my-box">';
$output .= '<h3>' . $title . '</h3>';
$output .= '<div class="my-box-content">' . do_shortcode( $content ) . '</div>';
$output .= '</div>';
return $output;
}
add_shortcode( 'my_box', 'my_box_shortcode' );
Giải thích đoạn mã:
$content = null: Tham số này chứa nội dung nằm giữa thẻ mở và thẻ đóng của shortcode.do_shortcode( $content ): Hàm này xử lý bất kỳ shortcode nào có trong nội dung$content. Điều này cho phép bạn lồng shortcode bên trong shortcode khác.
Để sử dụng shortcode này, bạn có thể sử dụng cú pháp sau:
[my_box title="Tiêu đề hộp thông báo"]
Đây là nội dung bên trong hộp thông báo.
[/my_box]
Lưu ý quan trọng khi sử dụng Shortcode
Dưới đây là một số lưu ý quan trọng khi sử dụng shortcode:
- Sử dụng file
functions.phphoặc plugin: Không nên chỉnh sửa trực tiếp file theme vì những thay đổi này sẽ bị mất khi bạn cập nhật theme. Hãy sử dụng filefunctions.phpcủa child theme hoặc tạo một plugin tùy chỉnh để thêm shortcode. - Làm sạch dữ liệu đầu vào: Luôn sử dụng các hàm như
esc_attr()vàesc_html()để làm sạch dữ liệu đầu vào và ngăn chặn các cuộc tấn công XSS. - Kiểm tra xung đột: Trước khi thêm shortcode, hãy kiểm tra xem có shortcode nào khác sử dụng cùng tên hay không để tránh xung đột.
- Gỡ bỏ shortcode: Khi không còn sử dụng shortcode nữa, hãy nhớ gỡ bỏ nó khỏi file
functions.phphoặc plugin để tránh gây ra lỗi. Bạn có thể gỡ bỏ shortcode bằng hàmremove_shortcode( 'my_shortcode' ).
Kết luận
Shortcode là một công cụ mạnh mẽ và linh hoạt giúp bạn dễ dàng thêm nội dung động vào trang web WordPress của mình. Bằng cách làm theo hướng dẫn trong bài viết này, bạn có thể tạo và sử dụng shortcode một cách hiệu quả để cải thiện trải nghiệm người dùng và làm cho trang web của bạn trở nên hấp dẫn hơn. Chúc các bạn thành công!
