Tạo custom WordPress block dễ dàng

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

Giới thiệu về Custom WordPress Block

WordPress đã trải qua một cuộc cách mạng lớn với sự ra đời của Gutenberg, trình soạn thảo block (khối) mới. Gutenberg cho phép người dùng tạo ra các trang web đẹp mắt và phức tạp một cách trực quan, chỉ bằng cách kéo và thả các block khác nhau. Tuy nhiên, sức mạnh thực sự của Gutenberg nằm ở khả năng tạo ra các custom block (khối tùy chỉnh) riêng biệt, đáp ứng nhu cầu cụ thể của từng dự án. Bài viết này sẽ hướng dẫn bạn cách tạo custom WordPress block dễ dàng, từng bước một, giúp bạn tận dụng tối đa tiềm năng của Gutenberg.

Tại sao nên tạo Custom WordPress Block?

Có rất nhiều lý do để bạn cân nhắc việc tạo custom WordPress block. Dưới đây là một vài lợi ích chính:

Kiểm soát hoàn toàn nội dung: Bạn có thể thiết kế block chính xác theo nhu cầu của mình, hiển thị dữ liệu theo cách mong muốn.
Tăng tốc độ phát triển: Sử dụng lại các block đã tạo, giảm thời gian phát triển trang web.
Cải thiện trải nghiệm người dùng: Cung cấp giao diện trực quan và dễ sử dụng cho người dùng chỉnh sửa nội dung.
Dễ dàng bảo trì: Thay đổi code của block sẽ tự động áp dụng cho tất cả các trang sử dụng block đó.
Tính linh hoạt cao: Tạo ra các block phức tạp, tích hợp các chức năng nâng cao, vượt xa khả năng của các block mặc định.

Các công cụ cần thiết để tạo Custom Block

Để tạo custom WordPress block, bạn sẽ cần một số công cụ cơ bản:

Node.js và npm (Node Package Manager): Môi trường phát triển JavaScript và trình quản lý gói.
WordPress (tất nhiên!): Phiên bản WordPress đang hoạt động.
Trình soạn thảo code: Visual Studio Code, Sublime Text, Atom… bất kỳ trình soạn thảo nào bạn quen thuộc.
Kiến thức cơ bản về JavaScript, React và PHP: Nắm vững các khái niệm cơ bản về lập trình web.

Các phương pháp tạo Custom Block

Có nhiều phương pháp để tạo custom WordPress block, nhưng chúng ta sẽ tập trung vào một phương pháp phổ biến và hiệu quả:

Sử dụng @wordpress/scripts: Đây là công cụ chính thức của WordPress, cung cấp môi trường phát triển và các công cụ cần thiết để tạo block.

Hướng dẫn từng bước tạo Custom WordPress Block với @wordpress/scripts

Bước 1: Thiết lập môi trường phát triển

Đảm bảo bạn đã cài đặt Node.js và npm. Bạn có thể kiểm tra bằng cách mở terminal hoặc command prompt và chạy các lệnh sau:

node -v
npm -v

Nếu chưa cài đặt, hãy tải và cài đặt từ trang chủ Node.js.

Bước 2: Tạo thư mục plugin

Tạo một thư mục mới trong thư mục wp-content/plugins của WordPress. Ví dụ: wp-content/plugins/my-custom-block.

Bước 3: Khởi tạo project với npm

Mở terminal hoặc command prompt, điều hướng đến thư mục plugin bạn vừa tạo và chạy lệnh sau:

npm init

Làm theo hướng dẫn trên màn hình để điền thông tin cho package.json. Bạn có thể để trống các trường không bắt buộc.

Bước 4: Cài đặt @wordpress/scripts

Chạy lệnh sau để cài đặt @wordpress/scripts:

npm install @wordpress/scripts --save-dev

Bước 5: Tạo tệp index.js và block.json

Tạo hai tệp sau trong thư mục plugin:

index.js: Chứa code JavaScript cho block.
block.json: Chứa thông tin metadata cho block.

Bước 6: Chỉnh sửa block.json

Mở tệp block.json và thêm nội dung sau. Thay đổi các giá trị cho phù hợp với block của bạn:

