Hướng dẫn chèn iframe vào wordpress

Đối với dân công nghệ chuyên làm website thì iFrame là một khái niệm không quá xa lạ. Rất nhiều website trên mạng đang sử dụng iFrame để tải thông tin video, hình ảnh, mã nguồn website khác lên trang web của mình. Cùng mình tìm hiểu kỹ hơn về iFrame nhé.

Mục Lục

• 1 iFrame là gì?
• 2 Cách chèn iFrame lên website 
• 3 Các thuộc tính của iFrame
• 4 Lưu ý về việc sử dụng iFrame
  • 4.1 Vấn đề bảo mật
  • 4.2 Vấn đề về tốc độ truy cập
  • 4.3 Vấn đề về SEO
• 5 Tóm lại
  • 5.1 Bài viết liên quan
  • 5.2 Bình Luận

iFrame là một khung nội tuyển(inline frame) được sử dụng trong website mục đích để tải dữ liệu html nằm ở bên trong iframe.

iFrame là gì

Để giúp tăng sự thu hút hơn cho website, các lập trình viên thường chèn iFrame vào website để giúp người dùng tăng tỉ lệ on site hơn, tiện ích hơn.

Thường thì iFrame được dùng nhiều trong việc chèn video, hình ảnh, hoặc get mã nguồn trang web khác về website của mình.

Ví dụ về iFrame:

 src="https://www.youtube.com/embed/hspHB49A65M" width="680" height="480" allowfullscreen>

Đây là ví dụ chèn video Youtube vào website của bạn.

Cách chèn iFrame lên website 

Nếu bạn không biết về kỹ thuật code website, bạn có thể sử dụng Plugin để chèn iFrame vào website WordPress

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.

cài đặt Plugin iframe

Còn nếu bạn biết sử dụng code thì có thể dùng cặp thẻ  để chèn video, hình ảnh hoặc html từ trang web khác về nhé.

Các thuộc tính của iFrame

iFrame có một số thuộc tính đơn giản như trích xuất nguồn, chiều rộng, chiều cao đến phức tạp hơn như kẻ đường viền iFrame, canh lề trái phải… Tuy nhiên, ở bài viết này, chúng tôi sẽ giới thiệu đến bạn đọc những thuộc tính cơ bản nhất của iFrame:

• src: Thuộc tính khai báo đường dẫn tới 1 trang web hoặc 1 file tài liệu nào đó.
• width: Thuộc tính dùng để khai báo chiều rộng của iFrame (đơn vị là px hoặc %)
• height: Thuộc tính dùng để khai báo chiều cao của iFrame (đơn vị là px hoặc %)
• name: Thuộc tính này dùng để đặt tên cho frame. Nó hay được dùng khi muốn hiển thị 1 liên kết nào đó trong 1 frame có thuộc tính name
• frameborder: Thuộc tính dùng để thiết lập đường viền bao quanh frame. Thuộc tính này sẽ có 2 giá trị: 0 – ẩn đường viền, 1 – hiện đường viền. Nếu không khai báo thuộc tính này thì mặc định là đường viền được hiển thị

Ví dụ điển hình:

 src="https://examples.com/documents" width="100%" height="500px" name="the-iFrame" frameborder="0">

Lưu ý về việc sử dụng iFrame

Mặc dù là một công cụ giúp cho nội dung sinh động hơn. Nhưng khi sử dụng iFrame cũng tiềm ẩn nhiều rủi ro nhất định.

Vấn đề bảo mật

Việc bạn nhúng nhiều thành phần của các trang web từ trang khác vào website của mình để tạo ra các multiple view (các cửa sổ độc lập). Và nếu website bạn chạy tốt với phương pháp này, nó sẽ đem lại lợi ích cực kì lớn cho người đọc trong quá trình truy cập. Bởi họ chỉ cần tìm đến một địa chỉ website duy nhất lại có thể tổng hợp kiến thức trực quan sinh động từ nhiều nguồn khác nhau.

Tuy vậy, nó cũng phát sinh ra một số vấn đề. Lí do bắt nguồn từ đâu? Trên thực tế, bạn không thể kiểm soát toàn diện những nội dung bạn đã nhúng trên website của mình. Nó có thể chứa các đoạn mã độc hại. Đồng thời cũng gây ảnh hưởng xấu hoặc làm thay đổi nội dung trên trang web. Nó thậm chí còn có thể đánh cắp thông tin người dùng. Có khả năng chuyển hướng trang không kiểm soát.

Hậu quả là nội dung trong trang có thể bị sai lệch. Nặng hơn khiến cho website đánh mất uy tín, mất đi lượng khách hàng truy cập trung thành.

Vấn đề về tốc độ truy cập

Vấn đề sử dụng iFrame quá nhiều sẽ khiến website chịu tải để load thêm các hình ảnh, video, các nội dung trang website khác về. Dẫn đến tốc độ sẽ bị chậm hơn khá nhiều. Ngoài ra do nội dung website khác bị lỗi cũng sẽ khiến iFrame cũng hiển thị lỗi. Làm mất khá nhiều thời gian tải trang.

Vấn đề về SEO

iFrame nhúng vào bài viết sẽ một phần giúp thời gian giữ chân người dùng trên website tăng lên, khá tốt cho SEO nhưng không phải bất kỳ thứ gì hoặc bài viết gì cũng chèn iFrame cũng hiệu quả. Nó sẽ là một đòn hồi mã thương khiến website của bạn trì trệ nếu sử dụng quá mức iFrame.

sử dụng iframe sao cho hiệu quả

Chính vì vậy mà việc tận dụng, sử dụng hợp lý sẽ giúp website của bạn tốt lên. Đừng quá lạm dụng sẽ ảnh hưởng xấu đến quá trình làm SEO của bạn.

Tóm lại

Qua các vấn đề trên chắc hẳn bạn đã có 1 chút kiến thức về iFrame cũng như cách sử dụng nó. Bài học ở đây là bạn nên lựa chọn và cân nhắc trước khi dùng bất kỳ thứ gì vào website của mình. Tránh tình trạng tối ưu quá mức mà phản tác dụng.

Bình Luận