3 cách nhúng iFrame code vào WordPress
3 Cách Nhúng iFrame Code vào WordPress
iFrame (Inline Frame) là một thẻ HTML cho phép bạn nhúng một trang web khác hoặc một đoạn nội dung từ một nguồn bên ngoài vào trang web của bạn. Việc nhúng iFrame rất hữu ích khi bạn muốn hiển thị video, bản đồ, mạng xã hội hoặc bất kỳ nội dung nào khác mà không cần phải tải lên trực tiếp lên website WordPress của mình.
Bài viết này sẽ hướng dẫn bạn 3 cách đơn giản để nhúng iFrame code vào trang web WordPress, giúp bạn dễ dàng tích hợp nội dung đa dạng và phong phú từ các nguồn khác nhau.
Cách 1: Sử Dụng Trình Chỉnh Sửa Gutenberg
Gutenberg là trình chỉnh sửa mặc định của WordPress và cung cấp một cách trực quan để nhúng iFrame code.
Bước 1: Sao Chép Mã iFrame
Đầu tiên, bạn cần sao chép mã iFrame từ nguồn mà bạn muốn nhúng. Ví dụ, bạn muốn nhúng một video YouTube, hãy lấy mã nhúng từ phần chia sẻ của video đó.
Bước 2: Thêm Khối “HTML Tuỳ Chỉnh”
Trong trình chỉnh sửa Gutenberg, hãy tạo một bài viết hoặc trang mới, hoặc chỉnh sửa một bài viết hiện có. Nhấn vào biểu tượng dấu cộng (+) để thêm một khối mới. Tìm kiếm và chọn khối “HTML Tuỳ Chỉnh” (Custom HTML).
Bước 3: Dán Mã iFrame
Trong khối “HTML Tuỳ Chỉnh”, dán mã iFrame bạn đã sao chép. Gutenberg sẽ hiển thị bản xem trước của iFrame trực tiếp trong trình chỉnh sửa.
Bước 4: Xem Trước và Đăng Bài
Xem trước bài viết hoặc trang của bạn để đảm bảo iFrame hiển thị đúng cách. Sau đó, đăng hoặc cập nhật bài viết.
Cách 2: Sử Dụng Plugin WordPress
Nếu bạn muốn có nhiều tùy chọn kiểm soát hơn đối với cách iFrame được hiển thị, bạn có thể sử dụng một plugin WordPress. Có rất nhiều plugin iFrame miễn phí và trả phí có sẵn trên kho plugin WordPress.
Các Plugin iFrame Phổ Biến
- Advanced iFrame
- Iframe
- Easy iFrame
Ví Dụ Sử Dụng Plugin “Advanced iFrame”
Plugin Advanced iFrame là một lựa chọn mạnh mẽ và linh hoạt để quản lý iFrame trong WordPress.
Bước 1: Cài Đặt và Kích Hoạt Plugin
Tìm kiếm và cài đặt plugin “Advanced iFrame” từ kho plugin WordPress. Sau khi cài đặt, kích hoạt plugin.
Bước 2: Sao Chép Mã iFrame
Tương tự như cách 1, sao chép mã iFrame bạn muốn nhúng.
Bước 3: Sử Dụng Shortcode
Plugin Advanced iFrame cung cấp một shortcode để nhúng iFrame. Shortcode có dạng:
[advanced_iframe src="URL của trang web" width="chiều rộng" height="chiều cao"]Thay thế “URL của trang web” bằng URL của trang web bạn muốn nhúng, “chiều rộng” và “chiều cao” bằng kích thước mong muốn của iFrame.
Bước 4: Dán Shortcode vào Bài Viết
Trong trình chỉnh sửa Gutenberg, thêm một khối “Shortcode” và dán shortcode bạn đã tạo. Xem trước và đăng bài viết.
Ưu Điểm của Plugin Advanced iFrame:
- Nhiều tùy chọn cấu hình (chiều rộng, chiều cao, cuộn, v.v.)
- Hỗ trợ responsive design
- Khả năng chặn và sửa đổi nội dung iFrame
Cách 3: Chỉnh Sửa File Theme (Chỉ Dành Cho Người Dùng Nâng Cao)
Cách này đòi hỏi bạn phải có kiến thức về code và hiểu rõ về cấu trúc theme WordPress. Việc chỉnh sửa trực tiếp file theme có thể gây ra lỗi nếu bạn không cẩn thận.
Bước 1: Sao Lưu File Theme
Trước khi thực hiện bất kỳ thay đổi nào, hãy sao lưu file theme của bạn. Điều này rất quan trọng để bạn có thể khôi phục lại website nếu có sự cố xảy ra.
Bước 2: Xác Định Vị Trí Chèn iFrame
Xác định vị trí cụ thể trong theme mà bạn muốn chèn iFrame. Ví dụ, bạn có thể muốn chèn iFrame vào footer, sidebar, hoặc một trang cụ thể.
Bước 3: Chỉnh Sửa File Theme
Sử dụng trình quản lý file (File Manager) trong hosting của bạn hoặc một phần mềm FTP để truy cập vào các file theme. Tìm file mà bạn muốn chỉnh sửa (ví dụ: footer.php, sidebar.php, page.php). Chèn mã iFrame vào vị trí bạn đã xác định.
Bước 4: Lưu Thay Đổi và Kiểm Tra
Lưu các thay đổi và kiểm tra trang web của bạn để đảm bảo iFrame hiển thị đúng cách. Nếu có lỗi, hãy khôi phục lại file theme từ bản sao lưu.
Lưu Ý Quan Trọng:
- Cách này chỉ nên được thực hiện bởi người dùng có kinh nghiệm.
- Luôn sao lưu file theme trước khi chỉnh sửa.
- Sử dụng child theme để tránh mất các thay đổi khi cập nhật theme.
Lời Khuyên Khi Nhúng iFrame
Khi nhúng iFrame, hãy lưu ý một số điều sau để đảm bảo trải nghiệm người dùng tốt và tránh các vấn đề bảo mật:
- Kích Thước iFrame: Đảm bảo iFrame có kích thước phù hợp với nội dung của trang web của bạn. Tránh sử dụng kích thước quá lớn hoặc quá nhỏ.
- Nguồn iFrame: Chỉ nhúng iFrame từ các nguồn đáng tin cậy. Nhúng iFrame từ các nguồn không an toàn có thể gây ra các vấn đề bảo mật.
- Hiệu Năng: Nhúng quá nhiều iFrame có thể làm chậm tốc độ tải trang web của bạn. Hãy sử dụng iFrame một cách hợp lý.
Kết Luận
Việc nhúng iFrame vào WordPress là một cách tuyệt vời để tích hợp nội dung từ các nguồn khác nhau vào trang web của bạn. Bằng cách sử dụng một trong ba cách được trình bày trong bài viết này, bạn có thể dễ dàng nhúng video, bản đồ, mạng xã hội và nhiều loại nội dung khác vào trang web WordPress của mình.
