Membuat Plugin Unite Gallery untuk CMS WordPress

Barangkali ada juga pengguna self-hosting WordPress yang kurang begitu cocok dengan fitur media bawaan, khususnya fungsi Gallery. Saya termasuk pengguna WordPress yang tidak menggunakan fungsi tersebut, karena harus menggunakan file gambar yang diunggah ke storage hosting. Cukup menguras space tentunya. Karena itu saya mencari solusi alternatif perihal masalah Gallery.

Solusinya apaan nih? Solusinya adalah bagaimana caranya membuat Gallery lewat plugin 3rd party yang menyerupai milik WordPress, dan gambar yang digunakan berasal dari link external. Sehingga tidak perlu upload hehe, kan lumayan irit kuota dan storage hosting. Setelah mencari di internet, akhirnya saya menemukan jQuery plugin untuk menghasilkan Gallery dalam bentuk tiles.

Unite Gallery menjadi pilihan saya, karena kebetulan waktu googling ada di index pertama hehe. Lagipula tiles modenya cukup oke. Akhirnya tidak pakai lama langsung saya download. Lalu bagaimana caranya integrasi Unite Gallery ke dalam CMS WordPress? Tentu saja dengan cara klasik, yaitu dengan develop plugin. Langkah yang pertama tentu saja download terlebih dahulu Unite Gallerynya di sini.

Oke? Jika sudah silakan buat direktori atau folder project misal dengan nama wp-unitegallery.

  1. Extract Unite Gallery yang telah didownload.
  2. Copy seluruh isi folder dist ke dalam folder project wp-unitegallery.
  3. Buat sebuah file PHP di dalam folder project wp-unitegallery, misal dengan nama unitegallery.php.

Berikut baris kode dari unitegallery.php :

<?php function unitegallery_function ($atts, $content = null) { 
 extract(
 "id gallery",
		"panel" => "gallery panel",
		"thumb" => "only thumb",
		"data" => "the data goes here",
		"caption" => "hello world"
	), $atts));

	$id = $atts['id'];
	$panel = $atts['panel'];
	$thumbArray = explode(';', $atts['thumb']);
	$dataArray = explode(';', $atts['data']);
	$captionArray = explode(';', $atts['caption']);
?>
	<script type='text/javascript' src='/wp-content/plugins/wp-unitegallery/js/unitegallery.min.js'>
						<link rel='stylesheet' href='/wp-content/plugins/wp-unitegallery/css/unite-gallery.css' type='text/css' />
	<script type='text/javascript' src='/wp-content/plugins/wp-unitegallery/themes/tiles/ug-theme-tiles.js'>
	<!-- fetch image [start] -->


<div id="" style="display:none;">

		<a href="http://unitegallery.net">
		<img alt="" src="" data-image="" data-description="" style="display:none">
		</a>


<!-- fetch image [end] -->
	
		jQuery(document).ready(function(){
			jQuery("#").unitegallery({
				tiles_type:"justified"
			});
			jQuery("#").detach().appendTo('#')
		});

	

Upload folder project ke folder wp-content/plugins di hosting kita dan silakan aktifkan lewat module Plugins. Lalu bagaimana penggunaannya? Setelah diaktifkan apa sih maksud kode di atas? Kode di atas ditujukan untuk menggunakan shortcode “unitegallery” dengan parameter panel, thumb, data, dan caption. Berikut contoh penggunaannya.

[unite*gallery thumb=”http://thumb.org/datathumb1.jpg;http://thumb.org/datathumb2.jpg;http://thumb.org/datathumb3.jpg&#8221; data=”http://thumb.org/data1.jpg;http://thumb.org/data2.jpg;http://thumb.org/data3.jpg&#8221; caption=”caption 1;caption2; caption3″ panel=”panel1″][/unite*gallery]

Ya kira-kira begitu penggunaannya, jika tereksekusi akan menghasilkan tag HTML gallery dan script jQuery secara otomatis sesuai dengan kode di class tersebut. Harus menggunakan elemen tag sebagai panel dan di dalamnya memanggil shortcode “unitegallery”  Do With Your Own Risk ya! Just ignore the mark(*) character. Dan sori jika embed codenya berantakan, padahal di editor sudah rapi 😀


	

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.