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.

Tampilan dari Widget yang saya buat, silakan di coba

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

Help dan Shorcut-shorcut pun dapat di buat memakain widget

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

Simple Mode : jika anda bosan dengan tampilan yang ramai, anda bisa gunakan tampilan simple mode

Comments

total comments