Chuyển widget thành block WordPress từng bước

9 giờ ago, Hướng dẫn WordPress, Views

Giới thiệu: Tại sao nên chuyển Widget thành Block WordPress?

Trong thế giới WordPress ngày càng phát triển, Gutenberg, trình soạn thảo block, đã trở thành một phần không thể thiếu. Gutenberg không chỉ đơn thuần là trình soạn thảo văn bản, mà còn là một hệ thống mạnh mẽ cho phép người dùng tạo ra các trang web phức tạp và trực quan hơn bằng cách sử dụng các block. Một trong những lợi ích chính của việc sử dụng block là tính linh hoạt và khả năng tùy biến cao. Thay vì bị giới hạn bởi các widget truyền thống, người dùng có thể dễ dàng kéo và thả các block khác nhau để tạo ra bố cục trang web độc đáo và phù hợp với nhu cầu của họ.

Việc chuyển đổi widget hiện có thành block WordPress mang lại nhiều lợi ích đáng kể:

Khả năng tương thích tốt hơn với Gutenberg: Block được thiết kế để hoạt động liền mạch với trình soạn thảo Gutenberg, đảm bảo rằng trang web của bạn sẽ hiển thị chính xác và hoạt động tốt.
Tính linh hoạt cao hơn: Block cho phép bạn tùy chỉnh giao diện và chức năng của chúng dễ dàng hơn so với widget truyền thống.
Hiệu suất được cải thiện: Block có thể được tối ưu hóa để tải nhanh hơn và sử dụng ít tài nguyên hơn so với widget.
Trải nghiệm người dùng tốt hơn: Block cung cấp giao diện trực quan và dễ sử dụng, giúp người dùng dễ dàng tạo ra nội dung hấp dẫn và chuyên nghiệp.

Bài viết này sẽ hướng dẫn bạn từng bước cách chuyển đổi widget hiện có thành block WordPress, giúp bạn tận dụng tối đa sức mạnh của Gutenberg.

Bước 1: Phân tích Widget hiện tại

Trước khi bắt đầu quá trình chuyển đổi, bạn cần phân tích kỹ lưỡng widget mà bạn muốn chuyển đổi. Điều này bao gồm việc xác định các chức năng chính của widget, các tùy chọn cấu hình mà nó cung cấp, và cách nó tương tác với các thành phần khác trên trang web.

Xác định chức năng chính: Widget này thực hiện chức năng gì? Ví dụ: hiển thị danh sách bài viết mới nhất, hiển thị form liên hệ, hiển thị thông tin về tác giả, v.v.

Liệt kê các tùy chọn cấu hình: Widget này có những tùy chọn cấu hình nào? Ví dụ: số lượng bài viết hiển thị, tiêu đề widget, lựa chọn danh mục, v.v.

Phân tích HTML/PHP code: Xem xét mã HTML và PHP của widget để hiểu cách nó tạo ra đầu ra và cách nó xử lý dữ liệu.

Ví dụ, giả sử bạn có một widget đơn giản hiển thị danh sách các bài viết mới nhất với tiêu đề và số lượng bài viết hiển thị có thể cấu hình được. Bạn sẽ cần phân tích mã của widget để xác định cách nó truy vấn dữ liệu bài viết, cách nó tạo ra HTML cho danh sách, và cách nó xử lý các tùy chọn cấu hình.

Bước 2: Tạo Plugin Block WordPress

Để tạo block WordPress, bạn cần tạo một plugin. Plugin này sẽ chứa mã JavaScript, CSS và PHP cần thiết để định nghĩa và hiển thị block của bạn.

Tạo thư mục plugin: Tạo một thư mục mới trong thư mục wp-content/plugins/ của bạn. Đặt tên cho thư mục này một cách mô tả, ví dụ: my-widget-block.
Tạo file plugin chính: Trong thư mục plugin, tạo một file PHP chính, ví dụ: my-widget-block.php. File này sẽ chứa thông tin plugin và các hàm cần thiết để đăng ký block.

Thêm thông tin plugin: Mở file my-widget-block.php và thêm thông tin plugin như sau:


<?php
/**
 * Plugin Name: My Widget Block
 * Description: Converts a widget into a Gutenberg block.
 * Version: 1.0.0
 * Author: Your Name
 */

// Code plugin của bạn sẽ được đặt ở đây

Bước 3: Đăng ký Block WordPress

Bây giờ, bạn cần đăng ký block của mình với WordPress. Điều này bao gồm việc định nghĩa các thuộc tính của block (các tùy chọn cấu hình mà người dùng có thể chỉnh sửa) và các hàm để hiển thị block.

