Làm cách nào để nhúng iFrame vào website WordPress? WordPress iFrame là gì và nó thực sự làm gì? Tuyệt vời, bạn đang hỏi đúng câu hỏi và tôi sẽ trả lời tất cả chúng, bao gồm cả cách nhúng iFrame có hoặc không có plugin!

Bây giờ có lẽ bạn đã duyệt hàng ngàn trang web với mỗi trang sử dụng các hình thức đa phương tiện khác nhau như hình ảnh, video, Gifs và clip âm thanh, v.v ... Tại sao? Bởi vì mọi người đều muốn blog hoặc trang web WordPress của họ hấp dẫn và dễ tương tác. Tuy nhiên, việc lưu trữ tất cả các video và hình ảnh trong nhà đòi hỏi nhiều tài nguyên và thậm chí có thể tác động tiêu cực đến hiệu suất trang web của bạn .

Vì vậy, không có gì bí mật khi một trang web tĩnh có ít nội dung tải nhanh hơn một trang web động có hình ảnh và video. Hãy cùng tìm hiểu iFrame là gì?

 iFrame là gì?

Một iFrame là một thẻ HTML mà bạn có thể sử dụng để hiển thị nội dung từ một trang web khác trên trang web WordPress của bạn. Bạn có thể nghĩ nó giống như một cửa sổ cho phép khách truy cập tương tác với nội dung từ một trang web khác được lưu trữ ở một nơi khác mà không cần rời khỏi trang web của bạn.

Về bản chất, bạn có thể có một trang động trên trang web của mình mà không lưu trữ nội dung trên máy chủ của mình, do đó có thể hạn chế tác động đến tốc độ tải máy chủ và trang web của bạn.

Các video YouTube trên trang web của bạn, người dùng của bạn có thể xem các video đó mà không cần tải thêm trên máy chủ của bạn vì các video được phát trực tiếp từ máy chủ của YouTube.

Vì vậy, ngay cả khi bạn chạy một trang web đánh giá phim với hàng ngàn đoạn giới thiệu, bạn chỉ có thể nhúng các đoạn giới thiệu phim từ YouTube hoặc Vimeo mà không cần bất kỳ tài nguyên bổ sung nào. Điều đó thật tuyệt phải không?

Ví dụ về iFrame

Hãy xem xét một số ví dụ trong đó iFrames được sử dụng để hiển thị thông tin.

Ưu và nhược điểm của việc sử dụng iFrame?

Có một vài ưu và nhược điểm khi sử dụng iFrame và là một quản trị trang web, bạn nên biết cả hai.

Ưu

  • iFrame cho phép bạn nhúng nội dung trực quan một cách tự do.
  • iFrames có thể hiển thị nhiều quảng cáo.
  • Đó là một cách thuận tiện để hiển thị nội dung từ nguồn bên ngoài ở bất cứ đâu trên trang web.
  • Nó an toàn vì người dùng không có quyền truy cập vào mã của nội dung gốc.

Tuy nhiên không có gì hoàn toàn tốt đẹp. Mặc dù iFrame là một cách tuyệt vời để hiển thị nội dung từ một trang web bên ngoài, nhưng cũng có một số nhược điểm khi sử dụng nội dung đó.

Nhược điểm

  • Nó có thể làm chậm trang web. Tránh sử dụng nó trừ khi nó là cần thiết.
  • Chúng có thể gây ra các mối đe dọa bảo mật nếu được liên kết với các trang web độc hại có thể lây nhiễm vào máy tính của người dùng.
  • Không phải tất cả các loại thiết bị đều hỗ trợ iFrame.
  • Nó không lý tưởng để tối ưu hóa công cụ tìm kiếm.

Đánh giá những ưu và nhược điểm của việc sử dụng iFrame, bạn có thể đưa ra quyết định sáng suốt về việc bạn có muốn sử dụng nó trên trang web của mình hay không.

Bây giờ chúng ta hãy xem cách nhúng iFrame trong WordPress .

