Hướng dẫn tạo plugin WordPress cho người mới

5 giờ ago, Hướng dẫn WordPress, 1 Views
Hướng dẫn tạo plugin WordPress cho người mới

Giới thiệu về Plugin WordPress

WordPress không chỉ là một nền tảng blog đơn giản, nó còn là một hệ thống quản lý nội dung (CMS) mạnh mẽ. Sức mạnh này đến từ khả năng mở rộng thông qua các plugin. Plugin là những đoạn mã nhỏ được thêm vào WordPress để mở rộng chức năng, từ việc thêm một biểu mẫu liên hệ đơn giản đến việc biến WordPress thành một cửa hàng trực tuyến phức tạp. Bài viết này sẽ hướng dẫn bạn cách tạo một plugin WordPress cơ bản, phù hợp cho người mới bắt đầu.

Chuẩn bị trước khi bắt đầu

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

  • Một bản cài đặt WordPress: Bạn có thể cài đặt trên máy tính cá nhân (sử dụng XAMPP, WAMP, MAMP) hoặc trên một hosting thực tế.
  • Một trình soạn thảo văn bản: Sử dụng một trình soạn thảo code như Visual Studio Code, Sublime Text, Atom.
  • Kiến thức cơ bản về PHP, HTML, CSS: Plugin WordPress chủ yếu được viết bằng PHP, và kiến thức về HTML, CSS sẽ giúp bạn tùy chỉnh giao diện.

Tạo Cấu trúc Plugin

Mỗi plugin WordPress nên có một cấu trúc thư mục rõ ràng để đảm bảo tính dễ quản lý. Thông thường, bạn nên đặt plugin của mình trong thư mục wp-content/plugins.

  1. Tạo thư mục plugin: Tạo một thư mục mới trong wp-content/plugins với tên plugin của bạn. Ví dụ: my-first-plugin.
  2. Tạo file plugin chính: Tạo một file PHP trong thư mục plugin, với tên tương tự tên thư mục. Ví dụ: my-first-plugin.php.

Viết Mã Plugin cơ bản

File plugin chính là nơi bạn đặt tất cả mã nguồn của plugin. Hãy bắt đầu với một plugin đơn giản hiển thị một thông báo trên trang quản trị.

<?php
/**
 * Plugin Name: My First Plugin
 * Description: A simple WordPress plugin.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p><?php _e( 'Hello! This is my first WordPress plugin.', 'my-first-plugin' ); ?></p>
    </div>
    <?php
}

add_action( 'admin_notices', 'my_first_plugin_admin_notice' );

Giải thích đoạn mã:

  • /** ... */: Đây là header của plugin. WordPress sử dụng thông tin này để hiển thị plugin trong trang quản trị.
  • Plugin Name: Tên của plugin.
  • Description: Mô tả ngắn gọn về chức năng của plugin.
  • Version: Phiên bản của plugin.
  • Author: Tên tác giả của plugin.
  • my_first_plugin_admin_notice(): Đây là một hàm PHP sẽ hiển thị thông báo trên trang quản trị.
  • <div class="notice notice-success is-dismissible">: Tạo một thông báo màu xanh lá cây (success) và cho phép người dùng tắt thông báo.
  • _e( 'Hello! This is my first WordPress plugin.', 'my-first-plugin' );: Hiển thị thông báo. _e() là một hàm WordPress dùng để dịch chuỗi.
  • add_action( 'admin_notices', 'my_first_plugin_admin_notice' );: Dòng này đăng ký hàm my_first_plugin_admin_notice() để được gọi khi WordPress hiển thị các thông báo trên trang quản trị.

Kích hoạt Plugin

1. Upload plugin: Tải thư mục my-first-plugin lên thư mục wp-content/plugins của bạn (thông qua FTP hoặc trình quản lý file của hosting).
2. Kích hoạt plugin: Đăng nhập vào trang quản trị WordPress của bạn. Truy cập mục “Plugins”. Bạn sẽ thấy plugin “My First Plugin” trong danh sách. Nhấn nút “Activate” để kích hoạt plugin.
3. Kiểm tra: Sau khi kích hoạt, hãy truy cập bất kỳ trang nào trong trang quản trị. Bạn sẽ thấy thông báo “Hello! This is my first WordPress plugin.” ở trên đầu trang.

Thêm Chức năng vào Plugin

Plugin của bạn đã hoạt động! Bây giờ, hãy thử thêm một số chức năng khác. Ví dụ, chúng ta sẽ thêm một shortcode để hiển thị một thông báo trên trang web.

