Cara Membuat Kustom Widget WordPress

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
August 29, 2017

Apakah Anda ingin membuat widget kustom Anda sendiri di WordPress? Widget memungkinkan Anda untuk menarik dan melepas elemen ke area sidebar atau widget manapun di situs Anda. Pada artikel ini, kami akan menunjukkan cara membuat widget WordPress dengan mudah


Apa itu WordPress Widget?
Widget WordPress berisi potongan kode yang bisa Anda tambahkan ke sidebar atau area siap widget di situs Anda. Anggap mereka sebagai modul yang bisa Anda gunakan untuk menambahkan elemen yang berbeda dengan menggunakan antarmuka drag and drop sederhana.

Secara default, WordPress hadir dengan seperangkat widget standar yang dapat Anda gunakan dengan tema WordPress. Lihat panduan pemula kami tentang cara menambahkan dan menggunakan widget di WordPress.


WordPress juga memungkinkan pengembang untuk membuat widget kustom mereka sendiri. Banyak tema dan plugin WordPress hadir dengan widget kustom mereka sendiri yang dapat Anda tambahkan ke sidebars And.
Misalnya, Anda dapat menambahkan formulir kontak, formulir login khusus, atau galeri foto ke sidebar tanpa menulis kode apa pun. Karena itu, mari kita lihat cara mudah membuat widget kustom Anda sendiri di WordPress.

Membuat Custom Widget di WordPress
Sebelum kita memulai, akan lebih baik jika Anda membuat plugin khusus situs tempat Anda akan menempelkan kode widget dari tutorial ini. Anda juga bisa menempelkan kode di file functions.php tema Anda. Namun, itu hanya akan tersedia bila tema tertentu aktif.


Dalam tutorial ini, kita akan membuat widget sederhana yang hanya menyapa pengunjung. Lihatlah kode ini dan tempelkan di plugin khusus situs Anda untuk melihatnya beraksi

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your widget
'wpb_widget',

// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'),

// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )
);
}

// Creating widget front-end

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );

// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
        
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<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
}
    
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

Setelah menambahkan kode yang Anda butuhkan untuk menuju ke Appearance »Widgets page. Anda akan melihat Widget WPBeginner baru dalam daftar widget yang tersedia. Anda perlu drag dan drop widget ini ke sidebar.


Sekarang Anda bisa mengunjungi situs Anda untuk melihatnya beraksi.


Sekarang mari pelajari kode itu lagi.

Pertama kita mendaftarkan 'wpb_widget' dan memuat widget custom kita. Setelah itu kita definisikan apa widget itu, dan bagaimana cara menampilkan widget back-end.

Terakhir, kami mendefinisikan bagaimana menangani perubahan yang dilakukan pada widget.
Sekarang ada beberapa hal yang mungkin ingin Anda tanyakan. Misalnya, apa tujuan wpb_text_domain?

WordPress menggunakan gettext untuk menangani terjemahan dan lokalisasi. Wpb_text_domain dan __e ini memberitahukan gettext untuk membuat sebuah string tersedia untuk diterjemahkan. Lihat bagaimana Anda bisa menemukan tema WordPress yang siap terjemahan.

Jika Anda membuat widget khusus untuk tema Anda, Anda dapat mengganti wpb_text_domain dengan domain teks tema Anda. Kami berharap artikel ini membantu Anda belajar bagaimana membuat widget WordPress dengan mudah. Anda mungkin juga ingin melihat daftar widget WordPress yang paling berguna untuk situs Anda



Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER