💾
Hiển thị nội dung, tiêu đề, ảnh đại diện của mọi Post Type bằng Shortcode
1. 📃 Giới Thiệu và Mục Đích
Đoạn mã này tạo ra một **Shortcode** tùy chỉnh có tên là . Mục đích của shortcode này là cho phép bạn **nhúng (embed) nội dung, tiêu đề và ảnh đại diện** của bất kỳ bài viết, trang, hoặc Post Type tùy chỉnh nào (như sản phẩm, dự án, v.v.) vào bất cứ nơi nào bạn muốn trên website (bài viết, trang, sidebar, v.v.).
Đây là giải pháp tuyệt vời để tái sử dụng nội dung, tạo các khối nội dung đặc biệt mà không cần lập trình trực tiếp bằng PHP.
2. ⚒️ Hướng Dẫn Cài Đặt
Quan trọng: Bạn cần dán đoạn mã PHP vào file functions.php của Theme hoặc Child Theme đang hoạt động.
- Truy cập file
functions.phpcủa theme đang hoạt động. - Sao chép toàn bộ đoạn mã PHP ở mục 3 (Mã Nguồn).
- Dán đoạn mã vào cuối file
functions.php. - Lưu file.
3. 💻 Đoạn Mã Nguồn (Dán vào functions.php)
<?php
// Shortcode hiển thị nội dung bài viết, hỗ trợ mọi post type
function kn_show_post_shortcode($atts) {
// Các tham số shortcode
$atts = shortcode_atts([
'id' => '',
'slug' => '',
'type' => '', // Tùy chọn: chỉ định post type cụ thể nếu muốn
'show' => 'content',
'thumb' => 'no',
'show_title' => 'yes',
'hide_title_with_css' => 'no',
'image_hover' => 'no',
], $atts, 'show_post');
// Ẩn tiêu đề page/category với CSS (Nếu cần nhúng vào đầu trang)
if ($atts['hide_title_with_css'] === 'yes') {
add_action('wp_head', function() {
echo '<style>.entry-title, .page-title, .archive-title { display: none !important; }</style>';
});
}
// Thu thập danh sách tất cả post type công khai
$public_post_types = array_keys(get_post_types(['public' => true], 'names'));
// Nếu người dùng chỉ định post type thì ưu tiên
if (!empty($atts['type']) && post_type_exists($atts['type'])) {
$public_post_types = [$atts['type']];
}
// Lấy post theo ID
$post = null;
if (!empty($atts['id'])) {
$post = get_post((int)$atts['id']);
}
// Lấy post theo slug (ở mọi post type công khai)
if (!$post && !empty($atts['slug'])) {
$post = get_page_by_path(sanitize_title($atts['slug']), OBJECT, $public_post_types);
}
// Kiểm tra bài viết hợp lệ
if (!$post || $post->post_status !== 'publish') {
return '<div class="show-post not-found">Không tìm thấy bài viết</div>';
}
// Bắt đầu HTML
$html = '<article class="show-post" id="show-post-' . esc_attr($post->ID) . '">';
// Hiển thị ảnh đại diện
if ($atts['thumb'] === 'yes' && has_post_thumbnail($post->ID)) {
$hover_class = ($atts['image_hover'] === 'yes') ? ' show-post-thumb-container-hover' : '';
$html .= '<div class="show-post-thumb-container' . $hover_class . '">';
$html .= get_the_post_thumbnail($post->ID, 'medium', ['class' => 'show-post-thumb']);
$html .= '</div>';
}
// Tiêu đề
if ($atts['show_title'] === 'yes') {
$html .= '<h3 class="show-post-title">' . esc_html(get_the_title($post)) . '</h3>';
}
// Nội dung
if ($atts['show'] === 'excerpt') {
$html .= '<div class="show-post-excerpt">' . esc_html(get_the_excerpt($post)) . '</div>';
} else {
$html .= '<div class="show-post-content">' . apply_filters('the_content', $post->post_content) . '</div>';
}
$html .= '</article>';
return $html;
}
add_shortcode('show_post', 'kn_show_post_shortcode');
?>
4. 📖 Hướng Dẫn Sử Dụng Shortcode
Sau khi dán mã vào functions.php, bạn có thể sử dụng shortcode với các tham số sau:
| Tham số | Giá trị Mặc định | Mô tả |
|---|---|---|
id |
(Trống) | ID của bài viết/trang cần nhúng. **Nên ưu tiên dùng ID.** |
slug |
(Trống) | Slug (đường dẫn thân thiện) của bài viết/trang. Được dùng nếu không có ID. |
type |
(Trống) | Chỉ định Post Type (ví dụ: post, page, product). Giúp tìm kiếm theo Slug chính xác hơn. |
show |
content |
Chọn nội dung hiển thị: content (toàn bộ nội dung bài viết) hoặc excerpt (đoạn trích). |
thumb |
no |
Hiển thị ảnh đại diện (Featured Image). Dùng yes để bật. |
image_hover |
no |
Thêm class CSS show-post-thumb-container-hover cho ảnh đại diện (dành cho việc tạo hiệu ứng CSS). Dùng yes để bật. |
show_title |
yes |
Hiển thị tiêu đề của bài viết được nhúng. Dùng no để ẩn. |
hide_title_with_css |
no |
Nếu đặt là yes, nó sẽ ẩn tiêu đề của trang hiện tại (rất hữu ích khi nhúng nội dung ở đầu trang). |
Ví dụ Thực tế
- Nhúng toàn bộ nội dung bài viết ID 15:
Không tìm thấy bài viết - Nhúng đoạn trích của Trang “chinh-sach-bao-mat”, kèm ảnh đại diện:
Không tìm thấy bài viết - Nhúng nội dung sản phẩm slug “san-pham-a”, ẩn tiêu đề sản phẩm và ẩn tiêu đề trang hiện tại:
Không tìm thấy bài viết
5. 🔧 Lưu Ý Về CSS
Shortcode này xuất ra HTML với các lớp CSS (classes) sau. Bạn cần sử dụng CSS riêng để định kiểu cho các thành phần này:
.show-post: Thẻ bao ngoài cùng (<article>)..show-post-title: Tiêu đề bài viết được nhúng..show-post-content: Nội dung bài viết chính..show-post-thumb: Ảnh đại diện (<img>)..show-post-thumb-container-hover: Class đặc biệt để tạo hiệu ứng hover cho ảnh (khi tham sốimage_hoverlàyes).
