Advertisement
  1. Code
  2. Plugins
Code

Membuat Shortcode untuk Responsive Video

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Jika kamu seperti saya, kamu menggunakan YouTube untuk menghosting video apapun yang kamu tambahkan ke situs WordPress kamu. Ini meminimalisir kekhawatiran tentang kompatibilitas browser atau perangkat, menghemat ruang di server kamu, dan ini bisa lebih diandalkan.

Selain itu, itu berarti video kamu dapat diakses oleh pemirsa YouTube serta pengunjung ke situs atau blog kamu.

Namun, menambahkan streaming video YouTube memiliki dua kelemahan:

  1. Secara default, mereka tidak responsif. Video berada di dalam elemen <iframe>, kamu tidak bisa membuatnya responsif.
  2. Jika kamu sedang mengembangkan sebuah situs untuk klien yang bukan seorang programmer, mengharapkan mereka membuka tab 'Text' dari Post Editor dan menyalin embed dari YouTube mungkin terlalu menakutkan bagi mereka, atau - lebih buruk lagi - ini dapat memberi mereka kesempatan untuk merusak situs.

Di tutorial ini saya akan menunjukkan bagaimana cara membuat shortcode yang memungkinkan kamu atau klien kamu untuk menambahkan embed YouTube di 'Visual' editing view dan akan otomatis membuat video tersebut responsif.

Catatan: Daripada menambahkan kode ke file theme's function dan/atau stylesheet, Saya merekomendasikan membuat plugin untuk menambahkan ini ke situs kamu, yang merupakan metode yang saya ikuti. Itu membuat semuanya di satu tempat dan berarti kamu dapat mengaktifkan plugin di beberapa situs untuk menggunakan shortcode sebanyak yang kamu butuhkan.

Apa yang Kamu Butuhkan untuk Menyelesaikan Tutorial Ini

Untuk menyelesaikan tutorial ini, kamu akan memerlukan:

  • Situs testing atau pengembangan yang telah terinstall WordPress
  • Kode Editor
  • Sebuah FTP program untuk mengunggah plugin kamu (yang dapat dimasukkan ke dalam editor kode kamu)

Mengatur Plugin

Mulai dengan membuka file baru di teks editor kamu, dan dinamakan - milik saya bernama wptutsplus-responsive-video-shortcode.php tapi kamu dapat menamai apa saja terserah keinginan kamu.

Di file tersebut, masukkan kode berikut:

Ini mengatur plugin kamu dan memberitahu WordPress nama dan versinya.


Menambahkan Shorcode Function

Dibawah teks pembuka ini, tambahkan function yang akan membuat shorcode dan hubungkan itu ke add_shortcode action hook:

Ini menciptakan shortcodenya sendiri. Mari kita lihat apa yang akan dihasilkan oleh shortcode:

  • Sebuah div yang berisi class wptuts-video-container, yang akan digunakan untuk menambahkan CSS untuk membuat video menjadi responsif
  • Sebuah elemen iframe didalam div
  • Tautan ke video YouTube di kode embed, dengan $identifier sebagai ganti kode identifikasi unik untuk video
  • Atribut $identifier yang akan ditentukan pengguna saat menambahkan shortcode ke halaman atau posting di situs. Ini berarti dia tidak perlu menulis atau menyalin seluruh kode embed

Menambahkan CSS untuk Membuat Semakin Responsif

Langkah berikutnya adalah menambahkan styling yang akan membuat isi div menjadi responsif. Buka file baru di kode editor kamu dan namakan style.css. Di stylesheet baru tersebut tambahkan berikut ini:

Apa yang dilakukan adalah sebagai berikut:

  • Itu membuat isi div menjadi responsif, menggunakan padding-bottom untuk mendefinisikan aspek rasio (dalam kasus ini 16:9) Deklarasi padding-top menyediakan ruang untuk border di bagian atas video. Menggunakan padding-bottom daripada height berarti jika div diubah ukurannya, itu akan mempertahankan rasio aspeknya.
  • Itu menambahkan posisi absolut ke elemen iframe, pastikan itu mengisi ruang yang diambil oleh isi div. Ini membuat video menjadi responsif.

Sekarang simpan stylesheet kamu.


Mendaftarkan Stylesheet kedalam Plugin

Langkah terakhir adalah mendaftarkan stylesheet kedalam plugin sehingga menggunakan CSS yang baru saja kamu tambahkan.

Buka file plugin lagi. Diatas kode shortcode tersebut, tambahkan sebagai berikut:

Ini mendaftarkan stylesheet dan enqueues menggunakan wp_enqueue_scripts, yang merupakan cara yang benar untuk menambahkan stylesheet dan skrip di WordPress.


Menggunakan Shortcode

Sekarang simpan semua file kamu kedalam folder dengan nama plugin kamu - Saya menamakan folder saya wp-tutsplus-responsive-video-shorcode. Simpan ini dan unggah ke folder plugin di situs testing kamu. Aktifkan pluginnya.

Aku akan menggunakan Lego Superheroes video (sebagaimana aku tahu bahwa itu akan membuat anak saya senang) Unique identifiernya adalah 056p5n0YNHo, yangmana kamu bisa salin dari URL video YouTube. Di postingan atau halaman baru atau lama, tambahkan shortcode sebagai berikut:

[responsive-video identifier="O56p5nOYNHo"]

Simpan postingan dan lihat. Kamu akan menjumpai video tersebut di-streaming seperti yang ditunjukkan di tangkapan layar:

responsive-video-shortcode-desktop-display

Sekarang coba ubah ukuran jendela browser kamu, atau lihat postingan di perangkat mobile. Video tersebut otomatis mengubah ukuran:

responsive-video-shortcode-mobile-display

Jadi kamu sekarang dapat streaming video YouTube apa pun yang kamu inginkan di situs kamu tanpa menyimpang dari Visual Editor dan tanpa harus khawatir tentang pengguna di perangkat yang berbeda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.