Nhúng file PDF Google drive bằng mã iframe (không cần plugin)

Có, bạn hoàn toàn có thể nhúng file PDF từ Google Drive vào website WordPress bằng cách sử dụng mã nhúng (iframe) mà không cần plugin, hoặc dùng plugin để đơn giản hóa quy trình. Dưới đây là hai cách phổ biến:

Nhúng file PDF bằng mã iframe (Không cần plugin)

Tải file PDF lên Google Drive

Truy cập Google Drive, đăng nhập tài khoản của bạn.

Nhấp vào “Mới” (New) > “Tải tệp lên” (File Upload) và chọn file PDF từ máy tính.

Chia sẻ file công khai

Nhấp chuột phải vào file PDF vừa tải lên, chọn “Chia sẻ” (Share).

Trong phần “Quyền truy cập chung” (General Access), chọn “Bất kỳ ai có liên kết” (Anyone with the link) để mọi người có thể xem file.

Lấy mã nhúng và chèn vào web

Tiếp theo bạn sao chép liên kết để xác định được ID của tài liệu bạn chia sẻ

Ví dụ ID của mình như sau:

https://drive.google.com/file/d/1zO-rlfz55We9nB0-rqbRndtD8KFWy4T3/view?usp=sharing

Khi xác định được ID rồi bạn có thể thay vào mã code dưới đây rồi sau đó copy mã code chèn vào trong trang web WordPress

<iframe src="https://drive.google.com/file/d/MÃ_FILE/preview" width="640" height="480"></iframe>

Sau khi xác định được ID và áp dụng với code irame mình để ở trên bạn có thể đưa chúng vào bài viết bằng cách click sang tab Văn bản (text) sau đó lưu lại là xong.

Dán đoạn mã iframe vừa sao chép. Bạn có thể điều chỉnh width (chiều rộng) và height (chiều cao) theo ý muốn, ví dụ: width="100%" chiều cao ví dụ chỉnh lại height="600".

Lưu và xem kết quả.

Nếu bạn vẫn gặp khó khăn có thể theo dõi video sau nhé.

Áp dụng code chức năng shortcode

Cách chèn iframe ở trên hoạt động vẫn rất tốt, nhưng bạn có thể áp dụng code chức năng shortcode dưới đây để tiện sử dụng hơn.

1. Truy cập vào Giao diện (Appearance) > Trình chỉnh sửa tệp giao diện (Theme File Editor) trong bảng điều khiển WordPress.

2. Tìm và mở file functions.php (nếu dùng child theme thì nên thêm vào child theme để tránh mất code khi cập nhật).

3. Thêm đoạn mã sau vào cuối file:

4. Và sau đó Lưu file lại.

// Tạo shortcode để nhúng PDF từ Google Drive
function embed_gdrive_pdf_shortcode($atts) {
    // Thiết lập các thuộc tính mặc định
    $atts = shortcode_atts(
        array(
            'id' => '', // ID của file Google Drive
            'width' => '100%', // Chiều rộng mặc định
            'height' => '800px', // Chiều cao mặc định
        ),
        $atts,
        'gdrive_pdf'
    );

    // Kiểm tra nếu không có ID thì trả về thông báo lỗi
    if (empty($atts['id'])) {
        return 'Vui lòng cung cấp ID file Google Drive.';
    }

    // Tạo mã iframe
    $iframe = '<iframe src="https://drive.google.com/file/d/' . esc_attr($atts['id']) . '/preview" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '"></iframe>';

    return $iframe;
}
add_shortcode('gdrive_pdf', 'embed_gdrive_pdf_shortcode');

Sử dụng shortcode

Sau khi thêm mã trên, bạn có thể sử dụng shortcode trong bài viết hoặc trang như sau:

Chỉ cần ID của file PDF lấy từ URL, ví dụ 1zO-rlfz55We9nB0-rqbRndtD8KFWy4T3

[gdrive_pdf id="1zO-rlfz55We9nB0-rqbRndtD8KFWy4T3"]

Tùy chỉnh kích thước (nếu muốn thay đổi width hoặc height):

[gdrive_pdf id="1zO-rlfz55We9nB0-rqbRndtD8KFWy4T3" width="80%" height="500px"]

Shortcode này sẽ tự động tạo iframe giống như mã của bạn, nhưng gọn gàng và dễ áp dụng hơn.

Ưu điểm của cách này

Dễ sử dụng: Chỉ cần lấy ID file và dán shortcode, không cần copy toàn bộ iframe.

Linh hoạt: Có thể thay đổi width và height ngay trong shortcode mà không cần chỉnh sửa mã HTML.

Tái sử dụng: Áp dụng cho bất kỳ file PDF nào từ Google Drive chỉ bằng cách thay ID.

Lưu ý

Nếu bạn không quen chỉnh sửa functions.php trực tiếp, có thể dùng plugin như Code Snippets để thêm mã này mà không cần động vào file theme.

Đảm bảo file PDF trên Google Drive đã được chia sẻ công khai (“Bất kỳ ai có liên kết”) để shortcode hoạt động.

Bạn thử áp dụng xem sao, nếu cần điều chỉnh có thể live chat với team bên mình nhé Zalo 0868017791