PHP Javascript Ajax jQuery Tutorial Indonesia

Desrizal
Mencoba berbagi ilmu yang sedikit dimiliki ini...

| | | | |

Membuat Sendiri Plugin Wordpress

13:28 13 Jan 2012 @Wordpress

Saat ini Wordpress merupakan CMS yang paling banyak digunakan untuk membuat suatu webiste. Mulai dari blog sampai web untuk e-commerce. Bagi kamu-kamu yang suka programming dan ingin mempelajari pemograman Wordpress, terutama untuk plugin development, berikut contoh sederhana plugin Wordpress.

Plugin yang akan kita buat kali ini adalah plugin untuk menampilkan tombol google +1 di kontent post website Wordpress kita. Di sini kita akan belajar bagaimana cara membuat plugin, anatomi plugin Wordpress dan bagaimana suatu plugin dieksekusi oleh engine Wordpress.

Lokasi File Plugin

Oke mari kita mulai membuat plugin wordpress. Diharapkan Wordpress telah terinstall di komputer kamu. Semua file-file plugin wordpress berada di direktori /wp-content/plugins. Masuklah kamu ke direktori tersebut kemudian buat sebuah folder dan kita beri nama "googleplusonesaya". Setelah kita buat folder, nanti file-file kode PHP plugin akan kita simpan di folder /wp-content/plugins/googleplusonesaya/.

Anatomi Plugin

Mari kita mulai membuat kode untuk plugin kita. Bahasa pemograman yang kita gunakan adalah PHP dan nanti file plugin yang kita buat ber-ekstensi .php

Information Header

Bukalah teks editor kesayangan kamu. Tulis kode berikut:

<?php
/*
Plugin Name: Google Plus One saya
Plugin URI: http://www.codingwear.com
Description: Plugin untuk menampilkan tombol google plus one di postingan Wordpress
Author: Desrizal
Version: 1.0
Author URI: http://www.desrizal.com
*/
?>

Simpan kode tersebut dengan nama googleplusone.php, simpan di direktori /wp-content/plugins/googleplusonesaya/ yang telah kita buat sebelumnya.

Sekarang bukalah wordpress di browser kamu, masuk ke wp-admin. Klik Plugins. Maka akan muncul seperti berikut:

Membuat Plugin Wordpress

Ya kita baru saja membuat kode plugin berupa information header, yang menampilkan informasi mengenai plugin kita, seperti nama plugin, deskripsi plugin, versi, penulis dan alamat web kita.

Membuat Fungsi kita Sendiri

Langkah selanjutnya adalah membuat fungsi kita sendiri. Seperti kita ketahui, untuk menampilkan tombol google plus one. Kita harus menempatkan kode berikut

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

di antara <head> dan </head> pada web wordpress kita. Sekarang kita buat fungsi untuk menampilkan kode di atas pada header web kita

Masih pada file yang sama, googleplusone.php, kita edit dan tambahkan kode berikut:

    
function pasang_jscript(){
    echo "<script type=\"text/javascript\" src=\"http://apis.google.com/js/plusone.js\"></script>";
}

Oke sekaramg kita sudah mempunyai fungsi buatan kita sendiri yang bernama pasang_jscript(). Langkah selanjutnya adalah bagaimana meng-eksekusi fungsi di atas supaya running saat Wordpress meng-generate header.

Hook

Komponen paling vital dalam pemograman plugin Wordpress adalah hook, definisi hook adalah kapan suatu fungsi di plugin di eksekusi. Cara menerapkan hook adalah menggunakan fungsi built in dari Wordpress, yaitu : add_action() dan atau add_filter().

Sintak:

add_action(string $hook, string $nama_fungsi, int [$priority])

$hook, adalah jenis-jenis hook berupa string. Untuk melihat jenis-jenis hook bisa kita lihat di http://codex.wordpress.org/Plugin_API/Action_Reference dan http://codex.wordpress.org/Plugin_API/Filter_Reference contoh hook adalah "wp_head". artinya fungsi plugin kita di eksekusi ketika wordpress merunning fungsi wp_head. Hook ini biasanya berada di antara tag <head> dan </head>.
$nama_fungsi, adalah nama fungsi yang terdapat di kode plugin kita.

