December 13, 2013
Membuat Widget Sederhana di WordPress
salam, lama sudah saya tidak menulis akibat kesibukan proyek yang semakin padat. kali ini saya ingin sekedar sharing bagaimana caranya membuat sebuah widget sederhana di WordPress. widget ini adalah sebuah widget sederhana yang mana akan menampilkan ucapan selamat datang pada user. OK yup kita mulai.
sebelum membuat widget kita terleih dahulu membuat plugin, jika tidak anda dapat meng-copy paste seluruh isi tutorial ini pada file function.php di theme yang sedang anda pergunakan. untuk cara membuat plugins mungkin lain kali akan saya posting, kali ini kita fokuskan dahulu dengan mengubah file function.php di theme anda.
<?php /*Membuat Sebuah widget baru*/ class gob_widget extends WP_Widget { function __construct() { parent::__construct( // ID dari Widget 'gob_widget', // Nama Widget akan tampil di User Interface __('Widget Goblooge', 'gob_widget_domain'), // deskripsi Widget array( 'description' => __( 'Tutorial dari goblooge', 'gob_widget_domain' ), ) ); } // buatlah front end public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // before widget biasanya di panggil oleh themes echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; // menampilkan isi dari widget echo __( 'Hallo Bang', 'gob_widget_domain' ); echo $args['after_widget']; } // Widget Backend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; }else{ $title = __( 'New title', 'gob_widget_domain' ); } // Form admin ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <?php } // update widget jika ada data disimpan public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } //akhir dari class // Register and load the widget function gob_load_widget() { register_widget( 'gob_widget' ); } add_action( 'widgets_init', 'gob_load_widget' ); ?>
cari file function.php dari theme yang sedang anda gunakan. seharusnya itu terletak di folder wordpress/wp-content/themes/nama_theme/function.php. buka dan tambahkan code berikut:
jika anda sudah ahli dalam membuat widget anda dapat membuat widget yang mungkin lebih kompleks, seperti widget yang saya buat sendiri di website saya ini. dengan manambah beberapa fitur seperti menyimpan state, menyimpan cookie, grayscale mode, simple mode dan beberap shorcut serta fitur untuk print. berikut ini hasil screenshot-nya, atau boleh dicoba langsung di website ini :D. salam.

Grayscale Mode, dengan sekali klik tampilan akan berubah menjadi hitam putih, cocok untuk anda yang buta warna

Print Widget : dengan sekali klik anda dapat melakukan print dan hanya bagian yang merupakan artikel saja yang akan di print.