Hướng dẫn tạo custom widget WordPress từng bước

5 tháng ago, Hướng dẫn WordPress, Views

Giới thiệu về Custom Widget WordPress

WordPress widgets là những thành phần nhỏ, độc lập mà bạn có thể thêm vào các khu vực được widget hóa trên trang web của bạn, thường là thanh bên (sidebar), chân trang (footer) hoặc các khu vực khác mà theme hỗ trợ. Widgets cho phép bạn dễ dàng thêm nội dung và chức năng vào trang web mà không cần phải viết code phức tạp. Tuy nhiên, đôi khi những widget mặc định không đáp ứng được nhu cầu cụ thể của bạn. Đó là lúc custom widget ra đời.

Bài viết này sẽ hướng dẫn bạn từng bước cách tạo một custom widget WordPress, giúp bạn tùy chỉnh trang web của mình một cách linh hoạt và mạnh mẽ.

Các bước chuẩn bị trước khi bắt đầu

Trước khi bắt đầu viết code cho custom widget, bạn cần chuẩn bị một số thứ:

Môi trường phát triển WordPress: Đảm bảo bạn có một môi trường WordPress hoạt động, có thể là trên máy tính cá nhân (sử dụng XAMPP, MAMP, hoặc Local by Flywheel) hoặc trên một hosting thử nghiệm.
Theme WordPress đang hoạt động: Chọn một theme WordPress mà bạn muốn thêm widget vào. Bạn nên sử dụng một theme con (child theme) để tránh mất các tùy chỉnh khi theme gốc được cập nhật.
Trình soạn thảo code: Sử dụng một trình soạn thảo code yêu thích (ví dụ: VS Code, Sublime Text, Atom) để viết code.

Tạo Plugin cho Custom Widget

Để custom widget hoạt động, chúng ta sẽ tạo một plugin. Plugin là cách tốt nhất để thêm chức năng tùy chỉnh vào WordPress mà không ảnh hưởng đến theme gốc. Thực hiện theo các bước sau:

Tạo thư mục plugin: Trong thư mục wp-content/plugins/ của WordPress, tạo một thư mục mới cho plugin của bạn. Ví dụ: my-custom-widget.
Tạo file plugin chính: Trong thư mục plugin, tạo một file PHP với tên tương tự thư mục. Ví dụ: my-custom-widget.php.
Thêm thông tin plugin: Mở file my-custom-widget.php và thêm thông tin plugin vào đầu file. Thông tin này giúp WordPress nhận diện plugin của bạn.

<?php
/**
 * Plugin Name: My Custom Widget
 * Plugin URI: https://example.com/my-custom-widget
 * Description: A simple custom widget for WordPress.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com
 */

// Plugin code will go here

Viết Code cho Custom Widget

Bây giờ chúng ta sẽ viết code để định nghĩa widget. WordPress cung cấp một class cơ sở là WP_Widget mà chúng ta sẽ kế thừa để tạo custom widget.

Tạo class Widget: Tạo một class kế thừa từ WP_Widget.
Khởi tạo Widget: Trong constructor của class, gọi constructor của class cha (WP_Widget) và định nghĩa thông tin cơ bản của widget (ID, tên, mô tả).
Hàm form(): Hàm này định nghĩa form trong trang quản trị widget. Tại đây, bạn có thể thêm các trường để người dùng nhập dữ liệu cho widget.
Hàm update(): Hàm này xử lý dữ liệu được gửi từ form và lưu trữ vào database.
Hàm widget(): Hàm này hiển thị widget trên trang web.

<?php

/**
 * Adds My_Custom_Widget widget.
 */
class My_Custom_Widget extends WP_Widget {

  /**
   * Register widget with WordPress.
   */
  function __construct() {
    parent::__construct(
      'my_custom_widget', // Base ID
      __( 'My Custom Widget', 'text_domain' ), // Name
      array( 'description' => __( 'A simple custom widget', 'text_domain' ), ) // Args
    );
  }

