Tutorial PHP : Cara Membuat Widget Di Wordpress Bag. 2

Baiklah, kita akan mulai lanjutkan penjelasan secara terperinci mengenai tutorial terkait sebelumnya, mengenai Cara membuat widget di wordpress. Bagi Anda yang ingin melihat tutorial sebelumnya silahkan klik link berikut http://desainweb.ilmuwebsite.com/2014/10/tutorial-php-cara-membuat-widget-di.html

Nah, langsung saja kita lanjutkan. Yang paling penting dari suatu plugin wordpress, yang mana dalam kasus tutorial kali ini yakni pembuatan widget sekaligus plugin tambahan, yang paling pentingnya adalah deskripsi dari plugin itu sendiri...
/*
Plugin Name: Widget Sederhana
Plugin URI: http://www.ilmuwebsite.com
Description: Ini adalah Contoh Sederhana Widget dengan OOP PHP
Author: Loka Dwiartara
Version: 1.0
Author URI: http://www.ilmuwebsite.com
*/

silahkan di lihat kode di atas, deskripsi ini lah yang nantinya akan muncul di dalam dashboard wordpress bagian installed plugin, seperti gambar di bawah ini nantinya ...


Selanjutnya barisan kode ini ...
class WidgetSederhana extends WP_Widget
{
... 
}

Jika Anda pernah belajar OOP pada PHP sebelumnya (jika belum maka silahkan baca membaca http://www.ilmuwebsite.com/lebih-dalam-dengan-oop dan http://www.ilmuwebsite.com/php-dan-class-part1) kelas ini digunakan untuk mengambil sifat default dari widget bawaan wordpress. Di dalamnya terdapat banyak sekali property dan objek yang digunakan untuk membuat widget. Yang jelas dengan meng- extends kan ke WP_Widget maka kita baru bisa membuat widget.

Lalu ada function seperti ini di bawahnya :
 function WidgetSederhana() {
  $widget_options = array(
  'classname'  =>  'widget-sederhana',
  'description'  =>  'Contoh Widget Sederhana'
  );
  parent::WP_Widget('widget_sederhana', 'Widget Sederhana', $widget_options);
 }

dengan function ini di tampilkan lah deskripsi plugin yang siap pakai, hal tersebut di deskripsikan pada menu dashboard > appearance > widget. Hasilnya nanti akan seperti ini ...


lihat gambar di atas, di paling bawah ada Widget baru bernama Widget sederhana kemudian ada deskripsinya Contoh widget sederhana. Ini dihasilkan oleh function tersebut (lihat ke bagian atas).

Lalu di bawahnya lagi terdapat barisan function
 function widget( $args, $instance ) {
  extract ( $args, EXTR_SKIP );
  $title = ( $instance['title'] ) ? $instance['title'] : 'Contoh Widget Sederhana';
  $body = ( $instance['body'] ) ? $instance['body'] : 'Contoh Deskripsi Widget Sederhana Di Sini ... '
  ?>
  <?php echo $before_widget ?>
  <?php echo $before_title . $title . $after_title ?>
  <p><?php echo $body ?></p>
  <?php
 }

fungsi inilah yang nantinya tampil di bagian template wordpressnya. Lihat gambar di bawah ini ...



Gambar di atas di hasilkan oleh fungsi tersebut. Adapun variable yang ada di dalam nya adalah property bawaan dari class WP_Widget. Jika Anda ingin membuat widget, maka silahkan menyesuaikan saja dengan aturan yang sudah ada.

Selanjutnya ada function yang digunakan dalam dashboard wordpress bagian widget yakni
 function form( $instance ) {
  ?>
  <label for="<?php echo $this->get_field_id('title'); ?>">
  Title:
  <input id="<?php echo $this->get_field_id('title'); ?>"
    name="<?php echo $this->get_field_name('title'); ?>"
    value="<?php echo esc_attr( $instance['title'] ); ?>" />
  </label>
 

  <label for="<?php echo $this->get_field_id('body'); ?>">
  Message:
  <textarea id="<?php echo $this->get_field_id('body'); ?>" name="<?php echo $this->get_field_name('body'); ?>"><?php echo esc_attr( $instance['body'] ); ?></textarea>
  </label>
  <?php
 }

Kode-kode tersebut menghasilkan form inputan yang bisa di kostumisasi di dashboard wordpress bagian widget, ketika dipilih untuk digunakan. Seperti ini nantinya



Setelah itu adalah barisan kode untuk meregistrasikan widget untuk bisa di aktifkan sebagai plugin tambahan,
function widget_sederhana_init() {
 register_widget("WidgetSederhana");
}

Dan yang terakhir, ketika sudah di aktifkan pluginnya, wordpress baru akan bisa menggunakan widget dengan mengeksekusi
add_action('widgets_init','widget_sederhana_init');

Ya, cukup segitu dulu pembahasannya. Kita akan belajar lagi mengenai pembuatan widget yang lebih kompleksnya nanti.

Semoga bermanfaat.
Salam.

Loka Dwiartara
Admin ilmuwebsite.com
Founder kaffah.biz

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Admin Ilmuwebsitecom

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Poskan Komentar