imkopkap

การสร้าง Widget ของ WordPress แบบ Basic

ใช้เวลา 32 นาที 18/08/2014

ในคลิปนี้จะเป็นการสอนสร้าง Widget โดยเราจะใช้ Plugin ในการสร้างซึ่งมันจะง่ายต่อการแก้ไข ( ปกติสร้างใน functions.php ได้ ) สำหรับตัวอย่างที่ทำให้ดูจะเป็นการสร้างในไฟล์ plugin นะครับ การทำ Widget เราจะใช้ function 3 ส่วนหลักๆคือ widget , update และ form

 

  • function widget()
  • function update()
  • function form()

การสร้าง Widget อันดับแรกเราต้องกำหนด main function ใหญ่ๆ ให้กับมันก่อนซึ่งจะมีการใช้ดังนี้ 1. สร้างไฟล์ชื่ออะไรก็ได้เก็บไว้ในโฟลเดอร์ plugin  ให้เรียบร้อย

/**
 * Plugin Name: Kopkap
 * Plugin URI: http://kopkap.in.th
 * Description: Plugin for plan
 * Version: The Plugin's Version Number, e.g.: 1.0
 * Author: K'opkap
 * Author URI: http://kopkap.in.th
 */

2. สร้าง class เช่น class kopkap extends WP_Widget() {}

class ชื่อ class  extends WP_Widget () {
    // code here ...
}

3. กำหนดมันให้อยู่ใน widget ซึ่งจะใช้ โค้ดนี้

function register_my_widget() {
     register_widget( ' ชื่อ class ' );
}
add_action( 'widgets_init', 'register_my_widget' );

ข้างในคลาสของเราก็จะมี อีก 3 ตัวใหญ่ๆ นั่นคือ function ของ  widget , update และ form และมีอีกตัวเพิ่มขึ้นมานั่นคือ การตั้งชื่อให้กับ Widget นั่นเองครับ จะได้แบบนี้ครับ

class kopkap extends WP_Widget {

  function __construct() {
    parent::__construct(
// ชื่อดาตาเบส กำหนดเอง
      'kopkap', 

// ชื่อของ widget
      __('TestText', 'kopkap_domain'), 
// ข้อความย่อ
      array( 'description' => __( 'My Test Widget', 'kopkap_domain' ), ) 
      );
  }

// input
  public function form( $instance ) {
    
  }

// output
  public function widget( $args, $instance ) {
  }

// update
public function update( $new_instance, $old_instance ) {
    
  }
}

อธิบายส่วนการทำงาน

1. function form คือ ฟังค์ชันที่มีการรับค่า input เข้ามานั่นเองครับ ซึ่งเราจะสามารถสร้างยังไงก็ได้โดยเราจะใช้ tag ของ html เข้ามาช่วยในการสร้างให่กับ form ของเรา อีกทั้งเรายังสามารถเขียนโค้ดให้มันวนลูปบทความอะไรแบบนี้ได้ สร้าง widget wordpress   ตัวอย่างเช่น

public function form( $instance ){
  ?>
  <p>
    <label for="<?php echo $this->get_field_id( 'functions' ); ?>"><?php _e('Enter your Text' , 'example');?></label>
    <input id="<?php echo $this->get_field_id( 'functions' ); ?>" name="<?php echo $this->get_field_name( 'functions' ); ?>" value="<?php echo $instance['functions']; ?>" style="width:100%;" />
  </p>

  <?php
}

จากโค้ดจะเห็นได้ว่า มี <?php echo $this->get_field_id( ‘functions’ ); ?> คำว่า functions ตรงนี้เราสามารถเปลี่ยนเป็นคำอื่นได้ ซึ่งที่เราต้องใส่โค้ดแบบนี้ก็เพราะว่า เราจำเป็นต้องส่งค่าที่ชื่อว่า functions นั้นออกไปทำงานใน funtion ของ form และ update นั่นเอง get_field_name ก็เช่นกันครับ พยายามกำหนดชื่อให้เหมือนกัน เพราะจะได้ง่ายต่อการรับส่งค่านั่นเอง

 

2. function widget คือ ฟังค์ชันที่เราจะแสดงผลออกทางหน้าเว็บของเรา เราสามารถเขียน html css ได้ครับ เมื่อเราใช้ widget ของตัวนี้… เรากดใช้งานปุ๊ป แล้วเรากลับไปดูหน้าเว็บของเรา มันก็จะเป็นไปตาม html css ที่เราเขียนไว้ครับ เช่นแบบนี้ สร้าง widget wordpress ตัวอย่างเช่น

public function widget( $args , $instance) {
  $functions = $instance['functions'];
    echo $before_widget;
    ?>
      <div style="background-color:#999; color:#fff; padding:10px;">
        <h3>Hello : <?php echo $functions; ?></h3>
      </div>
    <?php
    echo $after_widget;
  }

บรรทัดที่ 2 คือ รับค่าที่มีชื่อว่า functions ( ตัวที่เรากำหนดไว้ใน form ) มาเก็บไว้ในตัวแปร functions เพื่อง่ายต่องานใช้งาน ก่อนแสดงผล widget เราจำเป็นต้องมีการเปิดปิด tag ของ widget ครับ  คือโค้ดจากบรรทัดที่ 3 และ 10 นั่นเอง

 

3. function Update คือ ฟังค์ชันที่ค่อยตรวจสอบว่า เมื่อ Admin ทำการเปลี่ยนข้อมูลโดยทำการตั้งค่าข้อมูลใหม่ หรือเปลี่ยนข้อมูล แล้วกดบันทึกปุ๊ป! ให้ function update รีบวิ่งไปหา function form และ widget เพื่อให้มันแสดงผลนะ อะไรประมาณนี้ครับ ตัวอย่างเช่น

public function update( $new_instance , $old_instance ){
  $instance = $old_instance;
  $instance['functions']  = strip_tags( $new_instance['functions'] );
  return $instance;
  }

เรากำหนดไว้ว่าให้ instance เก็บค่าเก่าของ instance จากนั้นเรียกค่าใหม่ของ instance[‘function’] มาเก็บไว้ในค่าใหม่ โดยใช้โค้ดดังตัวอย่าง และเก็บไว้ที่ตัวแปร instance จากนั้นส่งค่าขึ้นไป   รายละเอียดเนื้อหาที่ลึกกว่านี้ให้ดูได้ในคลิปเลยนะครับผม

 

ติดต่อผมได้ทาง แฟนเพจ เลยนะครับ ขอบคุณมากครับ

บันทึกแนะนำ