Shortcode Nhúng Nội Dung Bài Viết (kn_show_post)

by daiphucminh

💾

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à

Không tìm thấy bài viết
. 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.

  1. Truy cập file functions.php của theme đang hoạt động.
  2. Sao chép toàn bộ đoạn mã PHP ở mục 3 (Mã Nguồn).
  3. Dán đoạn mã vào cuối file functions.php.
  4. 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

Không tìm thấy bài viết
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_hover là yes).
Chúc bạn thành công với việc nhúng nội dung linh hoạt!

Related Posts

Leave a Comment

-
00:00
00:00
Update Required Flash plugin
-
00:00
00:00