WordPress: เพิ่ม widget ให้กับธีมของเวิร์ดเพรส

มีงานด้านเว็บให้ทำ 2 งาน เลยเลือกใช้ WordPress เพราะมันใช้ง่ายกว่า Drupal ในสายตาคนทั่วไป (รวมทั้งพัฒนาง่ายดีด้วยสำหรับผม) แต่ยังไงก็ยังชอบ Drupal มากกว่าอยู่นะ ก็แค่เลือกใช้ CMS ให้เหมาะกับคน และกับงานเท่านั้นเองครับ

และบังเอิญจำเป็นต้องสร้าง widget ขึ้นมาเพื่อใช้งาน เลยเอาวิธีสร้าง widget มาเขียนถึงสักหน่อยครับ

การสร้าง widget ใน WordPress ทำได้โดยการ สืบต่อคลาส WP_Widget ในไฟล์ functions.php ออกมา โดยมีโครงสร้างที่จำเป็นดังนี้

โครงสร้าง

  1. class ThemeName_WidgetClassName extends WP_Widget {
  2.  
  3. // Constructor
  4. function ThemeName_WidgetClassName() {
  5. $widget_ops = array(
  6. 'classname' => 'widget-css-class-name',
  7. 'description' => 'widget description',
  8. );
  9. $this->WP_Widget( false, 'Widget Name', $widget_ops );
  10. }
  11.  
  12. // Create form in widget config page
  13. function form( $instance ) {
  14. }
  15.  
  16. // Update saved config
  17. function update( $new_instance, $old_instance ) {
  18. return $new_instance;
  19. }
  20.  
  21. // Display widget on web page
  22. function widget( $args, $instance ) {
  23. }
  24. }
  25. register_widget( 'ThemeName_WidgetClassName' );

Keyword

จะมีคีย์เวิร์ดดังนี้

  • ThemeName_WidgetClassName อันนี้เป็นชื่อคลาส ส่วนมากจะใช้ชื่อธีม ตามด้วย _ แล้วก็ชื่อคลาสจริง ๆ เพื่อป้องกันคลาสซ้ำกัน
  • widget-css-class-name อันนี้เป็นชื่อคลาสใน CSS (คนละคลาสใน PHP นะ) WordPress จะดึงข้อมูลนี้ไปใส่ตอนที่สร้าง widget (ตรง %2$s ใน before_widget ของฟังชั่น register_sidebar() นั่นแหละ)
  • widget description อันนี้เป็นคำอธิบายรายละเอียดของ widget ในหน้า Admin » Widget
  • Widget Name อันนี้เป็นชื่อ widget ที่แสดงในหน้า Admin » Widget เช่นกัน

Method

ส่วนเมธอดของคลาสที่จำเป็นต้องใช้จะมี

ThemeName_WidgetClassName()

เป็น constructor ของคลาส โดยทั่วไปจะสร้าง array เก็บการตั้งค่าของ widget ที่จำเป็น (เช่น classname และ description) เอาไว้ แล้วส่ง array นี้ให้กับ WP_Widget ผ่าน $this->WP_Widget() ซึ่งเป็น constructor ของ WP_Widget

  1. function ThemeName_WidgetClassName() {
  2. $widget_ops = array(
  3. 'classname' => 'widget-css-class-name',
  4. 'description' => 'widget description',
  5. );
  6. $this->WP_Widget( false, 'Widget Name', $widget_ops );
  7. }

form()

เอาไว้สร้างฟอร์มสำหรับตั้งค่า widget ในหน้า Admin » Widget ซึ่งจะใส่ <input> อะไรเข้าไป (ยกเว้น button ต่าง ๆ) ก็ทำได้ตามสะดวก

  • $instance จะเป็น array เก็บการตั้งค่าของ widget เอาไว้
  • $this->get_field_id() ดึงค่า input id ออกมาแสดง
  • $this->get_field_name() ดึงค่า input name ออกมาแสดง
  1. function form( $instance ) {
  2. $title = '';
  3. $text = '';
  4.  
  5. // Check and get saved value
  6. if ( isset( $instance['title'] ) )
  7. $title = esc_attr( $instance['title'] );
  8. if ( isset( $instance['text'] ) )
  9. $text= esc_attr( $instance['text'] );
  10.  
  11. // Build and display configuration input box
  12. ?>
  13. <p>
  14. <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
  15. <input
  16. class="widefat"
  17. id="<?php echo $this->get_field_id( 'title' ); ?>"
  18. name="<?php echo $this->get_field_name( 'title' ); ?>"
  19. type="text" value="<?php echo $title; ?>"
  20. />
  21. </p>
  22. <p>
  23. <label for="<?php echo $this->get_field_id( 'text' ); ?>">Text:</label>
  24. <input
  25. class="widefat"
  26. id="<?php echo $this->get_field_id( 'text' ); ?>"
  27. name="<?php echo $this->get_field_name( 'text' ); ?>"
  28. type="text"
  29. value="<?php echo $text; ?>"
  30. />
  31. </p>
  32. <?php
  33. }

update()

