Membuat Shortcode untuk Responsive Video

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.

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:

1

2

<?php

3

/*

4

Plugin Name: WpTuts+ Responsive Video Shortcode

5

Plugin URI: https://rachelmccollin.com

6

Description: This plugin provides a shortcode you wrap around the ID of a video in YouTube. The plugin then adds the necessary markup and CSS to make that video responsive. To use it, type [responsive-video]'source'[/responsive-video], where 'source' is the iframe embed code for your video.

7

Version: 1.0

8

Author: Rachel McCollin

9

Author URI: http://rachelmccollin.com

10

License: GPLv2

11

*/

12

?>

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:

1

2

<?php

3

// register the shortcode to wrap html around the content

4

function wptuts_responsive_video_shortcode( $atts ) {

5

  extract( shortcode_atts( array (

6

		'identifier' => ''

7

	), $atts ) );

8

	return '<div class="wptuts-video-container"><iframe src="//www.youtube.com/embed/' . $identifier . '" height="240" width="320" allowfullscreen="" frameborder="0"></iframe></div>

9

	<!--.wptuts-video-container-->';

10

}

11

add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode' );

12

?>

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:

1

2

/*

3

stylesheet for use with responsive video shortcode plugin.

4

Provides the CSS that makes the video responsive.

5

*/

6

7

.wptuts-video-container {

8

	position: relative;

9

	padding-bottom: 56.25%;

10

	padding-top: 30px;

11

	height: 0;

12

	overflow: hidden;

13

}

14

15

.wptuts-video-container iframe {

16

	position: absolute;

17

	top:0;

18

	left: 0;

19

	width: 100%;

20

	height: 100%;

21

}

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:

1

2

<?php

3

// Register stylesheet with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript

4

function wptuts_responsive_video_add_stylesheet() {

5

	wp_register_style( 'wptuts_responsive_video_style', plugins_url( 'style.css', __FILE__ ) );

6

	wp_enqueue_style( 'wptuts_responsive_video_style' );

7

}

8

add_action( 'wp_enqueue_scripts', 'wptuts_responsive_video_add_stylesheet' );

9

?>

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:

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

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.