3 cách nhúng iFrame code vào WordPress

7 giờ ago, Hướng dẫn WordPress, Views
3 cách nhúng iFrame code vào WordPress

Giới thiệu về iFrame và WordPress

iFrame, viết tắt của “Inline Frame,” là một phần tử HTML cho phép bạn nhúng một trang web, video, bản đồ hoặc bất kỳ nội dung HTML nào khác vào trang web của bạn. Nó hoạt động như một “cửa sổ” nhỏ hiển thị nội dung từ một nguồn khác trong trang web hiện tại của bạn. WordPress, một hệ thống quản lý nội dung (CMS) phổ biến, cung cấp nhiều cách để bạn nhúng iFrame vào các bài viết, trang hoặc widget.

Việc nhúng iFrame có thể hữu ích trong nhiều trường hợp, ví dụ:

  • Hiển thị video từ YouTube hoặc Vimeo.
  • Nhúng bản đồ Google Maps để hiển thị vị trí.
  • Nhúng biểu mẫu liên hệ từ các dịch vụ bên ngoài.
  • Hiển thị nội dung từ các trang web khác mà không cần sao chép trực tiếp.

Bài viết này sẽ hướng dẫn bạn ba cách nhúng iFrame code vào WordPress một cách dễ dàng.

Cách 1: Sử dụng trình soạn thảo Gutenberg (Block Editor)

Trình soạn thảo Gutenberg là trình soạn thảo mặc định của WordPress từ phiên bản 5.0 trở đi. Nó sử dụng các khối (blocks) để xây dựng nội dung trang web. Cách nhúng iFrame bằng Gutenberg rất đơn giản:

  1. Mở bài viết hoặc trang WordPress mà bạn muốn nhúng iFrame.
  2. Nhấp vào biểu tượng dấu cộng (+) để thêm một khối mới.
  3. Tìm kiếm và chọn khối “HTML tùy chỉnh” (Custom HTML).
  4. Dán iFrame code vào khối HTML tùy chỉnh.
  5. Xem trước bài viết hoặc trang để đảm bảo iFrame hiển thị đúng cách.
  6. Xuất bản hoặc cập nhật bài viết/trang.

Ví dụ: Giả sử bạn muốn nhúng một video YouTube với iFrame code như sau:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bạn chỉ cần sao chép đoạn code này và dán vào khối “HTML tùy chỉnh” trong Gutenberg.

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

  • Đơn giản và dễ thực hiện.
  • Không cần cài đặt plugin bổ sung.
  • Cho phép tùy chỉnh kích thước và thuộc tính của iFrame.

Nhược điểm của cách này:

  • Yêu cầu bạn phải có iFrame code sẵn.
  • Có thể gây khó khăn cho người mới bắt đầu nếu chưa quen với HTML.

Cách 2: Sử dụng Plugin WordPress

Nếu bạn không muốn sử dụng trình soạn thảo Gutenberg hoặc muốn có nhiều tùy chọn hơn để quản lý iFrame, bạn có thể sử dụng các plugin WordPress chuyên dụng. Có rất nhiều plugin miễn phí và trả phí có sẵn trên thư viện plugin WordPress.

Ví dụ: Một số plugin phổ biến:

  • Advanced iFrame: Plugin này cho phép bạn nhúng iFrame với nhiều tùy chỉnh nâng cao, bao gồm cả việc thay đổi kích thước, cuộn trang, và thậm chí lọc nội dung của trang được nhúng.
  • Iframe: Plugin đơn giản cho phép bạn nhúng iFrame bằng shortcode.
  • EmbedPress: Plugin mạnh mẽ cho phép bạn nhúng nội dung từ nhiều nguồn khác nhau, bao gồm YouTube, Vimeo, Google Maps, và nhiều hơn nữa. Nó tự động chuyển đổi các URL thành iFrame.

