Kinh nghiệm lập trình website mã nguồn mở PHP

Xây dựng WordPress plugin – level 2

Giới thiệu

Xây dựng WordPress plugin
Tại sao phải mất công xây dựng plugin làm gì?

Trong bài này chúng ta sẽ kế thừa cấu trúc plugin của bài trước, để viết chức năng rất phổ biến: quản lý banner.
Xem lại bài: Level 1 – Plugin OOP structure
Xây dựng WordPress plugin

Khái quát

Cấu trúc plugin:

Tên của plugin của chúng ta sẽ là tkslideshow
Tương tự như plugin level 1, step by step của tkslideshow bao gồm:

  1. Khai báo 1 plugin với hệ thống WP (xem lại bài trước)
  2. Kích hoạt plugin
  3. Lưu 1 table chứa thông tin banner
  4. Tạo trang quản lý trong admin dashboard
  5. Dọn dẹp dữ liệu sau khi plugin được uninstall khỏi WP (xem lại bài trước)

Kích hoạt plugin

Khi kích hoạt plugin, chúng ta sẽ tạo table trong database (bước 3 +4)

public function activate( $network_wide ) 
{     
    // if the WordPress version is older than 2.6, deactivate this plugin
    // admin_action_ hook appearance 2.6 
    if ( version_compare( get_bloginfo( 'version' ), '2.6', '<' ) ) {
        deactivate_plugins( basename( __FILE__ ) );
    } else {
        global $wpdb;
        $table_name = $wpdb->prefix . 'slideshow';
        $charset_collate = $wpdb->get_charset_collate();
        $sql = "CREATE TABLE $table_name (
            id int(9) NOT NULL AUTO_INCREMENT,
            name varchar(255) NOT NULL,
            description text NULL,
            link_url varchar(255) NULL,
            link_image varchar(255) NOT NULL,
            is_active tinyint(1) NOT NULL default 1,
            ordering int(9) NOT NULL default 0,
            created_date timestamp DEFAULT CURRENT_TIMESTAMP NOT NULL,
            UNIQUE KEY id (id)
        ) $charset_collate;";
        require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
        dbDelta($sql);
        add_option( 'tkslideshow_version', $this->_tkslideshow_version );
    }
}

Bài trước chúng ta chỉ thêm 1 biến option vào system nên dùng hàm add_option() để WordPress quản lý, nay ta thêm 1 bảng dữ liệu phức tạp hơn, nên sử dụng hàm dbDelta() để chạy 1 đoạn SQL sinh ra table.

Tạo trang quản lý

Bài trước, chúng ta tạo trang admin với 3 bước đơn giản:
1. Add menu link
2. Add admin form
3. Xử lý form submit

Bài này, chúng ta sẽ tạo 1 trang admin dạng: CURD (Create-Update-Read-Delete)
1. Tạo menu hiển thị danh sách banner

// list slideshow
add_submenu_page(
    'themes.php',
    'TK Slideshow',
    'TK Slideshow',
    'manage_options',
    'tk-slideshow',
    array($this, 'tk_slideshow_plugin_index')
);

Menu sẽ gắn vào mục Appearance, là nơi bạn kích hoạt theme (themes.php), vì chức năng của chúng ta gắn liền với giao diện của trang web, như menu, widget, banner…
Cái tham số thứ 5 – ‘tk_slideshow’ rất quan trọng, đó chính là slug khi bạn nhấp vào menu, có dạng:
http://demo.loc/wp-admin/themes.php?page=tk-slideshow
Tham số thứ 6 chính là hàm được gọi sau khi nhấp vào menu, ở đây chúng ta sẽ load toàn bộ slide trong database lên:

function tk_slideshow_plugin_index() 
{
    if (!current_user_can( 'manage_options' )) {
        wp_die( __('You do not have sufficient permission to access this page.') );
    }
    
    global $wpdb;
    $table_name = $wpdb->prefix . 'slideshow';
    $slideshows = $wpdb->get_results( "SELECT * FROM $table_name", OBJECT );

    include 'views/admin.php';
}

Ta kiểm tra quyền admin (thao tác bắt buộc khi thiết kế trang quản trị admin)
Sau đó load data và include file template, ta tách riêng tầng View để dễ quản lý.

2. Template trang danh sách slides

// file: tkslideshow\views\admin.php
<?php if (isset($slideshows)): ?>
	<?php foreach($slideshows as $slide): ?>
	<tr>
		<th></th>
		<th><?php echo $slide->name ?></th>
		<td><?php echo addslashes($slide->description) ?></td>
		<td><?php echo $slide->link_url ?></td>
		<td><img src="<?php echo $slide->link_image ?>" width="100" /></td>
		<td><?php echo $slide->created_date ?></td>
...

Tại template, ta sẽ truy xuất tới biến $slideshows, có sẵn từ hàm trước để lặp và hiển thị danh sách slides.

3. Add & Edit
Tương tự với thao tác thêm và sửa slide
1. Khai báo menu
2. Hàm callback xử lý (controller)
3. Template hiển thị form (view)

Các bạn kham khảo source code
https://github.com/namluu/nam-hitcounter-bp

Upload images

Chức năng quan trọng nhất của plugin này chính là upload image/slide

if ( isset( $_POST['save'] ) ) {
            global $wpdb;
            $table_name = $wpdb->prefix . 'slideshow';
            if ( ! function_exists( 'wp_handle_upload' ) ) {
                require_once( ABSPATH . 'wp-admin/includes/file.php' );
            }

            $uploadedfile = $_FILES['link_image'];

            $upload_overrides = array( 'test_form' => false );
            $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

            if ( $movefile && !isset( $movefile['error'] ) ) 
            {
                $wpdb->insert($table_name, array(
                    'name' => $_POST['name'],
                    'description' => stripslashes_deep($_POST['description']),
                    'link_url' => $_POST['link_url'],
                    'link_image' => $movefile['url'],
                    'ordering' => $_POST['ordering']
                    ));

1. Nhúng thư viện của WP wp-admin/includes/file.php
2. Dùng hàm wp_handle_upload() để WP xử lý việc upload cho chúng ta.

Course code

Toàn bộ source code
https://github.com/namluu/nam-hitcounter-bp

Star nếu bạn thấy có ích nhé!
Star

Xây dựng WordPress plugin – level 2
Đánh giá bài viết

3 phản hồi

  1. Thật ra bạn không cần tạo db table để lưu slideshow. Có thể dùng custom post type.

    Vì khi tạo một table mình phải handle nhiều thứ liên quan tới table đó (get, insert, update, security). Trừ những trường hợp mà db của WordPress không đáp ứng được nhu cầu application.

    1. Bạn nói đúng.
      Để làm slideshow hoặc các chức năng tương đương ta dùng custom post type là đủ, chỉ cần khai báo, để các chức năng chính cho WP lo.
      Tuy nhiên bài viết này mình chủ đích tách biệt quản lý slideshow trong database ra bảng riêng, vừa trực quan vừa chuẩn bị làm quen với bài viết level 3, quản lý giải bóng đá.
      Rất vui vì bạn đã đọc và tương tác lại bài viết nhé :)

  2. Ok. Mình hiểu rồi. Tuy nhiên bài viết cũng nên nói rõ thêm về trường hợp tạo bảng riêng hoặc dùng custom post type để những bạn mới làm quen sẽ tránh việc lạm dụng.

    p/s chờ bài viết level 3 nhé.

Gửi phản hồi

Your email address will not be published. Required fields are marked *