Hướng dẫn tạo Shortcode nhúng bài viết/trang bất kỳ vào WordPress không cần Plugin

by daiphucminh

Dưới đây là bài viết hoàn chỉnh, được trình bày mạch lạc, dễ hiểu theo đúng phong cách thực hành step-by-step để bạn đăng lên hov.vn làm tư liệu tra cứu về sau.

Hướng dẫn tạo Shortcode nhúng bài viết/trang bất kỳ vào WordPress không cần Plugin

Khi làm web WordPress, đôi khi bạn muốn nhúng toàn bộ nội dung của một bài viết (Post) hoặc một trang (Page) vào bên trong một bài viết khác. Mặc định WordPress không hỗ trợ sẵn tính năng này, còn cài thêm plugin thì lại làm nặng web.

Bài viết này sẽ hướng dẫn bạn cách thêm một đoạn code ngắn vào file functions.php để tạo ra một mã ngắn (shortcode) riêng biệt mang tên [nhungbaiviet], giúp nhúng nội dung linh hoạt và tùy chọn ẩn/hiện tiêu đề cực kỳ đơn giản.

1. Đoạn mã PHP chèn vào functions.php

Bạn truy cập vào Giao diện (Appearance) $\rightarrow$ Sửa tệp chủ đề (Theme File Editor) $\rightarrow$ Chọn file functions.php (hoặc chỉnh sửa qua FTP/CPanel) và dán đoạn code sau vào cuối file:

PHP

/* ==========================================================================
   HƯỚNG DẪN SỬ DỤNG MÃ NGẮN NHÚNG BÀI VIẾT / TRANG (NHUNGBAIVIET)
   --------------------------------------------------------------------------
   Cú pháp sử dụng trong bài viết hoặc trang:
   
   1. Nhúng HIỆN tiêu đề:
      [nhungbaiviet id="123" title="yes"]
      
   2. Nhúng ẨN tiêu đề (mặc định):
      [nhungbaiviet id="123"]
      
   * Thay 123 bằng ID của Bài viết (Post) hoặc Trang (Page) cần nhúng.
   ========================================================================== */

function nbv_nhung_bai_viet_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id'    => '',      // ID của Bài viết hoặc Trang
        'title' => 'no',    // 'yes' = Hiện tiêu đề | 'no' = Ẩn tiêu đề
    ), $atts, 'nhungbaiviet');

    if (empty($atts['id'])) return '';

    $post_id = intval($atts['id']);
    $item = get_post($post_id);

    if (!$item) return '';

    $output = '<div class="nhungbaiviet-box">';
    
    // Kiểm tra ẩn / hiện tiêu đề
    if (strtolower($atts['title']) === 'yes') {
        $output .= '<h3 class="nhungbaiviet-title">' . esc_html(get_the_title($post_id)) . '</h3>';
    }

    // Hiển thị nội dung (dùng chung cho cả Trang và Bài viết)
    $content = apply_filters('the_content', $item->post_content);
    $output .= '<div class="nhungbaiviet-content">' . $content . '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('nhungbaiviet', 'nbv_nhung_bai_viet_shortcode');

2. Cách lấy ID bài viết hoặc trang

Để nhúng đúng nội dung, bạn cần biết ID của Bài viết hoặc Trang đó:

  1. Vào danh sách Bài viết (Posts) hoặc Trang (Pages) trong quản trị WordPress.

  2. Rê chuột vào tên bài viết hoặc trang cần lấy ID.

  3. Nhìn xuống góc dưới bên trái màn hình trình duyệt, bạn sẽ thấy một đường dẫn chứa đoạn post=123 (Trong đó 123 chính là ID cần tìm).

3. Cú pháp sử dụng mã ngắn trong bài viết

Khi soạn thảo bài viết mới (bằng Gutenberg hay Classic Editor), bạn chèn khối Shortcode và nhập cú pháp tương ứng:

1.Nhúng ẨN tiêu đề (Mặc định):Chỉ lấy nội dung.

Dùng khi bạn chỉ muốn lấy nội dung bài viết/trang mà không muốn hiển thị lại tiêu đề trùng lặp:

[nhungbaiviet id="123"]

2.Nhúng HIỆN tiêu đề:Hiện cả tiêu đề và nội dung.

Dùng khi bạn muốn hiển thị đầy đủ cả tiêu đề bài viết/trang kèm nội dung bên trong:

[nhungbaiviet id="123" title="yes"]

 

4. (Tùy chọn) Thêm CSS làm đẹp khung nhúng

Nếu muốn vùng nội dung được nhúng nhìn tách biệt, đóng khung đẹp mắt hơn so với bài viết chính, bạn có thể thêm đoạn CSS này vào phần Giao diện $\rightarrow$ Tùy biến $\rightarrow$ CSS bổ sung (Additional CSS):

CSS

.nhungbaiviet-box {
    border: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 6px;
}

.nhungbaiviet-title {
    margin-top: 0;
    color: #0073aa;
    font-size: 1.2em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

Ưu điểm của cách này: Code cực kỳ nhẹ, dùng chung được cho cả Page và Post, tên shortcode nhungbaiviet thuần Việt dễ nhớ và không lo bị đụng hàng hay xung đột với bất kỳ plugin nào khác.

Related Posts

Leave a Comment

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