Cara Menyematkan iFrames di WordPress

Berbagi konten secara online adalah praktik umum. Namun, Anda mungkin bingung ketika mencoba mencari cara untuk memasukkan jenis konten tertentu. Berbagi file besar atau item tertentu dari situs web lain terkadang bisa menjadi tantangan.

Untungnya, ada praktik desain web yang cukup sederhana yang dapat Anda terapkan untuk menampilkan jenis konten tertentu di situs web WordPress Anda. Menggunakan HTML untuk membuat Inline Frames (iFrames) dapat mempermudah berbagi gambar, video, dan media online lainnya.

Pada artikel ini, kita akan menjelajahi berbagai penggunaan iFrame di situs web. Kami juga akan melalui langkah-langkah untuk membuat iFrames, baik secara manual maupun dengan plugin. Mari kita mulai!

Penggunaan iFrame

Saat Anda menggunakan iFrame, pada dasarnya Anda membuat portal kecil di situs web Anda yang memungkinkan konten dari tempat lain untuk dilihat. Ini dapat berguna dalam beberapa skenario.

Menggunakan iFrame berarti Anda tidak perlu menghosting file yang ingin ditampilkan. Konten tetap berada di lokasi aslinya, dan dapat dilihat melalui bingkai di situs Anda. Salah satu cara teknik ini dapat membantu adalah ketika Anda ingin menampilkan file besar. iFrame dapat menghadirkan konten tersebut ke situs web Anda tanpa memperlambat kecepatan pemuatannya.

Perlu dicatat bahwa iFrames adalah satu-satunya jenis bingkai yang diperbolehkan dalam HTML5. Ada berbagai jenis konten berbeda yang mungkin Anda gunakan untuk menampilkannya, termasuk:

• Gambar: Anda dapat menggunakan iFrames untuk menampilkan gambar berkualitas tinggi dari galeri luar, dan menghindari kompromi karena ukuran file.
• Video: Menghosting video Anda di platform seperti YouTube atau Vimeo, dan menggunakan iFrame untuk menempatkannya di situs web Anda, dapat meningkatkan pengalaman pengguna sekaligus membebaskan ruang penyimpanan situs web Anda.
• Konten web lainnya: Menyoroti konten dari situs web lain, seperti halaman portofolio atau resep, dapat menghadirkan konten yang kaya kepada audiens Anda dengan mudah.

Saat Anda menggunakan iFrames, Anda juga dapat menghindari aturan hak cipta yang rumit. Beberapa pengadilan telah memutuskan bahwa menggunakan iFrame untuk menampilkan materi berhak cipta bukan merupakan pelanggaran hak cipta dalam semua kasus.

Situs web juga dapat menyertakan skrip untuk mencegah kontennya disertakan dalam iFrame. Namun, sebaiknya selalu beri kredit pada pembuat asli konten apa pun yang Anda gunakan, atau cari nasihat hukum jika Anda tidak yakin bagaimana melanjutkannya.

Menggunakan iFrames Dengan Plugin

Salah satu cara termudah untuk menggunakan iFrames di situs web WordPress adalah dengan menggunakan plugin iFrame. Untungnya, ada beberapa opsi berperingkat tinggi untuk dipilih.

Langkah 1: Unduh dan Konfigurasikan plugin iFrame

Sebagai contoh kami, kami akan menggunakan plugin Advanced iFrame. Ini fleksibel, mudah digunakan, dan dinilai sangat baik:

Setelah menginstal dan mengaktifkan plugin, Anda akan menemukan item menu Advanced iFrames baru di dashboard WordPress Anda. Advanced iFrame memiliki serangkaian opsi yang cukup luas. Anda ingin memulai dengan tab Opsi , dan meninjau video "Mulai Cepat":

Kemudian, Anda dapat menggulir ke bawah dan meninjau beberapa opsi plugin. Ini semua diatur dengan banyak penjelasan bermanfaat dan pilihan yang mudah dipilih:

Advanced iFrames juga menyediakan pemeriksa iFrame gratis, yang akan memeriksa setiap URL yang Anda berikan untuk melihat apakah itu berisi skrip yang mencegah konten disertakan dalam iFrame. Sebaiknya jalankan URL apa pun melalui alat ini sebelum menggunakannya di iFrame di situs web Anda.

Anda juga ingin meninjau tab Setelan Dasar . Di sana, Anda dapat menyesuaikan elemen iFrame seperti tinggi, lebar, dan batas bingkai:

Setelah Anda mengonfigurasi pengaturan plugin untuk memenuhi kebutuhan Anda, Anda dapat mulai menggunakan iFrames di situs web Anda.

Langkah 2: Gunakan Blok iFrame Tingkat Lanjut

Di Editor Blok WordPress, Anda sekarang akan memiliki blok iFrames Tingkat Lanjut yang tersedia untuk digunakan:

Jika Anda kesulitan menemukan blok ini saat pertama kali ingin menggunakannya, itu akan berada di bawah kategori Widget .

