Tutorial PHP : Cara Membuat Widget Di Wordpress Bag. 1

Sudah menjadi rahasia yang umum tentang banyaknya developer Indonesia yang sukses dalam kacah per-wordpress-an, entah karena fokus di jasa pembuatan website menggunakan wordpress, ataupun membuat produk template premium wordpress, atau juga membuat plugin-plugin di wordpress yang memang dibutuhkan oleh banyak orang. Memanfaatkan psikologi user akan kelengkapan dan kemudahan suatu fitur yang akan dibuat.

Pada tutorial sebelumnya saya telah menyinggung bagaimana membuat plugin di wordpress, silahkan simak selengkapnya di sini http://www.ilmuwebsite.com/membuat-plugin-wordpress-bag-1-intro-to-action-function. Kali ini kita akan membahas bagaimana sih caranya membuat widget di wordpress menggunakan PHP.

Perlu diketahui bahwa untuk membuat widget, Anda betul-betul harus mengerti betul pemrogaman php, jelas akan kode-kode dalam php programming, ditambah dengan konsep OOP menggunakan PHP. Jika belum mengerti maka kecil kemungkinan Anda bisa mempelajari cara membuat widget wordpress. Atau paling tidak Anda cukup mengerti logikanya itu juga jadi keuntungan tersendiri. Karena logika pemrogaman itu bukan hafalan. Oke ya?

Langsung saja kita masuk ke dalam pembuatan widget di wordpress...

Dalam praktik kali ini saya menggunakan wordpress yang sudah diletakkan dalam folder htdocs pada xampp, yakni letaknya di D:\xampp\htdocs\wplabz

Untuk widget bisa diletakkan di folder plugin wordpress. Saya meletakkannya di D:\xampp\htdocs\wplabz\wp-content\plugins

Kita persiapkan sebuah file php kosong beri nama widgetContoh.php, dan letakkan di D:\xampp\htdocs\wplabz\wp-content\plugins, Anda bisa menyesuaikan sesuai dengan letak xampp Anda nanti.

Kemudian silahkan isikan dalam file php widgetContoh.php seperti di bawah ini :
...
<?php
/*
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
*/

class WidgetSederhana extends WP_Widget
{
 function WidgetSederhana() {
  $widget_options = array(
  'classname'  =>  'widget-sederhana',
  'description'  =>  'Contoh Widget Sederhana'
  );
  parent::WP_Widget('widget_sederhana', 'Widget Sederhana', $widget_options);
 }
 
 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 
 }
 
 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>
  <br />
  <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 
 }
 
}
 
function widget_sederhana_init() {
 register_widget("WidgetSederhana");
}

add_action('widgets_init','widget_sederhana_init');


Baiklah setelah itu save, jangan lupa letak direktorinya masih di D:\xampp\htdocs\wplabz\wp-content\plugins. Kemudian buka browser Anda dan masuk ke dalam dashboard wordpressnya. Pada praktik kali ini letak wordpress milik saya di http://localhost/wplabz/.

Silahkan masuk ke dashboardnya lalu masuk ke dalam menu plugin > Installed Plugin. Widget Sederhana sudah masuk ke dalam plugin yang sudah terinstall.



Anda tinggal aktifkan saja. Maka secara otomatis nanti masuk ke dalam widget yang sudah terdaftar. Anda bisa eksplorasi sendiri.

Untuk penjelasan detil mengenai struktur kode widget sederhana akan saya jelaskan di bagian ke 2.

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