การสร้าง Custom Widget โดยการเขียน Plug-in บน Wordpress

การสร้าง Widget ให้ Wordpress ทำได้สองวิธีตามความเหมาะสม

เช่น

1. การสร้างแบบ Custom Plugin สำหรับคนที่ต้องการสร้าง Widget ให้กับ Wordpress
ที่มีมากกว่า 1 theme หรือเก็บไว้ใช้ได้บน Wordpress เว็บอื่นๆต่อไป

2.สร้าง Widget ในไฟล์ functions.php ของ Theme แต่สามารถใช้งานได้เพียงเว็บเดียวไม่สามารถเก็บไปใช้กับ Wordpress เว็บอื่นๆในภายหลังได้ (ต้อง copy code แปะ)

ซึ่งบทความนี้จะสอนสร้าง Widget ในแบบข้อที่ 1

Wordpress Widgets วิธีนี้ใช้การสร้างด้วย การเขียนโปรแกรมแบบ OOP 
ซึ่งมี WP_Widget class ที่สามารถนำไปใช้สร้าง Custom Widgets ตัวอื่นๆ
WP_Widget class รวบรวม 20 methods ที่แตกต่างกัน
แต่มีเพียง 4 basic widget method  ที่เป็น Basic ที่ควรรู้กัน
  1. __construct() สำหรับ registers basic widget information
  2. widget() ประกอบด้วย output ของ widget ที่เรามองเห็นใน front end เมื่อ widget ถูกใช้งาน
  3. form()  ระบุ widget settings ที่แสดงผลใน wordpress admin area (WordPress dashboard)
  4. update() อัพเดท settings ของ widget เมื่อมีการใส่ new settings และเซฟใน admin area (WordPress dashboard)

Steps to Create Custom WordPress Widget

ไปที่ C:\xampp\htdocs\project_name\wp-content\plugins
แล้วสร้าง folder ขึ้นมาตัวอย่างผมตั้งชื่อ folder เป็น test_plugin 
แล้วสร้างไฟล์ขึ้นมาชื่อ test_plugin.php (ชื่อไฟล์ต้องเหมือนกับชื่อโฟลเดอร์)
ใส่ข้อมูลตามด้านล่าง

<?php
/*
Plugin Name: My Widget Plugin
Plugin URI: http://www.website.com/create-widget-plugin-wordpress/
Description: This plugin adds a custom widget.
Version: 1.0
Author: name
Author URI: http://www.website.com/create-widget-plugin-wordpress/
License: GPL2
*/

[coding]
?>


Step ต่อมาสร้าง Class และ Constructor ต่อท้ายโค้ดด้านบนพร้อมโค้ด Register Widget 

<?php 

/*
Plugin Name: My Widget Plugin
Plugin URI: http://www.website.com/create-widget-plugin-wordpress/
Description: This plugin adds a custom widget.
Version: 1.0
Author: name
Author URI: http://www.website.com/create-widget-plugin-wordpress/
License: GPL2
*/

class Example_Widget extends WP_Widget {

public function __construct() {
    $widget_options = array( 
      'classname' => 'example_widget',
      'description' => 'This is an Example Widget',
    );
    parent::__construct( 'example_widget', 'Example Widget', $widget_options );
  } 
}

  function register_example_widget() { 
    register_widget( 'Example_Widget' );
  }
  add_action( 'widgets_init', 'register_example_widget' );
?>





Full Code

<?php

/*
Plugin Name: My Widget Plugin
Plugin URI: http://www.website.com/create-widget-plugin-wordpress/
Description: This plugin adds a custom widget.
Version: 1.0
Author: name
Author URI: http://www.website.com/create-widget-plugin-wordpress/
License: GPL2
*/

class jpen_Example_Widget extends WP_Widget {

public function __construct() {
    $widget_options = array(
      'classname' => 'example_widget',
      'description' => 'This is an Example Widget',
    );
    parent::__construct( 'example_widget', 'Example Widget', $widget_options );
  }

   // admin console
 public function form( $instance ) {
  $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?>
  <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
    <input type="text"
   id="<?php echo $this->get_field_id( 'title' ); ?>"
   name="<?php echo $this->get_field_name( 'title' ); ?>"
   value="<?php echo esc_attr( $title ); ?>" />
  </p><?php
}
// on ui page
 public function widget( $args, $instance ) {
  $title = apply_filters( 'widget_title', $instance[ 'title' ] );
  echo $title;
  }

}

  function jpen_register_example_widget() {
    register_widget( 'jpen_Example_Widget' );
  }
  add_action( 'widgets_init', 'jpen_register_example_widget' );
?>


Ref :