Setelah Anda mengklik blok Advanced iFrame , itu akan secara otomatis memuat konten dari situs web pembuat plugin. Anda dapat mengonfigurasi blok dengan menggunakan opsi Blokir di sisi kanan halaman:

Di sana, Anda dapat menambahkan URL konten yang ingin ditampilkan di iFrame. Anda juga dapat mengganti beberapa pengaturan plugin jika diperlukan.

Langkah 3: Pratinjau Situs Anda

Jika Anda menguji URL Anda dengan pemeriksa iFrame, Anda sebaiknya melakukannya. Akan tetapi, yang terbaik adalah melihat pratinjau perubahan Anda sebelum menerbitkan konten Anda. Anda akan melihat pratinjau langsung dari iFrame Anda saat Anda mengeditnya dan membuat perubahan.

Anda juga dapat menggunakan opsi Pratinjau di sudut kanan atas jendela edit Anda, untuk melihat kiriman dalam konteks menu dan sidebar situs Anda.

Menggunakan iFrames Tanpa Plugin

Jika Anda tidak ingin menggunakan plugin tetapi masih ingin menggunakan iFrames, Anda beruntung! Anda dapat menerapkan kode secara manual ke postingan dan halaman Anda untuk menyertakan konten iFramed.

Langkah 1: Masukkan Kode Semat

Jika Anda ingin memasukkan konten seperti video dari YouTube ke situs web Anda, Anda harus menemukan kode semat yang disediakan YouTube. Anda dapat menemukannya di bawah video dengan mengeklik Bagikan .

Ini akan memunculkan menu opsi berbagi. Anda ingin memilih Sematkan untuk mendapatkan kode yang Anda perlukan untuk iFrame Anda.

Jendela terpisah akan terbuka dengan pratinjau seperti apa konten yang disematkan nantinya. Anda kemudian dapat menyalin cuplikan kode iFrame.

Anda juga dapat mencentang kotak Mulai dari jika Anda ingin pemirsa mulai melihat konten secara otomatis pada kode waktu tertentu.

Selanjutnya, Anda akan kembali ke postingan WordPress Anda dan menambahkan blok Custom HTML . Anda dapat menemukannya di bawah kategori Pemformatan .

Setelah Anda menambahkan blok ini ke pos Anda, Anda cukup menempelkan kode semat yang Anda salin dari halaman YouTube.

Selanjutnya, Anda ingin memastikan penyematan berfungsi dengan baik dan terlihat seperti yang Anda inginkan. Anda dapat mengeklik Pratinjau di blok HTML Khusus untuk melihat apakah iFrame Anda berfungsi.

Dengan itu, Anda telah berhasil menempatkan iFrame di situs web Anda. Proses yang sama akan bekerja untuk platform apa pun yang memberi Anda kode sematan.

Langkah 2: Sesuaikan iFrame Anda

Jika Anda masih kurang puas dengan tampilan iFrame di postingan atau halaman Anda, Anda dapat menyesuaikan beberapa nilai dalam kode secara manual. Sebaiknya Anda menggunakan Cascading Style Sheets (CSS) untuk menyesuaikan sepenuhnya tampilan iFrame di situs web Anda.

Tag iFrame memungkinkan sejumlah properti khusus. Namun, perlu diperhatikan bahwa banyak di antaranya tidak lagi didukung oleh HTML5. Anda mungkin perlu menyelidiki CSS tema Anda seperti yang kami sebutkan sebelumnya, karena Anda mungkin tidak dapat mengganti pemformatan tertentu secara langsung di blok HTML Khusus .

Langkah 3: Periksa Konten iFrame Anda Secara Teratur

Saat menggunakan iFrames, Anda sebaiknya memeriksa konten yang dibingkai secara teratur. Karena Anda membuka jendela ke konten yang mungkin tidak memiliki kontrol editorial atau kualitas apa pun, hal itu dapat menyebabkan masalah pada situs web Anda kapan saja.

Misalnya, jika video yang kami gunakan dalam contoh kami dihapus dari saluran YouTube-nya, pemutar pos kami akan rusak. Ini sedikit lebih jelas daripada tautan rusak, karena akan meninggalkan dampak visual pada situs web Anda. Memeriksa konten iFrame Anda secara berkala memungkinkan Anda mengubah atau menghapus media apa pun yang tidak lagi berfungsi.

Optimalkan Situs Anda Dengan Mesin WP

Menggunakan iFrames di situs web Anda dapat membuat segala sesuatunya berjalan dengan lancar, sambil tetap menggabungkan multimedia dan konten dinamis. Di sini, di WP Engine, kami mengetahui pentingnya memahami konsep desain web yang penting dan memiliki akses ke sumber daya developer terbaik di luar sana.

Terlebih lagi, kami berkomitmen untuk membantu Anda memberikan pengalaman digital terbaik kepada pelanggan Anda. Kami memiliki beragam pilihan paket hosting WordPress yang terkelola sepenuhnya, sehingga Anda dapat berfokus pada mendesain situs web yang indah!