Saya akan mencoba membuat sebuah plugin yang sangat-sangat sederhana, paling tidak pada tutorial ini Anda akan paham terlebih dahulu bagaimana sebuah plugin bekerja.

Project kita pada tutorial ini terinspirasi oleh sebuah website yang sangat terkenal di Indonesia dimana memiliki komunitas yang sangat luas di Indonesia dengan member lebih dari 1 juta orang. Apa yaa..? Ya benar sekali.. kaskus..

Di kaskus kita sering dapati ketika kita menuliskan kata “kawin” maka otomatis akan berubah menjadi “kimpoi”. Pada tutorial kali ini, kita akan coba membuat plugin WordPress yang akan memiliki efek seperti itu. Sederhana.. namun menarik..

Okay.. tidak perlu berlama-lama lagi, mari kita mulai tutorial kita. Saya asumsikan Anda sudah menginstal WordPress. Sekarang kita akan melihat dulu di halaman admin.

Untuk mempraktekan efek dari plugin ini, kita tentu harus mempunyai suatu artikel yang mengandung kata “kawin”, atau judul yang mengandung kata “kawin”.

Step 1: Buat sebuah postingan yang mengandung kata “kawin”

Kita buat post baru, dan tuliskan artikel Anda. Ingat.. usahakan untuk memasukkan kata “kawin” Atau kalau Anda ingin mudahnya, cari artikel di internet, kemudian copy and paste di post Anda. Pada tutorial kali ini saya ambil artikel dari WikiPedia.

Ok, jika sudah, sekarang kita menuju ke tab Plugins.

Sekarang coba lihat di halaman plugin, kita hanya memiliki 2 plugins default, yaitu Akismet, dan Hello Dolly.

Nah langkah berikutnya kita akan mencoba membuat agar plugin kita dikenali terlebih dahulu oleh WordPress.

Step 2: Buat agar plugin kita dikenali oleh WordPress.

Buka folder plugins Anda, defaultnya terletak di “wp-content/plugins”

Buat folder baru di dalam folder “plugins”, saya akan namakan folder ini dengan nama “kimpoi”

Ok, selanjutnya buat satu file php di dalam folder “kimpoi”, saya namakan file saya dengan nama “index.php”.

Selanjutnya kita mulai proses koding.

Buka file “index.php” tersebut dan ketikkan script berikut.

<?php
/*
 * Plugin Name: Kimpoi Plugin
 * Plugin URI: www.stoepy.com
 * Description: Percobaan membuat plugin untuk merubah kata kawin menjadi kimpoi
 * Version: 1.0
 * Author: David Chen
 * Author URI: david.stoepy.com
*/
?>

Nah script diatas berisikan detail dari plugin kita. Plugin name menjelaskan nama plugin kita; Plugin URI menjelaskan lokasi plugin kita di internet berupa URL; Description menjelaskan detail atau deskripsi dari plugin kita; Version menjelaskan versi dari plugin kita; Author menjelaskan siapa sih yang membuat plugin ini; Dan terakhir Author URI menjelaskan website atau bisa juga email dari sang pembuat plugin.

Template ini yang biasanya saya gunakan untuk membuat plugin.

Nah jika kita lihat pada script diatas, kita akan menyadari bahwa script tersebut hanya berupa comment pada php, tapi jangan salah duluu.. ini comment bukan sekedar comment, karena apa… comment ini sakti mandraguna..

Setelah Anda menuliskan script diatas, sekarang coba masuk ke halaman admin, dan lanjutkan ke halaman plugins.

Sekarang coba lihat di halaman plugin, jrengg jreeengg..!! Plugin kita telah dikenali oleh WordPress.

Coba lihat seluruh data yang kita tuliskan, seperti nama plugin, nama author, versi, deskripsi plugin, semuanya muncul di halaman plugin.

Okay, jika sampai tahap ini Anda belum berhasil memunculkan plugin Anda di halaman admin WordPress, coba review ulang jika ada langkah yang terlewat atau penulisan script yang masih salah. Jika Anda telah berhasil dengan sukses, yuk mari kita mulai koding lagi.