Untuk fungsi add_filter(), sintaknya adalah sama.

Kembali ke plugin buatan kita, edit file googleplusone.php, tambahkan kode berikut:

add_action("wp_head","pasang_jscript");

Kode di atas berarti kita akan meng-eksekusi fungsi pasang_jscript() ketika WP merunning fungsi wp_head yang menggenerate header.

Sehingga kode lengkap kita sebagai berikut:

<?php
/*
Plugin Name: Google Plus One saya
Plugin URI: http://www.codingwear.com
Description: Plugin untuk menampilkan tombol google plus one di postingan Wordpress
Author: Desrizal
Version: 1.0
Author URI: http://www.desrizal.com
*/

function pasang_jscript(){
    echo "<script type=\"text/javascript\" src=\"http://apis.google.com/js/plusone.js\"></script>";
}

add_action("wp_head","pasang_jscript");

?>

Sekarang mari kita lihat hasilnya. Activate plugin google plus one saya, lalu refreseh web WP kamu. Lalu view page source, maka akan kelihatan seperti berikut:

Membuat Plugin Wordpress

Oke sampai saat ini kita sudah berhasil memasukkan script di header. Langkah selanjutnya adalah menampilkan tombol google +1 di kontent single post (bukan konten yang di halaman homepage). Untuk menampilkan tombol kita harus menambahkan kode berikut pada kode posting kita.

<g:plusone></g:plusone>

Kembali ke teks editor kita edit lagi file googleplusone.php, tambahkan kode berikut:

function pasang_tombol($content){
    echo $content;
    if(is_single()){
        echo "<p><g:plusone></g:plusone>";
    }
}

add_filter("the_content","pasang_tombol");

Pada kode di atas kita membuat fungsi pasang_tombol(). Variable $content di sini adalah konten dari setiap posting kita, yang kita masukkan ke dalam fungsi pasang_tombol(). Fungsi is_single() adalah fungsi built in WP yang berfungsi untuk mengecek apakah yang ditampilkan adalah single post. Untuk melihat daftar lengkap fungsi built in WP bisa kamu lihat di http://codex.wordpress.org/Function_Reference/

Kode add_filter("the_content","pasang_tombol"); akan menjalankan fungsi pasang_tombol()setelah WP mengambil konten tetapi sebelum di cetak di web.

Berikut adalah kode lengkap dari plugin kita:

<?php
/*
Plugin Name: Google Plus One saya
Plugin URI: http://www.codingwear.com
Description: Plugin untuk menampilkan tombol google plus one di postingan Wordpress
Author: Desrizal
Version: 1.0
Author URI: http://www.desrizal.com
*/

function pasang_jscript(){
    echo "<script type=\"text/javascript\" src=\"http://apis.google.com/js/plusone.js\"></script>";
}

add_action("wp_head","pasang_jscript");

function pasang_tombol($content){
    echo $content;
    if(is_single()){
        echo "<p><g:plusone></g:plusone>";
    }
}

add_filter("the_content","pasang_tombol");

?>

Mari kita lihat hasilnya, klik salah satu posting, maka akan muncul tombol google plus one.

Membuat Plugin Wordpress

Mendistribusikan Plugin buatan kita

Untuk membagi-bagikan plugin buatan kita dan bisa diinstall oleh orang lain, anda cukup meng-ZIP folder googleplusonesaya yang terdaapat di direktori /wp-content/plugins

Download Source Code Plugin Google Plus Saya

Tags: Bagaimana Cara Membuat Plugin Wordpress

About Desrizal

Tulisan Lainnya

Membuat Sendiri Plugin Wordpress

Komentar