Hướng dẫn sử dụng plugin (ví dụ: Advanced iFrame):

  1. Cài đặt và kích hoạt plugin “Advanced iFrame” từ thư viện plugin WordPress.
  2. Truy cập trang hoặc bài viết mà bạn muốn nhúng iFrame.
  3. Sử dụng shortcode [advanced_iframe securitykey="your_secret_key" src="URL_của_trang_web"]. Thay thế `URL_của_trang_web` bằng URL của trang web bạn muốn nhúng. Thay thế `your_secret_key` bằng một khóa bí mật do plugin tạo ra (tham khảo hướng dẫn của plugin).
  4. Bạn có thể thêm các thuộc tính khác vào shortcode để tùy chỉnh iFrame, ví dụ: width, height, scrolling, v.v.
  5. Xem trước và xuất bản bài viết/trang.

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

  • Dễ sử dụng, đặc biệt với người không quen thuộc với HTML.
  • Cung cấp nhiều tùy chọn tùy chỉnh và quản lý iFrame.
  • Có thể nhúng iFrame bằng shortcode, giúp việc thêm iFrame vào nhiều vị trí khác nhau trở nên dễ dàng.

Nhược điểm của cách này:

  • Cần cài đặt và quản lý plugin.
  • Một số plugin có thể làm chậm trang web nếu không được tối ưu hóa tốt.
  • Một số plugin có thể yêu cầu trả phí để sử dụng các tính năng nâng cao.

Cách 3: Sử dụng Custom Fields (Trường Tùy Chỉnh)

Cách này phù hợp nếu bạn muốn nhúng iFrame vào nhiều bài viết hoặc trang và muốn quản lý iFrame code một cách tập trung. Bạn có thể sử dụng Custom Fields (trường tùy chỉnh) để lưu trữ iFrame code và hiển thị nó trong template của bạn.

Hướng dẫn:

  1. Cài đặt và kích hoạt plugin cho phép bạn quản lý Custom Fields (ví dụ: Advanced Custom Fields – ACF).
  2. Tạo một trường tùy chỉnh kiểu “Text” hoặc “Text Area” với tên ví dụ: “iframe_code”.
  3. Trong mỗi bài viết hoặc trang mà bạn muốn nhúng iFrame, nhập iFrame code vào trường tùy chỉnh “iframe_code”.
  4. Chỉnh sửa template của bài viết/trang để hiển thị iFrame code từ trường tùy chỉnh. Sử dụng hàm `get_field(‘iframe_code’)` (nếu bạn sử dụng ACF) để lấy giá trị của trường tùy chỉnh.
  5. Ví dụ, trong template `single.php` hoặc `page.php`, bạn có thể thêm đoạn code sau: 
    <?php
    $iframe_code = get_field('iframe_code');
    if( $iframe_code ): ?>
      <div class="iframe-container">
        <?php echo $iframe_code; ?>
      </div>
    <?php endif; ?>

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

  • Quản lý iFrame code một cách tập trung.
  • Dễ dàng thay đổi iFrame code cho tất cả các bài viết/trang bằng cách thay đổi giá trị của trường tùy chỉnh.
  • Linh hoạt trong việc tùy chỉnh vị trí và cách hiển thị iFrame trong template.

Nhược điểm của cách này:

  • Yêu cầu kiến thức về chỉnh sửa template WordPress.
  • Có thể phức tạp hơn so với hai cách trên, đặc biệt đối với người mới bắt đầu.
  • Cần cài đặt và quản lý plugin Custom Fields.

Kết luận

Bài viết này đã giới thiệu ba cách nhúng iFrame code vào WordPress: sử dụng trình soạn thảo Gutenberg, sử dụng plugin WordPress, và sử dụng Custom Fields. Mỗi cách có những ưu và nhược điểm riêng, và bạn nên chọn cách phù hợp nhất với nhu cầu và trình độ kỹ thuật của mình. Chúc bạn thành công!

, , , ,

..