เป็นเก็บข้อมูลการตั้งค่าเข้าฐานข้อมูล สามารถตรวจสอบความถูกต้องของค่าได้ที่ตรงนี้ หากคิดว่าไม่น่าจะมีปัญหาอะไร (อย่าไว้ใจผู้ใช้!!!WordPress คงตรวจสอบค่าก่อนเก็บเข้าฐานข้อมูลอยู่แล้ว?) ใช้แค่นี้ก็ได้

  1. function update( $new_instance, $old_instance ) {
  2. return $new_instance;
  3. }

widget()

แสดง widget ออกหน้าเว็บ ซึ่งขึ้นอยู่กับว่าจะแสดงอะไรออกมายังไง จากด้านบนผมสร้างฟอร์มโดยรับค่ามา 2 ค่าคื title และ text โดย title จะเป็น หัวของ widget ส่วน text จะเป็นเนื้อหาของ widget ที่แสดงภายใน <div> แค่นั้น ก็จะมีรูปแบบดังนี้

  • $args จะเก็บค่าการตั้งค่า sidebar (ดูจากฟังชั่น register_sidebar())
  • $instance จะเก็บค่าการตั้งค่าของ widget จากหน้า Admin » Widget เอาไว้
  1. function widget( $args, $instance ) {
  2. $title = '';
  3. $text = '';
  4.  
  5. // Check saved config
  6. if ( isset( $instance['title'] ) )
  7. $title = esc_attr( $instance['title'] );
  8. if ( isset( $instance['text'] ) )
  9. $text = esc_attr( $instance['text'] );
  10.  
  11. echo $args['before_widget'];
  12.  
  13. // If have title, display it
  14. if ( ! empty( $title ) ) {
  15. echo $args['before_title'];
  16. echo $title;
  17. echo $args['after_title'];
  18. }
  19.  
  20. // If have text, display it
  21. if ( ! empty( $text ) ) {
  22. echo '<div class="custom-widget-text">';
  23. echo $text;
  24. echo '</div>';
  25. }
  26.  
  27. echo $args['after_widget'];
  28. }

เมื่อสร้าง widget เรียบร้อยแล้วก็ลงทะเบียนให้ WordPress รู้จักผ่านฟังชั่น

  1. register_widget( 'ThemeName_WidgetClassName' );

เท่านี้ก็เรียบร้อย

อันนี้เป็นคลาสเต็ม ๆ ที่สร้างเมื่อกี้

  1. <?php
  2.  
  3. class ThemeName_WidgetClassName extends WP_Widget {
  4.  
  5. // Constructor
  6. function ThemeName_WidgetClassName() {
  7. $widget_ops = array(
  8. 'classname' => 'widget-css-class-name',
  9. 'description' => 'widget description',
  10. );
  11. $this->WP_Widget( false, 'Widget Name', $widget_ops );
  12. }
  13.  
  14. // Create form in widget config page
  15. function form( $instance ) {
  16. $title = '';
  17. $text = '';
  18.  
  19. // Check and get saved value
  20. if ( isset( $instance['title'] ) )
  21. $title = esc_attr( $instance['title'] );
  22. if ( isset( $instance['text'] ) )
  23. $text= esc_attr( $instance['text'] );
  24.  
  25. // Build and display configuration input box
  26. ?>
  27. <p>
  28. <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
  29. <input
  30. class="widefat"
  31. id="<?php echo $this->get_field_id( 'title' ); ?>"
  32. name="<?php echo $this->get_field_name( 'title' ); ?>"
  33. type="text" value="<?php echo $title; ?>"
  34. />
  35. </p>
  36. <p>
  37. <label for="<?php echo $this->get_field_id( 'text' ); ?>">Text:</label>
  38. <input
  39. class="widefat"
  40. id="<?php echo $this->get_field_id( 'text' ); ?>"
  41. name="<?php echo $this->get_field_name( 'text' ); ?>"
  42. type="text"
  43. value="<?php echo $text; ?>"
  44. />
  45. </p>
  46. <?php
  47. }
  48.  
  49. // Update saved config
  50. function update( $new_instance, $old_instance ) {
  51. return $new_instance;
  52. }
  53.  
  54. // Display widget on web page
  55. function widget( $args, $instance ) {
  56. $title = '';
  57. $text = '';
  58.  
  59. // Check saved config
  60. if ( isset( $instance['title'] ) )
  61. $title = esc_attr( $instance['title'] );
  62. if ( isset( $instance['text'] ) )
  63. $text = esc_attr( $instance['text'] );
  64.  
  65. echo $args['before_widget'];
  66.  
  67. // If have title, display it
  68. if ( ! empty( $title ) ) {
  69. echo $args['before_title'];
  70. echo $title;
  71. echo $args['after_title'];
  72. }
  73.  
  74. // If have text, display it
  75. if ( ! empty( $text ) ) {
  76. echo '<div class="custom-widget-text">';
  77. echo $text;
  78. echo '</div>';
  79. }
  80.  
  81. echo $args['after_widget'];
  82. }
  83. }
  84. register_widget( 'ThemeName_WidgetClassName' );

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.