<?php
/**
 * Plugin Name: My First Plugin
 * Description: A simple WordPress plugin.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p><?php _e( 'Hello! This is my first WordPress plugin.', 'my-first-plugin' ); ?></p>
    </div>
    <?php
}

add_action( 'admin_notices', 'my_first_plugin_admin_notice' );

function my_first_plugin_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'message' => 'This is a default message.',
        ),
        $atts,
        'my_plugin'
    );

    return '<div style="background-color:#f0f0f0; padding:10px; border: 1px solid #ccc;">' . esc_html( $atts['message'] ) . '</div>';
}

add_shortcode( 'my_plugin', 'my_first_plugin_shortcode' );

Giải thích đoạn mã:

  • my_first_plugin_shortcode( $atts ): Đây là hàm sẽ xử lý shortcode.
  • shortcode_atts(): Hàm này hợp nhất các thuộc tính mặc định với các thuộc tính được cung cấp trong shortcode.
  • array( 'message' => 'This is a default message.' ): Xác định thuộc tính ‘message’ với giá trị mặc định là ‘This is a default message.’.
  • $atts['message']: Lấy giá trị của thuộc tính ‘message’.
  • esc_html(): Hàm này “thoát” HTML để đảm bảo an toàn. Nó chuyển đổi các ký tự đặc biệt thành các thực thể HTML (ví dụ: < thành &lt;). Điều này giúp ngăn chặn các cuộc tấn công XSS.
  • add_shortcode( 'my_plugin', 'my_first_plugin_shortcode' );: Dòng này đăng ký shortcode my_plugin và liên kết nó với hàm my_first_plugin_shortcode().

Để sử dụng shortcode này, hãy chèn [my_plugin message="Your custom message"] vào bất kỳ trang hoặc bài viết nào. Nếu bạn chỉ sử dụng [my_plugin], nó sẽ hiển thị thông báo mặc định.

Sử dụng Hooks: Actions và Filters

WordPress sử dụng “hooks” để cho phép các plugin tương tác với hệ thống. Có hai loại hooks chính:

  • Actions: Cho phép bạn thực thi một hàm tại một điểm cụ thể trong quá trình xử lý của WordPress. Ví dụ, admin_notices mà chúng ta đã sử dụng là một action.
  • Filters: Cho phép bạn sửa đổi dữ liệu. Ví dụ, bạn có thể sử dụng một filter để thay đổi tiêu đề của một bài viết trước khi nó được hiển thị.

Chúng ta đã sử dụng add_action(). Để sử dụng một filter, bạn sẽ sử dụng add_filter().

Ví dụ:

<?php
function my_first_plugin_filter_title( $title ) {
    return 'Prefix: ' . $title;
}

add_filter( 'the_title', 'my_first_plugin_filter_title' );

Đoạn mã này thêm tiền tố “Prefix: ” vào tiêu đề của tất cả các bài viết. the_title là filter được sử dụng, và my_first_plugin_filter_title là hàm để xử lý filter.

Ví dụ về một Plugin phức tạp hơn: Thêm một Widget

Widget là các khối nội dung có thể được thêm vào các khu vực sidebar hoặc footer của trang web. Để tạo một widget, bạn cần tạo một lớp kế thừa từ lớp WP_Widget.

<?php
/**
 * Plugin Name: My First Plugin
 * Description: A simple WordPress plugin with a widget.
 * Version: 1.0.0
 * Author: Your Name
 */

// ... (các hàm và actions trước đó) ...

class My_First_Plugin_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'my_first_plugin_widget',
            __( 'My First Plugin Widget', 'my-first-plugin' ),
            array( 'description' => __( 'A simple widget.', 'my-first-plugin' ), )
        );
    }

    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 __( 'Hello, World!', 'my-first-plugin' );
        echo $args['after_widget'];
    }

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

function my_first_plugin_register_widget() {
    register_widget( 'My_First_Plugin_Widget' );
}
add_action( 'widgets_init', 'my_first_plugin_register_widget' );

Giải thích đoạn mã:

  • class My_First_Plugin_Widget extends WP_Widget: Tạo một lớp mới kế thừa từ WP_Widget.
  • __construct(): Hàm khởi tạo widget.
  • widget(): Hàm này hiển thị nội dung của widget.
  • form(): Hàm này tạo biểu mẫu trong trang quản trị để bạn có thể cấu hình widget.
  • update(): Hàm này xử lý dữ liệu khi bạn lưu widget.
  • register_widget( 'My_First_Plugin_Widget' ): Đăng ký widget.
  • add_action( 'widgets_init', 'my_first_plugin_register_widget' ): Đăng ký hàm my_first_plugin_register_widget() để được gọi khi WordPress khởi tạo các widget.

Sau khi thêm đoạn mã này, bạn có thể vào trang “Appearance” -> “Widgets” và kéo widget “My First Plugin Widget” vào một trong các khu vực sidebar của bạn.

Các bước tiếp theo

Đây chỉ là những kiến thức cơ bản về cách tạo plugin WordPress. Có rất nhiều điều khác bạn có thể học hỏi, bao gồm:

  • Sử dụng AJAX để tạo các tính năng tương tác.
  • Làm việc với cơ sở dữ liệu WordPress.
  • Tạo các trang quản trị tùy chỉnh.
  • Viết mã an toàn và hiệu quả.
  • Sử dụng các tiêu chuẩn mã hóa của WordPress.

Chúc bạn thành công trong việc tạo ra các plugin WordPress tuyệt vời! Hãy nhớ rằng, thực hành là chìa khóa để thành thạo. Hãy bắt đầu với những dự án nhỏ và dần dần tiến tới những dự án lớn hơn.

Related Topics by Tag
, , , ,

..