Step 3: Mulai koding plugin kita.

Nah, tujuan akhir dari project ini adalah untuk merubah kata “kawin” yang berada pada title dan content dari suatu artikel dengan kata “kimpoi”, jadi yang harus kita kerjakan berikutnya adalah menambahkan filter di kedua bagian tersebut, yaitu “title” atau judul artikel dan “content” atau konten artikel.

Sekarang, tambahkan script berikut dibawah komentar atau script sebelumnya. Ingat, jangan sertakan tanda “….” yaaa.. itu hanya penanda kalau diatasnya ada script lain.

....
add_filter('the_title', 'rubah_title_kawin');
add_filter('the_content', 'rubah_content_kawin');
?>

Script diatas maksudnya adalah, kita menambahkan filter pada action “the_title” dan action “the_content”. Kita tahu bahwa “the_title” itu merupakan script default WordPress untuk memunculkan judul dari suatu post. Sama juga dengan script “the_content” merupakan script default WordPress untuk memunculkan konten dari suatu artikel.

Nah script diatas memiliki arti bahwa ketika WordPress menjalankan fungsi “the_title”, maka dia akan juga memanggil fungsi “rubah_title_kawin” yang kita akan tambahkan nanti.

Sama juga dengan contentnya, ketika WordPress menjalankan fungsi “the_content” atau ketika memanggil konten, maka dia akan ikut menjalankan fungsi “rubah_content_kawin” yang akan kita tambahakan juga nanti.

WordPress sendiri memiliki banyak sekali referensi Actions yang dapat digunakan pada script kita, Anda dapat mempelajarinya di WordPress codex.

Oke, sekarang kita lanjutkan dengan membuat fungsi-fungsi yang telah disebutkan diatas, yaitu “rubah_title_kawin” dan “rubah_content_kawin”.

Tambahkan script berikut, bisa Anda tambahkan setelah script sebelumnya atau sesudahnya.

function rubah_content_kawin($content) {
	$content = str_replace('kawin', 'kimpoi', $content);
	return $content;
}

function rubah_title_kawin($title) {
	$title = str_replace('Kawin', 'Kimpoi', $title);
	return $title;
}

....
?>

Saya tambahkan sebelum script “add_filter” tadi. Ingat sekali lagi! Jangan masukkan tanda “….” Okay..

Nah penjelasan dari script diatas adalah sebagai berikut. Kita mulai dari fungsi “rubah_content_kawin”. Fungsi tersebut mengandung 1 argumen atau 1 parameter, yaitu “$content”. Argumen ini menampung keseluruhan konten yang akan dimunculkan. Nah selanjutnya kita menggunakan fungsi “str_replace”, ini merupakan fungsi default PHP yang digunakan untuk menimpa suatu kata atau kalimat dengan kata atau kalimat lainnnya.

Pada kasus ini kita merubah kata “kawin” menjadi “kimpoi” yang berada di variabel “$content”, dan kemudian mengembalikan content yang telah dirubah tadi untuk kemudian secara otomatis dapat ditampilkan.

Untuk fungsi “rubah_title_kawin” saya pikir tidak perlu dijelaskan ya.. hehe.. Karena sama persis dengan fungsi “rubah_content_kawin”, yang membedakan hanyalah argumennya, dimana pada fungsi “rubah_title_kawin” akan menampung dan merubah title atau judul dari suatu artikel.

Okay, simpan perubahannya. Oh iya.. script kita sepanjang ini, secara keseluruhan akan menjadi seperti berikut.

<?php
	/*
	 * Plugin Name: Kimpoi Plugin
	 * Plugin URI: www.stoepy.com
	 * Description: Percobaan membuat plugin untuk merubah kata kawin menjadi kimpoi
	 * Version: 1.0
	 * Author: David Chen
	 * Author URI: david.stoepy.com
	*/

	function rubah_content_kawin($content) {
		$content = str_replace('kawin', 'kimpoi', $content);
		return $content;
	}

	function rubah_title_kawin($title) {
		$title = str_replace('Kawin', 'Kimpoi', $title);
		return $title;
	}

	add_filter('the_title', 'rubah_title_kawin');
	add_filter('the_content', 'rubah_content_kawin');