#1	Dari : Rizky (14:00 13 Jan 2012) Web : http://mrpk.web.id Geol pak, dulu sempet belajar bikin juga tapi masih bingung. Ternyata gini caranya. Tengkyu pak.
#2	Dari : candra ikhsan (14:02 13 Jan 2012) Web : http://mangacan.blogspot.com/ thx bermanfaat sekali...
#3	Dari : Yuda (14:23 13 Jan 2012) Web : http://yudadabye2.blogspot.com/ Wah kebetulan saya lagi develope web dengan wordpress mas, thanks :)
#4	Dari : Obat Anti Rokok (14:34 13 Jan 2012) Web : http://obatantirokok.wordpress.com kapan2 ditunggu sharing ilmu bikin theme wp nya ya mas :) salam sehat
#5	Dari : Imam (22:29 16 Jan 2012) Web : http://imamthok.wordpress.com Terimakasih Pak Desrizal. Artikel2 anda sangat membantu saya dalam mempelajari pemprograman web. Jujur, blog ini sangat bermanfaat sekali bagi saya yang masih awam. Keep posting, keep sharing..
#6	Dari : techno (00:47 15 Feb 2012) Web : http://djava.org mantep gan infonya.... dah lama saya cari tutorial yg kayak gini thank's
#7	Dari : carl (22:15 06 Mar 2012) Web : http://sesuatuherbal.com numpang nanya ni gan, kalo wordpress gratisan bisa pasang widget affiliasi ga?
#8	Dari : rike lusyane (20:23 19 Apr 2012) Web : http://www.bajukaosmurah.com oh yya bang gimn mmbuat plugin wp yg byar jadi null, bang...tlng ajarin bang thanks ilmunya sangat bermanfaat buat ane yg ingin develop blog wp
#9	Dari : roland (14:08 08 May 2012) Web : http://my-greenconcept.com tq bos ilmunya.... www.belibajubayi.com
#10	Dari : Saputro Herbals (09:46 14 May 2012) Web : http://saputroherbals.blogspot.com wahduh... harus segera dicoba agar mudah paham.....
#11	Dari : Alfred (21:20 08 Jun 2012) Web : http://alfredsgallery.co.cc cara di atas ternyata kita cuma nemunya di control panel hosting yah..? mas kalo plugin hasil buatan kita dibikin rar caranya gimana yah..? ane udah berhasil buat plugin ikut tutorial ini, tapi ane ga bisa share ke orang... caranya dong plis pencerahannya. thanks
#12	Dari : Gangsar Swa Purba (02:14 12 Jun 2012) Web : - keren... sangat bermanfaat sekali artikelnya.
#13	Dari : Irkham (14:28 03 Jul 2012) Web : http://irkham.web.id Bermanfaat sekali artikel nya....
#14	Dari : narre (11:57 04 Jul 2012) Web : http://localhost Lumayan tutorialnya tapi ada yang salah. Untuk filter hook, parameter yang dilewatkan harus dikembalikan.
#15	Dari : Cinta2Maret (18:18 11 Jul 2012) Web : http://cinta2maret.us.to Thanks Mas, lumayan nih buat wordpress saya yang masih di localhost
#16	Dari : penyakit darah tinggi (16:12 04 Aug 2012) Web : http://herbalkanker.biz/penyakit-darah-tinggi/ mantap mkasih
#17	Dari : adir (01:08 11 Sep 2012) Web : http://amqanet.com tutorial nya sangat membantu para newbie spt saya... terima kasih mas atas tutorialnya...
#18	Dari : tokoBongas (12:01 16 Sep 2012) Web : http://tokobongas.com terimakasih atas sharing ilmunya, semoga barokah.
#19	Dari : Irfan (21:47 20 Sep 2012) Web : http://irfanweb.com Benar-benar bermanfaat nih . . . Bisa langsung dipraktekkan.
#20	Dari : Informasi Bisnis Internet (23:13 04 Dec 2012) Web : http://irvanblog.com Wah, mantap benar nih. Tentu yang bisa php lebih mudah memahami ya...
#21	Dari : sunarko (23:20 01 Jan 2013) Web : http://aboutcosmeticsurgery.net wah ternyata ribet ya gan
#22	Dari : hary (10:40 14 Feb 2013) Web : http://belajarmandiri.web.id mantap, tp gw kok belet banget gaga bisa2 buat plugin dan template sendiri
#23	Dari : Dhimas Kirana (19:56 15 Feb 2013) Web : http://www.dhimaskirana.com/ agak belum mengerti nih, tapi setidaknya udah tau cara membuat plugin secara dasar :D buatin juga tutorial membuat plugin, tapi ntar bisa di kasih option gitu..
#24	Dari : mirzabilla (20:47 18 May 2013) Web : http://all-best-products.com wah2 keren and mangtabs bos....lanjutkan !!!!