Belajar Membuat Plugins Wordpress

Belajar Membuat Plugins Wordpress

Table of contents



Belajar Membuat Plugins Wordpress -  Setelah anda mengenal apa itu fungsi plugins pada CMS Wordpress dan bagaimana pentingnya sebuah plugins pada website berbasis wordpress yang akan anda bangun, pada artikel kali ini mari belajar membuat plugins sederhana pada wordpress. Untuk membuat plugins wordpress, anda harus mengerti dan paham bahasa pemograman PHP. Apa itu Bahasa pemograman PHP? PHP Adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam internet, yang mana memungkinkan Anda untuk melakukan banyak hal dan lebih mudah daripada HTML.

 

Langsung saja, pertama-tama tentu yang harus anda punya adalah Wordpress yang sudah terinstall pada hosting/server ataupun lokal server anda.



 

Membuat Dasar Wordpress Plugins

 

1. Buatlah sebuah folder baru pada direktori wp-content >> plugins. Sebagai contoh saya membuat sebuah folder yang saya berinama "subainfo" 

2. Buat sebuah file PHP, saya berinama "subainfo.php" dan tulis sebaris kode PHP berikut:

<?php
/*
Plugin Name: Suba Info
*/

 

3.  Untuk melihat perubahannya, silakan login ke dashboard WordPress Anda, kemudian akses menu Plugins >> Installed Plugins dan Anda akan melihat plugin yang Anda buat. 

 

4.  OK, sudah terlihat nama pluginnya, Edit kembali subainfo.php tadi selanjutnya Anda perlu menambahkan deskripsi, nama Anda, link ke website Anda, versi plugin, dan lain-lain. Note: silahkan anda sesuaikan kode PHP dibawah dengan kebutuhan anda.

<?php
/*
Plugin Name: Suba Info
Plugin URI: https://www.adityasubawa.com/belajar-membuat-plugins-wordpress
Description: Plugin yang akan menampilkan tanggal, ip address dan lainnya
Author: Aditya Subawa
Version: 1.0
Author URI: https://www.adityasubawa.com
*/

 

5. Refresh halaman plugin. Anda akan melihat deskripsi serta info lainnya seperti gambar di bawah ini. 

Membuat Class dan Fungsi

 

Diatas, anda sudah belajar untuk membuat dasar dari plugin, silahkan anda Activate. Tetapi plugin tersebut belum berfungsi karena anda harus membuat fungsi akan menampilkan output seperti apakah plugin ini nantinya.

 

Agar widget dapat berfungsi, berikut ini adalah 4 function untuk persyaratan minimal yang harus Anda penuhi.

  • _construct(): function constructor
  • widget(): output dari widget
  • form(): menentukan pengaturan widget pada dashboard
  • update(): update pengaturan widget

 

1. Tambahkan class seperti terlihat dalam kode dibawah ini:

class subainfo_widget extends WP_Widget {
}

 

2. Didalam class tersebut, buat sebuah fungsi method constructor, yang akan digunakan untuk menentukan ID, nama dari widget, serta deskripsi widget.

function __construct() {
    parent::__construct(
        'subainfo_widget',
        __('Suba Info', ' subainfo_widget_domain'),
        array( 'description' => __( 'Widget menampilkan tanggal, ip address dan lainnya', 'subainfo_widget_domain' ), )
        );
    }

 

Klik Appereance >> Widget, pastikan widget anda sudah terlihat pada available widgets

 

3. Selanjutnya adalah mengatur tampilan widget melalui function widget().

public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];
        echo __( 'IP Address: '.$_SERVER['REMOTE_ADDR'].'<br/>', 'subainfo_widget_domain' );
        echo __('Tanggal: '.date('l jS \of F Y').'', 'subainfo_widget_domain');
        echo $args['after_widget'];
    }

Sedikit penjelasan pada kode diatas, lihatlah baris kode berikut:

echo __( 'IP Address: '.$_SERVER['REMOTE_ADDR'].'<br/>', 'subainfo_widget_domain' );
echo __('Tanggal: '.date('l jS \of F Y').'', 'subainfo_widget_domain');

Dimana kode $_SERVER['REMOTE_ADDR'] adalah sebuah fungsi dasar PHP untuk menampilkan IP address pengunjung dan terlihat juga pemakaian fungsi date() untuk menampilkan tanggal sekarang.

 

4. Selanjutnya adalah mengatur back-end dari widget dengan menggunakan method form():

 public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) )
        $title = $instance[ 'title' ];
        else
        $title = __( 'Default Title', 'subainfo_widget_domain' );
        ?>
        <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
    }

 

5. Berikutnya adalah memasang function update untuk memperbarui widget setiap ada perubahan pada pengaturan.

public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }

 

6. Selanjutnya adalah menggunakan fungsi tambahan untuk mendaftarkan widget pada WordPress. Letakkan kode di bawah ini pada bagian luar dari class subainfo_widget atau pada bagian atasnya.

function subainfo_register_widget() {
        register_widget( 'subainfo_widget' );
}
add_action( 'widgets_init', 'subainfo_register_widget' );

 

Drag widget Suba Info ke dalam sidebar, lakukan perubahan Judul widget dan klik Save. 

 

Lihat frontend wordpress anda. 

 

7. Kode lengkapnya adalah sebagai berikut

<?php
/*
Plugin Name: Suba Info
Plugin URI: https://www.adityasubawa.com/belajar-membuat-plugins-wordpress
Description: Plugin yang akan menampilkan tanggal, ip address dan lainnya
Author: Aditya Subawa
Version: 1.0
Author URI: https://www.adityasubawa.com
*/
function subainfo_register_widget() {
        register_widget( 'subainfo_widget' );
}
add_action( 'widgets_init', 'subainfo_register_widget' );

class subainfo_widget extends WP_Widget {
    function __construct() {
    parent::__construct(
        'subainfo_widget',
        __('Suba Info', ' subainfo_widget_domain'),
        array( 'description' => __( 'Widget menampilkan tanggal, ip address dan lainnya', 'subainfo_widget_domain' ), )
        );
    }
    
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];
        echo __( 'IP Address: '.$_SERVER['REMOTE_ADDR'].'<br/>', 'subainfo_widget_domain' );
        echo __('Tanggal: '.date('l jS \of F Y').'', 'subainfo_widget_domain');
        echo $args['after_widget'];
    }
    
    public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) )
        $title = $instance[ 'title' ];
        else
        $title = __( 'Default Title', 'subainfo_widget_domain' );
        ?>
        <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
    }
    
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
    
}

Kesimpulan

Anda dapat memodifikasi plugin dan membuat plugin wordpress yang lebih sulit. Membuat plugin wordpress adalah perkerjaan yang tidak mudah perlu penguasaan bahasa pemograman PHP dan mengerti struktur dari CMS wordpress itu sendiri.



Artikel Terkait