{
  "name": "my-plugin/my-custom-block",
  "title": "My Custom Block",
  "description": "A simple custom block.",
  "category": "common",
  "icon": "smiley",
  "keywords": [ "custom", "block" ],
  "attributes": {
    "message": {
      "type": "string",
      "default": "Hello World!"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "my-custom-block",
  "editorScript": "file:./index.js",
  "viewScript": "file:./index.js"
}

Giải thích các thuộc tính:

name: Tên duy nhất của block, phải tuân theo định dạng plugin-name/block-name.
title: Tên hiển thị của block trong trình soạn thảo Gutenberg.
description: Mô tả ngắn gọn về block.
category: Danh mục mà block thuộc về.
icon: Biểu tượng hiển thị cho block.
keywords: Các từ khóa liên quan đến block.
attributes: Định nghĩa các thuộc tính của block (ví dụ: văn bản, màu sắc, hình ảnh).
supports: Cấu hình các tính năng hỗ trợ cho block.
textdomain: Tên miền cho việc dịch ngôn ngữ.
editorScript: Đường dẫn đến tệp JavaScript cho trình soạn thảo Gutenberg.
viewScript: Đường dẫn đến tệp JavaScript cho frontend.

Bước 7: Chỉnh sửa index.js

Mở tệp index.js và thêm nội dung sau. Đây là code JavaScript cơ bản để đăng ký block:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/my-custom-block', {
  edit: ( { attributes, setAttributes } ) => {
    const { message } = attributes;

    const onChangeMessage = ( newMessage ) => {
      setAttributes( { message: newMessage } );
    };

    return (
      
        
      
    );
  },
  save: ( { attributes } ) => {
    const { message } = attributes;

    return (
      
        { message }
      
    );
  },
} );

Giải thích code:

registerBlockType: Hàm để đăng ký block với WordPress.
edit: Hàm định nghĩa giao diện chỉnh sửa block trong Gutenberg.
save: Hàm định nghĩa cách block được hiển thị trên frontend.
attributes: Đối tượng chứa các thuộc tính của block.
setAttributes: Hàm để cập nhật các thuộc tính của block.
RichText: Thành phần React cho phép chỉnh sửa văn bản trong Gutenberg.
useBlockProps: Hàm cung cấp các thuộc tính cần thiết cho phần tử HTML bao bọc block.

Bước 8: Tạo tệp plugin chính

Tạo một tệp PHP trong thư mục plugin, ví dụ: my-custom-block.php, và thêm nội dung sau:

<?php
/**
 * Plugin Name: My Custom Block
 * Description: A simple custom block.
 * Version: 1.0.0
 * Author: Your Name
 */

function my_custom_block_init() {
  register_block_type( __DIR__ . '/block.json' );
}
add_action( 'init', 'my_custom_block_init' );

?>

Giải thích code:

Phần comment ở đầu tệp PHP chứa thông tin về plugin.
register_block_type: Hàm đăng ký block từ tệp block.json.
add_action: Hook để gọi hàm my_custom_block_init khi WordPress khởi tạo.

Bước 9: Build block

Trong terminal, điều hướng đến thư mục plugin và chạy lệnh sau để build block:

npm start

Lệnh này sẽ theo dõi các thay đổi trong tệp index.js và tự động build lại block khi bạn lưu tệp.

Bước 10: Kích hoạt plugin

Đăng nhập vào trang quản trị WordPress, đi đến Plugins và kích hoạt plugin “My Custom Block”.

Bước 11: Sử dụng block

Tạo một bài viết hoặc trang mới và tìm block “My Custom Block” trong trình soạn thảo Gutenberg. Kéo và thả block vào trang và bắt đầu chỉnh sửa.

Lời khuyên và các bước nâng cao

Sử dụng Components của WordPress: WordPress cung cấp một bộ components React sẵn có, giúp bạn tạo giao diện block nhất quán và chuyên nghiệp.
Xử lý ảnh và media: Tích hợp trình chọn ảnh và media vào block của bạn.
Tạo block động: Sử dụng PHP để hiển thị nội dung block một cách linh hoạt và tùy biến.
Dịch ngôn ngữ: Hỗ trợ nhiều ngôn ngữ cho block của bạn.
Tối ưu hóa hiệu suất: Đảm bảo block của bạn được tối ưu hóa để tải nhanh và không ảnh hưởng đến hiệu suất trang web.

Kết luận

Tạo custom WordPress block là một kỹ năng quan trọng giúp bạn tùy biến WordPress theo ý muốn. Với các công cụ và hướng dẫn trên, bạn có thể dễ dàng tạo ra các block độc đáo, đáp ứng nhu cầu cụ thể của dự án. Hãy bắt đầu khám phá và thử nghiệm để tạo ra những trải nghiệm người dùng tuyệt vời trên WordPress!

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