?>

Okay.. sekarang coba kita lihat apakah Plugin kita sudah berjalan dengan baik.

Step 4: Testing Plugin

Pertama kita akan coba lihat dulu artikel kita.

Ada beberapa kata “kawin” diatas. Nah dengan Plugin kita, kita secara otomatis dapat merubahnya menjadi “kimpoi”, jadi intinya tidak perlu ganti satu persatu deh..

Ok, sekarang kita coba masuk ke halaman admin, dan kemudian masuk ke halaman “Plugins”. Kemudian aktifkan plugin kita tadi.

Setelah kita aktifkan plugin kita, sekarang coba kita kembali ke artikel kita tadi dan lihat perubahaanya.

Cihuyy.. berhasil! Kita telah berhasil membuat sebuah plugin WordPress sederhana ala kaskus..

Akhir kata.. dalam tutorial ini saya mencoba menjelaskan secara sederhana bagaimana sih sebuah plugin bekerja, paling tidak kita tahu bagaimana cara membuatnya di WordPress, sehingga nanti dari konsep tersebut kita dapat membuat plugin yang lebih bagus dan menjual, bahkan siapa tahu kita dapat menjualnya dengan harga mahal.

Ok.. selamat mencoba ya.. doakan agar artikel ini tidak di-index Google sebagai artikel mesum.. Kata “kawin”-nya banyak banget euuyy..  :D

Untuk file tutorial ini anda dapat download, di sini.

Pada tutorial kali ini saya akan mencoba mendemonstrasikan bagaimana cara untuk merubah tombol input default browser sesuai dengan keinginan kita, dari nol.

Jadi anda dapat melihat bagaimana tombol dibuat di Photoshop kemudian mulai dipindahkan ke HTML menjadi tombol baru.

Untuk file tutorial ini, anda dapat mengunduhnya di sini.

Level: Beginner – Intermediate

Durasi video: 14 menit, 25 detik.

Tidak sabar buffer video? Download video di sini.

Anda dapat melihat tutorial lainnya mengenai color tone, seperti:

• Beautiful Color Tone, dan
• Blue Wee Color Tone

Mari kita mulai saja tutorial ini.

Pilih gambar yang akan kita ubah Color Tonenya..

Kemudian Create new fill or adjustment layer..  Klik Curves. *klik sambil menekan tombol Alt..

Kemudian atur setiap Channel RGBnya seperti pada gambar dibawah ini..

Channel Red:

Channel Green:

Channel Blue, kemudian klik OK.

Anda akan mendapatkan hasil seperti ini.

Setelah itu, Create new fill or adjustment layer, kemudian pilih Color Balance.. *klik sambil menekan tombol Alt..

Color Balance:

Okay. Selanjutnya untuk memberi kesan lebih silau, buat layer baru (Ctrl + Shift + N) dan beri nama cahaya putih. Aktifkan Brush Tool (B), kemudian atur Foreground menjadi warna puti, atur juga Opacity-nya..

Selanjutnya, buatlah layer baru (Ctrl + Shift + N), kemudian beri nama “kuning”. Kemudian aktifkan Paint Bucket Tool (G), ubah warna set Foreground Color menjadi #fff1b6, dan ubah Blending Mode dari Normal menjadi Multiply dan ubah Opacity-nya antara 50-60%.

Yup, Anda telah berhasil membuat Tone Color baru..

Selamat mencoba..  ^_^

Anda dapat melihat tutorial lainnya mengenai color tone, seperti:

• Old Yellow Wee Color Tone, dan
• Blue Wee Color Tone

Mari kita mulai saja tutorial ini.

Pilih gambar yang akan kita ubah Color Tonenya..

Kemudian Create new fill or adjustment layer.. Klik Color Balance.. *klik sambil menekan tombol Alt..

Selanjutnya atur Color Levels-nya, kemudian klik OK.

Kemudian duplicate layer 0 (Ctrl + J). *pastikan bahwa layer 0 keadaan aktif..

