Shortcode trong WordPress – một công cụ cực kỳ mạnh giúp bạn chèn chức năng hoặc nội dung tùy chỉnh vào bài viết, trang, hoặc widget chỉ bằng 1 dòng lệnh như:
[ten_shortcode]
Shortcode là gì?
Shortcode = đoạn mã ngắn (code rút gọn) bạn định nghĩa sẵn bằng PHP → dùng để chèn nội dung động vào bất cứ đâu trong WordPress.
Ưu điểm:
- Không cần biết code vẫn dùng được
- Có thể chèn vào bài viết, trang, widget, custom field, v.v.
- Dễ viết – Dễ tái sử dụng – Rất mạnh
1. Cách tạo một shortcode đơn giản
Thêm vào functions.php
của theme hoặc plugin:
function gfon_hello_shortcode() {
return "<p style='color:green;'>Xin chào! Đây là shortcode của bạn 😎</p>";
}
add_shortcode('hello', 'gfon_hello_shortcode');
Giờ bạn chỉ cần viết
[hello]
trong bài viết → sẽ thấy dòng chữ xuất hiện.
2. Shortcode có tham số (attributes)
Ví dụ: bạn muốn tạo nút “Gọi ngay”, và tùy chỉnh được số điện thoại:
function gfon_button_shortcode($atts) {
$a = shortcode_atts(array(
'sdt' => '0123456789',
'text' => 'Gọi ngay'
), $atts);
return '<a href="tel:' . esc_attr($a['sdt']) . '" style="padding:10px 15px; background:#ff6600; color:#fff; border-radius:5px; text-decoration:none;">' . esc_html($a['text']) . '</a>';
}
add_shortcode('goi', 'gfon_button_shortcode');
Sử dụng trong bài viết như:
[goi sdt="0909123456" text="Liên hệ tư vấn"]
3. Shortcode nâng cao – hiển thị bài viết
Ví dụ: shortcode để hiển thị 3 bài viết mới nhất
function gfon_latest_posts_shortcode($atts) {
$query = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 3
));
$output = '<ul>';
while ($query->have_posts()) {
$query->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
wp_reset_postdata();
$output .= '</ul>';
return $output;
}
add_shortcode('bai_moi', 'gfon_latest_posts_shortcode');
Dùng trong bài viết:
[bai_moi]
4. Dùng shortcode trong PHP
Trong file .php
, bạn có thể gọi shortcode bằng:
echo do_shortcode('[hello]');
Ứng dụng thực tế của Shortcode
Ứng dụng | Mô tả |
---|---|
Nút bấm gọi điện | [goi sdt="0912345678" text="Tư vấn ngay"] |
Hiển thị bài viết nổi bật | [bai_moi] |
Tạo bảng giá linh hoạt | [banggia id="123"] |
Nhúng video hoặc form tùy chỉnh | [video_popup url="..."] |
Hiển thị khóa học CPT | [ds_khoahoc] (lấy từ post type khoahoc ) |
Tổng kết
Khái niệm | Cách dùng |
---|---|
Tạo shortcode | add_shortcode('ten', 'ten_ham') |
Có tham số tùy chỉnh | Dùng $atts và shortcode_atts() |
Hiển thị nội dung động | Viết HTML hoặc loop WP_Query |
Dùng trong bài viết | [ten_shortcode] |
Dùng trong PHP | do_shortcode('[ten_shortcode]') |
Thảo luận