Tạo file JavaScript cho block: Tạo một file JavaScript trong thư mục plugin của bạn, ví dụ: block.js. File này sẽ chứa mã JavaScript để định nghĩa block và xử lý các tương tác của người dùng.
Đăng ký block bằng JavaScript: Trong file block.js, sử dụng hàm registerBlockType của Gutenberg để đăng ký block của bạn. Ví dụ:
```
wp.blocks.registerBlockType('my-plugin/my-widget-block', {
    title: 'My Widget Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        title: {
            type: 'string',
            default: 'Latest Posts'
        },
        postsToShow: {
            type: 'number',
            default: 5
        }
    },
    edit: function(props) {
        // Giao diện chỉnh sửa block trong Gutenberg
    },
    save: function(props) {
        // Đầu ra HTML của block
    }
});
```
Giải thích:
- 'my-plugin/my-widget-block': Tên block (phải là duy nhất).
- title: Tiêu đề block hiển thị trong Gutenberg.
- icon: Biểu tượng block hiển thị trong Gutenberg.
- category: Danh mục block hiển thị trong Gutenberg.
- attributes: Định nghĩa các thuộc tính của block.
- edit: Hàm được gọi khi người dùng chỉnh sửa block trong Gutenberg.
- save: Hàm được gọi để tạo ra đầu ra HTML của block.

Đăng ký block bằng PHP: Trong file my-widget-block.php, sử dụng hàm register_block_type để đăng ký block của bạn. Bạn cũng cần đăng ký các script và style cần thiết.