Layer Copy 0 masih dalam keadaan aktif, atur  Hue/Saturation-nya (Ctrl + U), atur Saturationnya antara +30 sampai +40.

Okay, setelah itu Add layer mask pada “ layer 0 copy “ hasil duplicate yang baru saja Anda buat..

Selanjutnya aktifkan Brush Tool (B), ubah Set foreground color menjadi hitam #000000, kemudian sapukan pada bagian objek.. *berfungsi sebagai eraser untuk menghilangkan bagian yang tidak diperlukan.

Yup, untuk menambah kesan lebih hijau.. Image > Adjustment > Selective Color. Kemudian ubah Colors menjadi Greens.

Yap, hasilnya seperti ini.

Selamat mencoba.. ^_^

Anda dapat melihat tutorial lainnya mengenai color tone, seperti:

• Old Yellow Wee Color Tone, dan
• Beautiful Color Tone

Mari kita mulai saja tutorial ini.

Pilih gambar yang akan kita ubah Color Tonenya..

Kemudian Create new fill or adjustment layer.. klik Curves. *klik sambil menekan tombol Alt..

Kemudian atur setiap Channer RGB- nya seperti pada gambar dibawah ini..

Channel Red:

Channel Green:

Channel Blue, kemudian klik OK.

Anda akan mendapatkan hasil seperti ini.

Setelah itu, Create new fill or adjustment layer, kemudian pilih Color Balance. *klik sambil menekan tombol Alt..

Color Balance:

Okay. Selanjutnya untuk memberi kesan lebih silau, buat layer baru (Ctrl + Shift + N) dan  beri nama cahaya putih. Aktifkan Brush Tool (B), kemudian atur Foreground menjadi warna putih, atur juga Opacity-nya menjadi 10-20%..

Setelah itu, buatlah layer baru (Ctrl + Shift + N), kemudian beri nama “biru”, ubah Foreground menjadi #a6ecff, dan ganti Blending mode dari Normal menjadi Multiply, jangan lupa atur Opacity-nya..

Hasilnya seperti ini.

Selamat mencoba.. ^_^

Setelah mengikuti tutorial ini anda akan menghasilkan satu lagi portfolio seperti dibawah ini. Anda tentu saja dapat menggunakan resource lain untuk membuat efek seperti ini.

Okay, langsung saja kita akan membuat tutorial ini. Buat dokumen baru File > New, Width 800pixels dan Height 500pixels. (RGB Color mode), background hitam #000000, kemudian klik OK.

Buka file objek yang akan digunakan.

Selajutnya, pindahkan gambar objek model ini ke layer utama. Klik(tahan) and drag ke layer dokumen utama kemudian lepaskan.

Langkah selanjutnya, untuk membuat line glow’nya, buat layer baru (Ctrl + Shift + N), Oh iya, sebelumnya setting dulu Brush Tool‘nya, ubah besar brushnya menjadi 2-3px, set foreground color menjadi putih #ffffff dan Opacity menjadi 100%. Kemudian aktifkan Pen Tool (P). Mulai membuat garis lengkung sesuai dengan bentuk objek, Anda bisa melihat contoh pada gambar dibawah ini.

Okay, setelah membentuk garis atau lengkung yang diinginkan, klik kanan kemudian pilih Stroke Path.

Kemudian pilih mode Brush dan klik OK.

dan hasilnya seperti ini.

Selanjutnya, masuk ke Layer Style atau double klik pada panel layernya, kemudian akan muncul form layer style. Select Outer Glow.

hasil dari effect Outer Glow. Jangan lupa hapus bagian line glow yang tidak digunakan untuk memberikan kesan melingkar pada bagian kaki sehingga Anda hasilnya seperti ini.

Yup.. Anda telah berhasil membuat line glow. Okay sekarang Anda bisa mengulangi langkah-langkah sebelumnya untuk membuat beberapa line glow yang lain. Kreasikan line glow yang Anda buat untuk mendapatkan kesan menarik.

Pen Tool masih dalam keadaan aktif, klik kanan kemudian pilih Delete Path untuk menghilangkan Path yang kita buat.

