Membuat Plugin Wordpress - WP_PDF.js

Pendahuluan

Wordpress merupakan salah satu content management system yang populer diantara web developer dan penyedia jasa web. Wordpress dibangun menggunakan PHP dan diprakarsai oleh Matt Mullenwerg. Wordpress berada dibawah perusahaan milik Matt Mullenwerg yang bernama Automatic. Walaupun Wordpress sendiri sudah ditulis ulang menggunakan Node.js dengan nama baru "Calypso", bukan berarti Wordpress PHP akan menurun. Peminatnya masih tetap ada hingga kini.

Wordpress sendiri menyediakan sebuah fitur yang dinamakan Plugin agar web developer dapat membuat solusinya sendiri bilamana tidak disediakan oleh Wordpress. Plugin Wordpress sendiri dibuat dengan menggunakan PHP, HTML, CSS, dan Javascript. Anda dapat membuat plugin yang hanya berupa komponen web, berupa halaman menu baru untuk Wordpress Admin, bahkan aplikasi tersendiri yang tertambat di Wordpress.

Perangkat yang dibutuhkan

Anda dapat menggunakan text editor apapun yang dapat membantu Anda untuk menulis kode program PHP, HTML,CSS, dan Javascript. Anda juga memerlukan sebuah bundle Wordpress, ambil saja versi terbaru misal versi 4. Kemudian Anda membutuhkan sebuah web server, dbms, dan web browser. Anda dapat menggunakan Apache untuk web server, MySQL untuk dbms, dan Firefox atau Chrome untuk web browser. Anda juga dapat menggunakan bundle XAMPP untuk memudahkan Anda mendapatkan perangkat pengembangan PHP hanya dalam satu bundle saja.

Membuat struktur plugin

Plugin Wordpress biasanya terdiri dibundel dalam sebuah folder. Di dalam folder tersebut terdapat file index.php kosong dan berbagai file PHP yang terdiri dari class dan library yang terdapat dalam plugin tersebut. Tentu saja ada juga yang menyertakan folder asset untuk menyimpan file Javascript, CSS, font, dan gambar. Untuk tutorial kali ini kita akan menggunakan struktur seperti berikut:

• asset, menyimpan file Javascript, CSS, dan library dari vendor
• index.php, sebagai penanda plugin Wordpress
• wp_pdfjs.php, berisi kode utama untuk plugin yang akan menampilan file PDF menggunakan PDF.js

Kemudian Anda dapat mengunduh library PDF.js dan menyimpannya di dalam folder asset. Kita akan menyimpan PDF.js di dalam folder vendor lalu kita simpan folder tersebut dibawah asset.

Membuat file index.php

Kita akan menuliskan pengenal plugin di file index.php. Agar sebuah plugin Wordpress dapat dipasang, Anda harus menyertakan sebuah komentar yang sudah menjadi standar sebuah plugin Wordpress. Berikut adalah komentar yang harus Anda sertakan

/*
Plugin Name: Wordpress PDF.js
Description: PDF viewer for Wordpress built with PDF.js
Author: Ridwan Bejo
Version: 0.1
*/

Kemudian kita tinggal menyertakan sub file yang berisi kode utama atau kode tambahan lainnya.

include "wp_pdfjs.php"

Menulis kode utama

Kode utama plugin yang akan kita buat ini akan ditulis di dalam file wp_pdfjs.php, kali ini kita tidak akan membuat plugin yang dapat melakukan akses database atau menambahkan dirinya di menu admin Wordpress. Kita akan membuat plugin yang dapat digunakan di setiap post dengan menggunakan shortcode tags.

Untuk membuat penampil PDF ini kita hanya perlu membuat sebuah function yang berisi kode untuk menampilkan iFrame yang akan menembak viewer.html milik PDF.js. Kita juga melewatkan URL dari file PDF yang akan kita tampilkan kedalam URL iFrame. Function yang akan kita buat bernama wp_pdfjs_viewer_shortcode_tags() dengan parameter $attr. Lalu kita daftarkan function tersebut ke Wordpress menggunakan function add_shortcode(). Kita beri tanda nama shortcode tersebut dengan nama wp_pdfjs_viewer.

Berikut adalah kode plugin yang dimaksud:

add_shortcode('wp_pdfjs_viewer', 'wp_pdfjs_viewer_shortcode_tags');
function wp_pdfjs_viewer_shortcode_tags($attr)
{
	?>
	<iframe style="margin:10px;" 
			width='550px' 
			height='400px' 
			src='http://localhost/mywordpress/wp-content/plugins/wp_pdfjs/assets/vendor/pdfjs/web/viewer.html?file=' 
			allowfullscreen 
			webkitallowfullscreen >
    
	<?php
}

Untuk mendapatkan URL file PDF yang akan ditampilkan, Anda dapat mengambilnya dari layanan hosting file atau meng-upload file PDF milik Anda ke Wordpress.

Memasang dan menggunakan plugin di Wordpress

Pastikan folder permission website Wordpress Anda disesuaikan agar dapat diakses melalui web browser. Kemudian Anda dapat mengaktifkan plugin WP_PDF.js melalui halaman Plugin. Untuk menggunakannya Anda dapat memanggil perintah [wp_pdfjs_viewer url="http://localhost/mywordpress/wp-content/uploads/2015/12/12344683.pdf'] di setiap postingan atau halaman yang dibuat melalui Wordpress admin. Sehingga hasilnya dapat dilihat seperti pada gambar berikut ini:

[caption id="attachment_7056" align="aligncenter" width="700"] Memasang plugin WP_PDF.js[/caption]

 

[caption id="attachment_7057" align="aligncenter" width="575"] Mengaktifkan plugin WP_PDF.js[/caption]

 

[caption id="attachment_7058" align="aligncenter" width="700"] Menggunakan plugin WP_PDF.js[/caption]

 

[caption id="attachment_7059" align="aligncenter" width="700"] plugin WP_PDF.js berhasil digunakan[/caption]

Penutup

Wordpress memberikan Anda kebebasan untuk menambah fitur untuk Wordpress yang tidak disediakan Wordpress melalui sistem Plugin. Anda dapat mengembangkan Wordpress Plugin untuk digunakan secara privat ataupun disebarkan kepada publik.

Referensi

• Wordpress Api Developer
• PDF.js Documentation
• W3Schools

(rfs)