<?php
/**
 * Plugin Name: My Widget Block
 * Description: Converts a widget into a Gutenberg block.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_widget_block_register_block() {
    wp_register_script(
        'my-widget-block-block',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    register_block_type( 'my-plugin/my-widget-block', array(
        'editor_script' => 'my-widget-block-block',
    ) );
}
add_action( 'init', 'my_widget_block_register_block' );

Bước 4: Tạo Giao diện Chỉnh sửa Block (Edit)

Hàm edit trong file block.js được sử dụng để tạo giao diện chỉnh sửa block trong Gutenberg. Trong hàm này, bạn có thể sử dụng các thành phần React của Gutenberg để tạo các trường nhập liệu, lựa chọn, v.v. cho phép người dùng tùy chỉnh các thuộc tính của block.

Ví dụ, để tạo các trường nhập liệu cho tiêu đề và số lượng bài viết hiển thị, bạn có thể sử dụng các thành phần TextControl và NumberControl:


edit: function(props) {
    const { attributes, setAttributes } = props;
    const { title, postsToShow } = attributes;

    function onChangeTitle(newValue) {
        setAttributes({ title: newValue });
    }

    function onChangePostsToShow(newValue) {
        setAttributes({ postsToShow: newValue });
    }

    return (
        <div>
            <wp.components.TextControl
                label="Title"
                value={ title }
                onChange={ onChangeTitle }
            />
            <wp.components.NumberControl
                label="Number of Posts"
                value={ postsToShow }
                onChange={ onChangePostsToShow }
            />
        </div>
    );
}

Giải thích:

props: Chứa các thuộc tính của block và hàm setAttributes để cập nhật các thuộc tính.
TextControl: Thành phần để tạo trường nhập liệu văn bản.
NumberControl: Thành phần để tạo trường nhập liệu số.
onChangeTitle và onChangePostsToShow: Các hàm được gọi khi giá trị của các trường nhập liệu thay đổi.

Bước 5: Tạo Đầu ra HTML (Save)

Hàm save trong file block.js được sử dụng để tạo ra đầu ra HTML của block. Trong hàm này, bạn có thể sử dụng các thuộc tính của block để tạo ra HTML tương ứng. Bạn cần chuyển logic từ widget PHP sang JavaScript (hoặc sử dụng AJAX để gọi một hàm PHP). Ví dụ:


save: function(props) {
    const { attributes } = props;
    const { title, postsToShow } = attributes;

    return (
        <div>
            <h2>{ title }</h2>
            <ul>
                <!-- Danh sách bài viết sẽ được tạo ra ở đây (cần truy vấn dữ liệu bài viết) -->
            </ul>
        </div>
    );
}

Lưu ý: Ví dụ này chỉ tạo ra cấu trúc HTML cơ bản. Bạn cần thêm logic để truy vấn dữ liệu bài viết và tạo ra danh sách bài viết tương ứng. Bạn có thể sử dụng các hàm JavaScript của WordPress (ví dụ: wp.api) hoặc sử dụng AJAX để gọi một hàm PHP để truy vấn dữ liệu.

Bước 6: Chuyển Logic Widget PHP sang Block

Đây là bước quan trọng nhất trong quá trình chuyển đổi. Bạn cần chuyển logic từ widget PHP sang block. Có hai cách chính để thực hiện việc này:

Chuyển logic hoàn toàn sang JavaScript: Điều này bao gồm việc sử dụng các hàm JavaScript của WordPress để truy vấn dữ liệu và tạo ra HTML. Ưu điểm của cách này là hiệu suất tốt hơn, nhưng nó có thể phức tạp hơn nếu logic của widget phức tạp.
Sử dụng AJAX để gọi hàm PHP: Điều này bao gồm việc tạo một hàm PHP để xử lý logic của widget và sử dụng AJAX để gọi hàm này từ JavaScript. Ưu điểm của cách này là bạn có thể tái sử dụng mã PHP hiện có, nhưng nó có thể ảnh hưởng đến hiệu suất.

Ví dụ sử dụng AJAX:

Trong file block.js:


save: function(props) {
    const { attributes } = props;
    const { title, postsToShow } = attributes;

    return (
        <div>
            <h2>{ title }</h2>
            <ul className="latest-posts-list" data-posts-to-show={postsToShow}>
                <!-- Danh sách bài viết sẽ được tải bằng AJAX -->
            </ul>
        </div>
    );
}

// Sử dụng jQuery để tải dữ liệu bài viết khi trang được tải
jQuery(document).ready(function($) {
    $('.latest-posts-list').each(function() {
        var postsToShow = $(this).data('posts-to-show');
        var $this = $(this);

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'get_latest_posts',
                posts_to_show: postsToShow
            },
            success: function(response) {
                $this.html(response);
            }
        });
    });
});

Trong file my-widget-block.php:


<?php
/**
 * Plugin Name: My Widget Block
 * Description: Converts a widget into a Gutenberg block.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_widget_block_register_block() {
    wp_register_script(
        'my-widget-block-block',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'jquery' ), // Thêm jQuery
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    wp_localize_script( 'my-widget-block-block', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

    register_block_type( 'my-plugin/my-widget-block', array(
        'editor_script' => 'my-widget-block-block',
    ) );
}
add_action( 'init', 'my_widget_block_register_block' );

function get_latest_posts() {
    $posts_to_show = intval($_POST['posts_to_show']);

    $args = array(
        'posts_per_page' => $posts_to_show,
        'orderby'        => 'date',
        'order'          => 'DESC',
    );

    $the_query = new WP_Query( $args );

    $output = '';
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        wp_reset_postdata();
    }

    echo $output;
    wp_die();
}
add_action( 'wp_ajax_get_latest_posts', 'get_latest_posts' );
add_action( 'wp_ajax_nopriv_get_latest_posts', 'get_latest_posts' );

Giải thích:

Trong file JavaScript, chúng ta sử dụng jQuery để gửi yêu cầu AJAX đến file admin-ajax.php.
Trong file PHP, chúng ta tạo một hàm get_latest_posts để truy vấn dữ liệu bài viết và trả về HTML.
Chúng ta sử dụng các action wp_ajax_get_latest_posts và wp_ajax_nopriv_get_latest_posts để đăng ký hàm get_latest_posts để xử lý các yêu cầu AJAX.

Bước 7: Kiểm tra và Tối ưu

Sau khi bạn đã hoàn thành việc chuyển đổi widget thành block, hãy kiểm tra kỹ lưỡng block của bạn để đảm bảo rằng nó hoạt động chính xác và đáp ứng tất cả các yêu cầu.

Kiểm tra chức năng: Đảm bảo rằng block hiển thị dữ liệu chính xác và các tùy chọn cấu hình hoạt động như mong đợi.
Kiểm tra giao diện: Đảm bảo rằng block hiển thị đẹp mắt trên các thiết bị khác nhau và phù hợp với giao diện của trang web.
Kiểm tra hiệu suất: Đảm bảo rằng block không làm chậm trang web.

Nếu bạn gặp bất kỳ vấn đề nào, hãy xem lại mã của bạn và tìm kiếm các lỗi. Bạn cũng có thể sử dụng các công cụ debugging của trình duyệt để giúp bạn tìm ra nguyên nhân gây ra vấn đề.

Ngoài ra, hãy xem xét việc tối ưu hóa block của bạn để cải thiện hiệu suất. Điều này có thể bao gồm việc giảm thiểu kích thước của các file JavaScript và CSS, sử dụng cache để lưu trữ dữ liệu, và tối ưu hóa các truy vấn cơ sở dữ liệu.

Kết luận

Việc chuyển đổi widget thành block WordPress có thể là một quá trình phức tạp, nhưng nó mang lại nhiều lợi ích đáng kể. Bằng cách làm theo các bước trong bài viết này, bạn có thể chuyển đổi widget hiện có thành block WordPress và tận dụng tối đa sức mạnh của Gutenberg.

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