Kemudian hapus bagian line yang tidak digunakan untuk mendapatkan kesan melingkar pada kaki, dan jangan lupa untuk memberikan effect Outer Glow pada line tersebut.

Aktifkan Brush Tool (B), kemudian klik bagian panel Brushes disebelah kanan.

Kemudian aktifkan Shape Dynamics, Scattering dan Smoothing yang terdapat pada Brush Tip Shape.

Ok, buat layer baru (Ctrl + Shift + N) *pastikan bahwa layer ini berada paling atas.. , kemudian atur besar kecil Master Diameter Brush Tool menjadi 3px.

Sapukan pada sekita line glow yang sudah Anda buat. *Anda dapat berkreasi dengan Brush Tool ini..

Kemudian buat efek shadow pada bagian objek kaki. Klik layer objek kaki dengan cara pencet Ctrl(tahan) + klik pada layer kaki, dan secara otomatis objek kaki tersebut akan otomatis terseleksi..

Kemudian buatlah layer baru (Ctrl + Shift + N), aktifkan Paint Bucket Tool (G), kemudian ubah warna Background menjadi hitam #000000, dan klik didalam seleksi yang sudah kita buat tadi.

Masuk ke Filter > Blur > Gaussian Blur. Aktifkan Preview dan ubah Radius menjadi 5.0 kemudian klik OK.

Pastikan bahwa layer “kaki shadow” yang kita buat tadi berada di bawah layer “kaki”. Jangan lupa ubah Opacitynya menjadi 50-65%.

Buatlah layer baru (Ctrl + Shift + N), posisikan layer berada di bawah layer “kaki”, kemudian aktifkan Brush Tool (B), kemudian ubah warna foreground menjadi hitam #000000. Atur Opacity menjadi 50%, dan Master Diameter menjadi 60px. Sapukan pada bagian bawah kaki untuk mendapatkan efek shadow.

Okay! sekarang kita akan membuat background. Buatlah layer baru (Ctrl + Shift + N), aatifkan Rectangular Marquee Tool (M), kemudian buat kotak persegi panjang, kemudian beri warna putih pada seleksi tersebut.

Kemdian ubah Blending Mode dari Normal menjadi Soft Light, Opacity 50-55%.

Pastikan juga bahwa layer “kotak background” berada diatas layer “background” dan “hitam & ungu”.

Kemudian Duplicate layer “kotak background” tersebut (Ctrl + J) hingga menghasilkan banyak kotak background hasil dari duplicate tersebut. Kemudian posisikan sesuai dengan kreasi Anda. Sehingga hasilnya seperti ini.

Okay, selanjutnya membuat efek glow. Buat layer baru (Ctrl + Shift + N), beri nama “glow”. Kemudian aktifkan Brush Tool (B), ubah warna foreground menjadi putih #ffffff. Ubah Opacity menjadi 50%, dan Master Diameter menjadi 65px. Sapukan pada bagian sekeliling/sekitar kaki.  *Pastikan layer glow ini berada di atas layer “kotak background” yang sudah kita buat tadi.

Yap, sekarang ubah Blending Mode layer glow ini dari mode Normal menjadi Overlay.

Kemudian Anda bisa menambahkan text dan layer untuk Banner, Text Button, Content, dan Footer.

Enjoy Guys.. ^_^

Sebelum memulai tutorial ini, ada baiknya anda mengunduh dahulu file tutorial dengan mengklik tombol download dibawah ini.

Final Image Preview

Ok, langsung saja kita mulai tutorial ini. Buat dokumen baru File > New di Adobe Photoshop dengan ukuran Width 1000 px dan height 750 px (RGB Color mode). Kemudian klik OK.

Kemudian buka gambar objek yang akan dimanipulasi. File – Open, kemudian pilih gambar. (tips: cari gambar yang backgroundnya putih atau satu warna, supaya lebih mudah untuk menyeleksinya.)

Seleksi bagian putihnya. Aktifkan Magic Wand Tool (W), klik pada bagian warna putihnya, atau menggunakan Pen Tool (P) kemudian seleksi objek tersebut. hasilnya seperti ini.