Cách nhúng iFrame WordPress với Plugin

Cách dễ nhất để sử dụng iFrames trong WordPress là thông qua plugin iFrame. Mặc dù có khá nhiều plugin có sẵn, tôi đang sử dụng plugin Advanced iFrame cho hướng dẫn này.

Để cài đặt plugin, chỉ cần đăng nhập vào bảng điều khiển WordPress của bạn và truy cập Plugins → Thêm mới và tìm kiếm plugin Advanced iFrame.

Khi plugin iFrame WordPress được cài đặt và kích hoạt, hãy điều hướng đến tab Advanced iFrame từ menu bên cạnh và nhấp vào tab Basic Settings từ trên cùng.

Bạn có thể xác định bố cục, chẳng hạn như chiều rộng, chiều cao, đường viền và hành vi cuộn của iFrame của bạn từ đây.

Để lưu cài đặt và để tạo một mã ngắn, hãy nhấp vào nút Generate a shortcode for the current settings.

Sao chép mã được tạo và dán nó vào bất kỳ trang nào bạn muốn nhúng iFrame này.

Chiều rộng và chiều cao, nếu bạn chú ý, được xác định rõ ràng bên trong shortcode và bạn có thể thay đổi chúng theo yêu cầu của bạn.

Đây là giao diện sau khi bạn đặt shortcode bên trong một trong các trang của mình.

Tôi đã nhúng thành công một trang web bên ngoài vào trang web WordPress của mình bằng cách sử dụng plugin Advanced iFrame.

Nếu bạn cần thay đổi chiều rộng hoặc chiều cao của iFrame, chỉ cần thao tác các số kích thước trong shortcode.

Bạn cũng có thể xem thử nghiệm tốc độ nhanh của trang web WordPress trước và sau khi sử dụng iFrame WordPress bằng cách sử dụng plugin.

Trước

Sau

Rõ ràng là có một sự khác biệt rất lớn trong hiệu suất. Sau khi sử dụng plugin để tích hợp iFrame, số lượng yêu cầu tăng từ 8 lên 98 và điểm hiệu suất giảm từ 96 xuống 86.

Hãy xem liệu việc thêm iFrame trong WordPress mà không có plugin có ảnh hưởng tương tự đến hiệu suất hay không.

Nhúng iFrame WordPress mà không cần plugin

Bạn không cần phải là người đam mê để viết một mã đơn giản cần thiết để thêm iFrame vào trang web WordPress của bạn. Nếu bạn đã thêm mã HTML trước đó, bạn sẽ thấy phương pháp này đơn giản để sử dụng.

Mã mặc định để sử dụng cho iFrame là:

Thay your_webpage_url bằng đường link iframe bạn cần. Tuy nhiên, bạn có thể thêm các tham số bổ sung để đạt được chiều rộng và chiều cao mong muốn.

Trong đoạn mã trên đã xác định chiều rộng để chiếm chiều rộng hoàn chỉnh của vùng chứa và đặt chiều cao ở mức 300px.

Đối với căn chỉnh thì nó được đã đặt nó ở bên trái, nhưng bạn có thể đặt nó ở bên phải, ngay trên đầu, hoặc trên dưới.

Hãy thực hiện một bài kiểm tra tốc độ nhanh khác để phân tích hiệu suất của trang web trước và sau khi sử dụng iFrame WordPress mà không cần plugin .

Trước

Sau

Sử dụng iFrame mà không có plugin cho thấy việc load time sẽ diễn ra nhanh chóng hơn.

Cả hai phương pháp trên sẽ cho bạn hiểu về cách iFrames có thể làm chậm tốc độ trang. Tuy nhiên, vì nó giúp bạn tiết kiệm rất nhiều tài nguyên máy chủ và không ảnh hưởng đến hiệu suất tổng thể của trang web, bạn có thể tự đưa ra quyết định xem bạn có nên sử dụng iFrame cho WordPress trên trang web của mình hay không!