Chia sẻ nội dung trực tuyến là một thực tế phổ biến. Tuy nhiên, bạn có thể bối rối khi cố gắng tìm ra cách kết hợp một số loại nội dung nhất định. Chia sẻ các tệp lớn hoặc các mục cụ thể từ các trang web khác đôi khi có thể là một thách thức
May mắn thay, có một phương pháp thiết kế web khá đơn giản mà bạn có thể sử dụng để hiển thị các loại nội dung cụ thể trên trang web WordPress của mình. Sử dụng HTML để tạo Khung nội tuyến [iFrames] có thể giúp việc chia sẻ hình ảnh, video và phương tiện khác trực tuyến trở nên đơn giản hơn
Trong bài viết này, chúng ta sẽ khám phá các cách sử dụng khác nhau của iFrames trên một trang web. Chúng tôi cũng sẽ thực hiện các bước để tạo iFrame, cả thủ công và bằng plugin. Bắt đầu nào.
Mục lục
Sử dụng iFrame
Khi bạn sử dụng iFrame, về cơ bản, bạn tạo một cổng thông tin nhỏ trên trang web của mình để cho phép xem nội dung từ một nơi khác. Điều này có thể hữu ích trong một số tình huống
Sử dụng iFrame có nghĩa là bạn không thực sự phải lưu trữ các tệp bạn muốn hiển thị. Nội dung vẫn ở vị trí ban đầu và có thể được xem qua khung trên trang web của bạn. Một cách mà kỹ thuật này có thể hữu ích là khi bạn muốn hiển thị các tệp lớn. Một iFrame có thể đưa nội dung đó lên trang web của bạn mà không làm chậm tốc độ tải của nó
Cần lưu ý rằng iFrames là loại khung duy nhất được phép trong HTML5. Có nhiều loại nội dung khác nhau mà bạn có thể sử dụng chúng để hiển thị, bao gồm.
- Hình ảnh. Bạn có thể sử dụng iFrames để hiển thị hình ảnh chất lượng cao từ thư viện bên ngoài và tránh phải thỏa hiệp do kích thước tệp.
- Video. Lưu trữ video của bạn trên một nền tảng như YouTube hoặc Vimeo và sử dụng iFrame để đặt chúng trên trang web của bạn, có thể nâng cao trải nghiệm người dùng trong khi giải phóng không gian lưu trữ trang web của bạn.
- Nội dung web khác. Làm nổi bật nội dung từ các trang web khác, chẳng hạn như trang danh mục đầu tư hoặc công thức nấu ăn, có thể mang lại nội dung phong phú cho khán giả của bạn một cách dễ dàng
Khi bạn sử dụng iFrames, bạn cũng có thể tránh các quy tắc bản quyền phức tạp. Một số tòa án đã phán quyết rằng việc sử dụng iFrame để hiển thị tài liệu có bản quyền không cấu thành hành vi vi phạm bản quyền trong mọi trường hợp
Một trang web cũng có thể bao gồm các tập lệnh để ngăn nội dung của nó được đưa vào iFrame. Tuy nhiên, chúng tôi khuyên bạn luôn ghi nhận tác giả ban đầu của bất kỳ nội dung nào bạn sử dụng hoặc tìm kiếm lời khuyên pháp lý nếu bạn không chắc chắn về cách tiến hành
Sử dụng iFrames với một plugin
Một trong những cách dễ nhất để sử dụng iFrames trên trang web WordPress là sử dụng plugin iFrame. May mắn thay, có một số tùy chọn được đánh giá cao để lựa chọn.
Bước 1. Tải xuống và định cấu hình plugin iFrame
Ví dụ của chúng tôi, chúng tôi sẽ sử dụng plugin Advanced iFrame. Nó linh hoạt, dễ sử dụng và được đánh giá rất tốt.
Sau khi cài đặt và kích hoạt plugin, bạn sẽ tìm thấy mục menu Advanced iFrames mới trong bảng điều khiển WordPress của mình. iFrame nâng cao có một bộ tùy chọn khá phong phú. Bạn sẽ muốn bắt đầu với tab Tùy chọn và xem lại video “Bắt đầu nhanh”.
Sau đó, bạn có thể cuộn xuống và xem lại một số tùy chọn của plugin. Tất cả đều được thiết lập với nhiều giải thích hữu ích và các lựa chọn dễ chọn.
iFrames nâng cao cũng cung cấp trình kiểm tra iFrame miễn phí, trình kiểm tra này sẽ kiểm tra bất kỳ URL nào bạn cung cấp để xem liệu URL đó có chứa tập lệnh ngăn nội dung được đưa vào iFrame hay không. Bạn nên chạy bất kỳ URL nào thông qua công cụ này trước khi sử dụng nó trong iFrame trên trang web của mình.
Bạn cũng sẽ muốn xem lại tab Cài đặt cơ bản. Ở đó, bạn có thể tùy chỉnh các thành phần của iFrame như chiều cao, chiều rộng, đường viền khung hình.
Khi bạn đã định cấu hình cài đặt của plugin để đáp ứng nhu cầu của mình, bạn có thể bắt đầu sử dụng iFrames trên trang web của mình
Bước 2. Sử dụng Khối iFrame nâng cao
Trong Trình chỉnh sửa khối WordPress, giờ đây bạn sẽ có sẵn khối iFrames nâng cao để sử dụng
Nếu bạn gặp khó khăn khi tìm khối này vào lần đầu tiên bạn muốn sử dụng nó, nó sẽ nằm trong danh mục Widget
Khi bạn nhấp vào khối iFrame nâng cao, nó sẽ tự động tải nội dung từ trang web của người tạo plugin. Bạn có thể định cấu hình khối bằng cách sử dụng các tùy chọn Chặn ở phía bên tay phải của trang.
Ở đó, bạn có thể thêm URL của nội dung bạn muốn xuất hiện trong iFrame. Bạn cũng có thể ghi đè một số cài đặt của plugin nếu cần.
Bước 3. Xem trước trang web của bạn
Nếu bạn đã kiểm tra URL của mình bằng trình kiểm tra iFrame, thì bạn nên bắt đầu. Tuy nhiên, tốt nhất bạn nên xem trước các thay đổi trước khi xuất bản nội dung của mình. Bạn sẽ thấy bản xem trước trực tiếp iFrame của mình khi chỉnh sửa và thực hiện các thay đổi
Bạn cũng có thể sử dụng tùy chọn Xem trước ở góc trên bên phải của cửa sổ chỉnh sửa để xem bài đăng trong ngữ cảnh menu và thanh bên của trang web của bạn.
Sử dụng iFrames mà không cần plugin
Nếu bạn không muốn làm việc với plugin nhưng vẫn muốn sử dụng iFrames, bạn thật may mắn. Bạn có thể áp dụng mã theo cách thủ công cho các bài đăng và trang của mình để bao gồm nội dung iFrame.
Bước 1. Chèn mã nhúng
Nếu bạn muốn kết hợp nội dung như video từ YouTube trên trang web của mình, bạn sẽ cần tìm mã nhúng mà YouTube cung cấp. Bạn có thể tìm thấy nội dung này bên dưới video bằng cách nhấp vào Chia sẻ
Thao tác này sẽ hiển thị menu các tùy chọn chia sẻ. Bạn sẽ muốn chọn Nhúng để nhận mã bạn cần cho iFrame của mình
Một cửa sổ riêng biệt sẽ mở ra với bản xem trước nội dung được nhúng sẽ trông như thế nào. Sau đó, bạn sẽ có thể sao chép đoạn mã iFrame
Bạn cũng có thể chọn hộp Bắt đầu tại nếu bạn muốn người xem tự động bắt đầu xem nội dung tại một mã thời gian nhất định
Tiếp theo, bạn sẽ quay lại bài đăng WordPress của mình và thêm khối HTML tùy chỉnh. Bạn có thể tìm thấy điều này trong danh mục Định dạng
Sau khi bạn thêm khối này vào bài đăng của mình, bạn chỉ cần dán mã nhúng mà bạn đã sao chép từ trang YouTube vào
Tiếp theo, bạn sẽ muốn đảm bảo rằng phần nhúng đang hoạt động bình thường và trông giống như cách bạn muốn. Bạn có thể nhấp vào Xem trước trong khối HTML tùy chỉnh để xem iFrame của bạn có hoạt động không
Như vậy, bạn đã đặt thành công iFrame trên trang web của mình. Quy trình tương tự sẽ hoạt động đối với bất kỳ nền tảng nào cung cấp cho bạn mã nhúng
Bước 2. Tùy chỉnh iFrame của bạn
Nếu bạn vẫn chưa hài lòng với cách iFrame hiển thị trên bài đăng hoặc trang của mình, bạn có thể điều chỉnh một số giá trị trong mã theo cách thủ công. Bạn nên sử dụng Biểu định kiểu xếp tầng [CSS] để tùy chỉnh hoàn toàn cách iFrame xuất hiện trên trang web của mình.
Thẻ iFrame cho phép một số thuộc tính tùy chỉnh. Tuy nhiên, điều quan trọng cần lưu ý là nhiều trong số này không còn được hỗ trợ bởi HTML5. Bạn có thể sẽ cần điều tra CSS của chủ đề như chúng tôi đã đề cập trước đây, vì bạn không thể trực tiếp ghi đè một số định dạng nhất định trong khối HTML tùy chỉnh.
Bước 3. Thường xuyên kiểm tra nội dung iFrame của bạn
Khi sử dụng iFrames, bạn sẽ muốn kiểm tra nội dung được đóng khung thường xuyên. Vì bạn đang mở một cửa sổ dẫn đến nội dung mà bạn có thể không có bất kỳ quyền kiểm soát chất lượng hoặc biên tập nào, điều này có thể gây ra sự cố trên trang web của bạn bất cứ lúc nào.
Ví dụ: nếu video chúng tôi sử dụng trong ví dụ của mình bị gỡ xuống khỏi kênh YouTube của video đó, thì bài đăng của chúng tôi sẽ có một trình phát bị hỏng trong đó. Điều này rõ ràng hơn một chút so với một liên kết bị hỏng, vì nó sẽ để lại tác động trực quan đến trang web của bạn. Kiểm tra định kỳ nội dung iFrame của bạn cho phép bạn thay đổi hoặc gỡ bỏ bất kỳ phương tiện nào không còn hoạt động
Tối ưu hóa trang web của bạn với WP Engine
Sử dụng iFrames trên trang web của bạn có thể giúp mọi thứ hoạt động trơn tru, trong khi vẫn kết hợp đa phương tiện và nội dung động. Tại WP Engine, chúng tôi biết tầm quan trọng của việc hiểu các khái niệm thiết kế web quan trọng và có quyền truy cập vào các tài nguyên dành cho nhà phát triển tốt nhất hiện có.
Hơn nữa, chúng tôi cam kết giúp bạn cung cấp trải nghiệm kỹ thuật số tốt nhất cho khách hàng của mình. Chúng tôi có nhiều lựa chọn gói lưu trữ WordPress được quản lý hoàn toàn, vì vậy bạn có thể tập trung vào việc thiết kế các trang web đẹp mắt
tham gia 1. 5 triệu trang web tin tưởng WP Engine làm máy chủ lưu trữ WordPress của họ
Xem kế hoạch của chúng tôibài viết liên quan
- Cách nhúng Google Maps vào WordPress
- Cách sử dụng và nhúng Google Biểu mẫu với WordPress
- Cách nhúng video trong WordPress
- WordPress và Vimeo. Cách tích hợp
- WordPress và Youtube. Cách tích hợp
Đặt mua
Nhận các mẹo, thủ thuật và tin tức WordPress hàng tuần được gửi đến hộp thư đến của bạn
Địa chỉ email
Gửi đi
Trang web này được bảo vệ bởi reCAPTCHA và áp dụng Chính sách bảo mật và Điều khoản dịch vụ của Google. Tìm hiểu thêm về Chính sách quyền riêng tư của WP Engine