sumber : https://www.onphpid.com/membuat-sendiri-widget-sederhana-wordpress.html
Membuat Widget WordPress Sendiri
Dari sekian banyak widget yang telah disediakan oleh wordpress tidak semuanya dapat mencukupi kebutuhan kita yang sangat dinamis, misalkan kita ingin menampilkan 10 daftar posting terbaru dengan gambar (thumbnail), meskipun wordpress sudah menyediakan Widget Recent Posts untuk menampilkan daftar posting terbaru namun widget tersebut belum menyediakan fitur untuk menampilkan daftar posting dengan gambar atau memang widget-widget yang kita butuhkan memang belum disediakan oleh wordpress misalkan widget untuk menampilkan sejumlah posting yang paling diminati oleh pengunjung, tentu widget tersebut tidak disediakan secara default oleh wordpress, lalu apa yang harus kita lakukan, menyerah ? tidak, kita memiliki dua opsi untuk mengatasi masalah kita :
- Menginstall plugin, dengan menginstall plugin kita bisa menambah widget baru namun terkadang widget yang terinstall dengan menambah widget tetap tidak sesuai dengan harapan kita.
- Membuat Widget Sendiri, dengan ini kita bisa membuat widget yang paling pas untuk kebutuhan kita.
Di tutorial ini Kita akan mengambil opsi ke dua yakni belajar membuat widget wordpress sendiri step by step :
- Membuat sebuah file dengan mana
MyWidgets.phppada folder theme kita - Menyisipkan file
MyWidgets.phpkedalam file functions.php pada theme kita dengan cara, buka filefunctions.phpdan letak kode berikut di line paling bawah
require get_template_directory() . ‘/MyWidgets.php’;
- Buka file
MyWidgets.phpdan isi dengan kode berikut :
| <?php | |
| class My_Widget extends WP_Widget { | |
| /** | |
| * Mengatur Nama Widget | |
| */ | |
| public function __construct() { | |
| $widget_ops = array( | |
| ‘classname‘ => ‘my_widget‘, // class pada html | |
| ‘description‘ => ‘My Widget is awesome‘, // deskripsi tentang widget | |
| ); | |
| /** | |
| * parent::__construct($id_widget, $namaWidget, $options); | |
| */ | |
| parent::__construct( ‘my_widget‘, ‘My Widget‘, $widget_ops ); | |
| } | |
| /** | |
| * yang akan ditampilkan di website | |
| */ | |
| public function widget( $args, $instance ) { | |
| // code html | |
| } | |
| /** | |
| * akan ditampilkan di halaman admin | |
| */ | |
| public function form( $instance ) { | |
| // code html | |
| } | |
| /** | |
| * perintah simpan dan update | |
| */ | |
| public function update( $new_instance, $old_instance ) { | |
| // code saving | |
| } | |
| } | |
| // implementasi widget | |
| add_action( ‘widgets_init‘, function(){ | |
| register_widget( ‘My_Widget‘ ); | |
| }); |
di atas adalah kerangka dasar dari sebuah widget, Bingung ? sama… yuk kita akan coba bahas satu persatu:
Bagian pertama adalah konstruktor ( __construct() ) pada bagian ini bertugas memberikan identitas widget yang kita buat seperti Nama, Deskripsi, dan id widgetsnya.
Bagian kedua adalah method widget ( widget( $args, $instance ) ) ini adalah bagian yang nantinya akan ditampilkan di bagian depan yang dilihat pengunjung.
Bagian ketiga adalah method form ( form( $instance ) ) di bagian ketiga ini akan ditampilkan di halaman admin. contohnya
Penampakan Form di widget Categories
Bagian keempat method update ( update( $new_instance, $old_instance ) ) bagian ini bertugas untuk menyimpan setiap nilai (value) yang kita inputkan pada form widget , yang nantinya akan diolah dan ditampilkan dihalaman visitor.
Bagian terakhir adalah kode untu mengimplementasiClass My_Widget kita alias menambahkan widget kita ke dalam wordpress. perhatikan string (tulisan) “My_Widget” pada kode berikut :
register_widget( 'My_Widget' );
string tersebut adalah nama class widget kita.
Membuat Widget WordPress Sediri
Sampai di sini sebenarnya widget yang kita buat dengan kode di atas sudah terdaftar di mesin wordpress. ndak percaya ? coba check di Appearance > Widgets. pasti kalian bakal lihat widget nya.
Tapi, belum bisa kita gunakan… karena memang belum ada apa-apanya, tidak ada formnya, seperti halnya widget yang lain.
Oke, sekarang kita akan bikin agar ada form-nya dan ada yang bisa ditampilkan di halaman pengunjung.
pertama kita akan membuat widget yang kita buat tadi menghasilkan Output seperti gambar berikut:
Agar widget yang kita buat bisa seperti itu, kalian tambahkan kode berikut di dalam method widget( $args, $instance ) :
| // …. | |
| $widget_html = $args[‘before_widget’]; | |
| $nama = “”; | |
| if ( ! empty( $instance[‘title’] ) ) { | |
| $widget_html .= $args[‘before_title’] . apply_filters( ‘widget_title’, $instance[‘title’] ) . $args[‘after_title’]; | |
| $nama = $instance[‘title’]; | |
| } | |
| $widget_html .= “<b>Nama Widget : </b> ” . $nama; | |
| echo $widget_html . $args[‘after_widget’]; | |
| // …. |
Save, kemudian check dibagian halaman pengunjung..
lho kok cuma “Nama Widget:” saja yang muncul ?
itu karena nilai dari $instance belum diset atau masih kosong…,
Lalu bagaimana kita bisa tau bernilai atau tidak ?
mudah saja gunakan fungsi var_dump() atau print_r(), contoh :
var_dump($instance);
dan tulislah di dalam method widget( $args, $instance ).
sebelum kita menampilkan isi $instance pada bagian widget, kita perlu membuatkan form terlebih dulu, sebagai media untuk mengisi nilai dari $instance.
| // … | |
| // nilai default bila $instance[‘title’] belum diset / kosong (empty) | |
| $title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : esc_html__( ‘New title’ ); | |
| ?> | |
| <p> | |
| <label for=“<?php echo esc_attr( $this->get_field_id( ‘title‘ ) ); ?>“><?php esc_attr_e( ‘Title:‘ ); ?></label> | |
| <input class=“widefat“ id=“<?php echo esc_attr( $this->get_field_id( ‘title‘ ) ); ?>“ | |
| name=“<?php echo esc_attr( $this->get_field_name( ‘title‘ ) ); ?>“ | |
| type=“text“ value=“<?php echo esc_attr( $title ); ?>“> | |
| </p> | |
| <?php | |
| // … |
dengan menambahkan kode di atas pada method form( $instance ) berarti kita telah menambahkan satu form untuk mengisi “Title” atau $instance['title']
$instanceadalah variable bertipe array, key arraynya sesuai dengan string$this->get_field_name('string')
Apa sudah selesai ?
Belum, form di atas hanyalah form tanpa ada perintah penyimpanan jadi walaupun kita Save pun tidak akan pernah menyimpan, oleh karenanya ada method update( $new_instance, $old_instance ) yang bertugas untuk menyimpan apa yang sudah kita inputkan kedalam form, yang kemudian akan ditampilkan di halaman pengunjung.
| // … | |
| $instance = array(); | |
| $instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”; | |
| return $instance; | |
| // … |
letakkan kode di atas di dalam method update().
Oke… sampai di sini kita sudah berhasil membuat Widget Wodpress yang sederhana dengan tangan kita sendiri,
Full Kodingnya akan kelihatan di akhir Tutorial ini, jika ada pertanyaan bisa kalian manfaatkan kolom komentar dibawah atau jika kalian ada ingin request tutorial juga boleh, langsung aja klik Request Tutorial ONPHPID
| <?php | |
| class My_Widget extends WP_Widget { | |
| /** | |
| * Sets up the widgets name etc | |
| */ | |
| public function __construct() { | |
| $widget_ops = array( | |
| ‘classname‘ => ‘my_widget‘, | |
| ‘description‘ => ‘My Widget is awesome‘, | |
| ); | |
| parent::__construct( ‘my_widget‘, ‘My Widget‘, $widget_ops ); | |
| } | |
| /** | |
| * Outputs the content of the widget | |
| * | |
| * @param array $args | |
| * @param array $instance | |
| */ | |
| public function widget( $args, $instance ) { | |
| $widget_html = $args[‘before_widget‘]; | |
| if ( ! empty( $instance[‘title‘] ) ) { | |
| $widget_html .= $args[‘before_title‘] . apply_filters( ‘widget_title‘, $instance[‘title‘] ) . $args[‘after_title‘]; | |
| } | |
| $widget_html .= “<b>Nama Widget : </b> “ . $instance[‘title‘]; | |
| echo $widget_html . $args[‘after_widget‘]; | |
| } | |
| /** | |
| * Outputs the options form on admin | |
| * | |
| * @param array $instance The widget options | |
| */ | |
| public function form( $instance ) { | |
| // nilai default bila $instance[‘title’] belum diset / kosong; | |
| $title = ! empty( $instance[‘title‘] ) ? $instance[‘title‘] : esc_html__( ‘New title‘ ); | |
| ?> | |
| <p> | |
| <label for=“<?php echo esc_attr( $this->get_field_id( ‘title‘ ) ); ?>“><?php esc_attr_e( ‘Title:‘ ); ?></label> | |
| <input class=“widefat“ id=“<?php echo esc_attr( $this->get_field_id( ‘title‘ ) ); ?>“ | |
| name=“<?php echo esc_attr( $this->get_field_name( ‘title‘ ) ); ?>“ | |
| type=“text“ value=“<?php echo esc_attr( $title ); ?>“> | |
| </p> | |
| <?php | |
| } | |
| /** | |
| * Processing widget options on save | |
| * | |
| * @param array $new_instance The new options | |
| * @param array $old_instance The previous options | |
| */ | |
| public function update( $new_instance, $old_instance ) { | |
| $instance = array(); | |
| $instance[‘title‘] = ( ! empty( $new_instance[‘title‘] ) ) ? strip_tags( $new_instance[‘title‘] ) : ‘‘; | |
| return $instance; | |
| } | |
| } | |
| add_action(‘widgets_init‘, function() { | |
| register_widget(‘My_Widget‘); | |
| }); |
Komentar Terbaru