Ubah Color mode menjadi Black and White dengan menggunakan Hue/Saturation (Ctrl + U). Atur Saturationnya menjadi -100.

Dan Anda akan mendapatkan hasil seperti ini.

Buat layer baru (Ctrl + N), kemudian aktifkan Pen Tool (P), seleksi bagian pada mata secara menyeluruh, kemudian klik kanan – make selection, atur Feather Radius menjadi 0,2 px, klik OK. Anda akan mendapatkan sebuah seleksi pada bagian mata. Kemudian aktifkan Gradient Tool (G), set foreground color menjadi hitam #000000, dan set background color menjadi putih #ffffff.

Hasilnya seperti ini.

Buka gambar tekstur yang akan digunakan. Anda bisa menggunakan berbagai macam tekstur batu. Select layer teksture, kemudian seleksi sesuai dengan bentuk objek utama kepala dan badan objek. Kemudian ubah Blending Mode‘nya menjadi Multiply.

Kemudian buat sebuah layer baru Ctrl + N, buatlah sebuah seleksi “retakan” dengan menggunakan Polygonal Lasso Tool (L). Buat beberapa pecahan atau retakan dibagian wajah. kemudian beri warna hitam, dan beri effect drop shadow. Anda akan mendapatkan hasil seperti ini.

Untuk mendapatkan efek shadow yang lebih natural. Buat layer baru Ctrl + N, kemudian aktifkan Brush Tool (B), atur foreground menjadi hitam #000000, kemudian atur Opacity menjadi 40-50%. Sapukan pada bagian wajah. Foreground #000000

Opacity Brush 40-50%.

Sapukan Brush Tool dari atas ke bawah.

Kemudian atur cahaya dengan cara klik pada posisi layer paling atas, kemudian tekan tombol ALT(tahan) kemudian klik Create new fill or adjustment layer bagian bawah Layer.

Atur parameternya. (disesuaikan..), kemudian klik OK.

Hasil dari Levels.

Okay… Setelah ini kita akan menambahkan objek semut untuk menambah kesan dramatis. Kita siapkan gambar semut yang akan kita gunakan, File > Open. Kemudian seleksi menggunakan Pen Tool (P) atau Polygonal Lasso Tool (L), seleksi secara menyeluruh semut sehingga Anda mendapatkan hasil yang diinginkan. Semut sebelum diseleksi.

Kemudian buat layer baru (Ctrl + N), aktifkan Paint Bucket Tool (G) dan atur warna foreground menjadi hitam #000000. Kemudian klik pada bagian yang sudah diseleksi tadi, sehingga menghasilkan warna hitam ke seluruh bagian yang terseleksi. Setelah diseleksi hasilnya seperti ini. Atau anda dapat mendownloadnya di sini.

Kemudian Anda bisa menggabungkan objek semut kedalam Layer utama dengan cara klik and drag semut itu ke layer utama. Pastikan bahwa layer semut berada di paling atas. Anda bisa mengcopy layer semut (Ctrl + C) dan Paste (Ctrl + V). Kemudian atur posisi semut secara acak untuk mendapatkan kesan lebih natural.

Yup! kemudian, Anda bisa membuat beberapa Effect Sinar sehingga terkesan Glow pada objek ini. Caranya sangat simple, buat layer baru (Ctrl + N) kemudian aktifkan Brush Tool (B), atur warna foreground menjadi putih #ffffff. Atur Opacity menjadi 40%, kemudian ubah Blending Mode dari normal menjadi mode Screen, atur Opacity menjadi 20-30%. Sapukan pada bagian-bagian tertentu untuk mendapatkan kesan Glow.

Setelah semuanya selesai, Anda bisa saja menambahkan beberapa objek untuk backgroundnya supaya terlihat lebih dramatis. misalkan bangunan, atau hutan, atau kastil tua.

Okay, semoga tutorial ini bisa membuka inspirasi atau imajinasi Anda dalam membuat karya yang lebih Keren. Jangan takut untuk selalu mencari ide-ide yang lebih keren.

Anda bisa mendownload file latihan di sini.

Selamat Mencoba..

^_^