  /**
   * Front-end display of widget.
   *
   * @see WP_Widget::widget()
   *
   * @param array $args     Widget arguments.
   * @param array $instance Saved values from database.
   */
  public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );
    $message = $instance['message'];

    echo $args['before_widget'];
    if ( ! empty( $title ) ) {
      echo $args['before_title'] . $title . $args['after_title'];
    }
    echo '<p>'. $message . '</p>';
    echo $args['after_widget'];
  }

  /**
   * Back-end widget form.
   *
   * @see WP_Widget::form()
   *
   * @param array $instance Previously saved values from database.
   */
  public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
    $message = ! empty( $instance['message'] ) ? $instance['message'] : '';
    ?>
    <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>
    <p>
      <label for="<?php echo $this->get_field_id( 'message' ); ?>"><?php _e( 'Message:' ); ?></label>
      <textarea class="widefat" id="<?php echo $this->get_field_id( 'message' ); ?>" name="<?php echo $this->get_field_name( 'message' ); ?>"><?php echo esc_textarea( $message ); ?></textarea>
    </p>
    <?php
  }

  /**
   * Sanitize widget form values as they are saved.
   *
   * @see WP_Widget::update()
   *
   * @param array $new_instance Values just sent to be saved.
   * @param array $old_instance Previously saved values from database.
   *
   * @return array Updated safe values to be saved.
   */
  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['message'] = ( ! empty( $new_instance['message'] ) ) ? sanitize_textarea_field( $new_instance['message'] ) : '';
    return $instance;
  }

} // class My_Custom_Widget

Đăng ký Widget

Sau khi đã tạo class widget, bạn cần đăng ký widget để WordPress biết về nó. Thêm đoạn code sau vào file plugin của bạn:

<?php
// Register widget
function register_my_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

Kích hoạt Plugin và Sử dụng Widget

Kích hoạt plugin: Truy cập trang quản trị WordPress của bạn, vào mục “Plugins” và kích hoạt plugin “My Custom Widget”.
Sử dụng widget: Truy cập “Appearance” -> “Widgets”. Bạn sẽ thấy widget “My Custom Widget” trong danh sách. Kéo và thả widget vào khu vực widget hóa mà bạn muốn (ví dụ: sidebar).
Cấu hình widget: Điền thông tin vào các trường trong form widget (ví dụ: tiêu đề, tin nhắn) và lưu lại.
Kiểm tra trang web: Xem trang web của bạn để thấy widget hiển thị.

Tùy chỉnh Widget

Bạn có thể tùy chỉnh widget của mình bằng nhiều cách:

Thêm CSS: Sử dụng CSS để tạo kiểu cho widget. Bạn có thể thêm CSS vào file style.css của theme con hoặc sử dụng tùy chọn “Custom CSS” trong WordPress Customizer.
Sử dụng template: Tạo một file template riêng cho widget để tách biệt code hiển thị khỏi logic.
Thêm trường tùy chỉnh: Thêm các trường khác nhau vào form widget để người dùng có thể tùy chỉnh nhiều hơn. Ví dụ: màu sắc, kích thước, hình ảnh.

Ví dụ về Widget Nâng Cao

Dưới đây là một số ý tưởng cho widget nâng cao:

Widget hiển thị bài viết gần đây: Hiển thị danh sách các bài viết gần đây với hình ảnh thumbnail và tiêu đề.
Widget hiển thị thông tin thời tiết: Lấy dữ liệu thời tiết từ một API và hiển thị trên trang web.
Widget hiển thị form liên hệ: Tạo một form liên hệ đơn giản để người dùng có thể gửi tin nhắn trực tiếp từ trang web.

Kết luận

Tạo custom widget WordPress không khó như bạn nghĩ. Bằng cách làm theo các bước trong hướng dẫn này, bạn có thể tạo ra những widget độc đáo và mạnh mẽ để tùy chỉnh trang web của mình theo ý muốn. Hãy nhớ rằng, việc học hỏi và thử nghiệm là chìa khóa để thành công. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa