Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

WordPress Gutenberg Block Development with React JS and PHP

Phát triển Block WordPress Gutenberg với React JS và PHP

Phát triển Block WordPress Gutenberg với React JS và PHP

Sử dụng ReactJS và PHP để xây dựng thư viện block WordPress Gutenberg tùy chỉnh - với React.js & WordPress Gutenberg (WP 6+)

4.8
(268 đánh giá)
1,594 học viên
Giảng viên
Tom Phillips
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.5 giờ video
70 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Xây dựng một thư viện block WordPress tùy chỉnh hoàn chỉnh
Tìm hiểu sự khác biệt giữa block tĩnh và block động trong WordPress
Tạo vô số tùy chỉnh và tính năng cho block WordPress với React
Tìm hiểu biến thể block và cách chuyển đổi block WordPress sang các block khác
Tải dữ liệu WordPress bên trong block
Học các kỹ thuật tạo kiểu khác nhau cho block WordPress
Xây dựng giao diện front-end động cho block bằng PHP và JavaScript

Yêu cầu

Có chút quen thuộc với trình chỉnh sửa block WordPress và React JS sẽ rất hữu ích. Mọi thứ khác đều được hướng dẫn trong khóa học!

Đối tượng phù hợp

Dành cho nhà phát triển web muốn học cách tạo block tùy chỉnh hoàn toàn cho WordPress bằng trình chỉnh sửa block Gutenberg mới

Nội dung khóa học

8 phần • 69 bài giảng
1 Quan trọng! Đọc phần này trước khi bắt đầu khóa học! (Kho lưu trữ Github, v.v.)
2 Giới thiệu
3 Đánh giá và nhận xét trên Udemy
4 Thiết lập môi trường và dự án
5 QUAN TRỌNG! THAY ĐỔI LỚN!
6 Tổng quan về codebase
7 Cập nhật cấu trúc và metadata của plugin
1 Bắt đầu triển khai bảng điều khiển bên
2 Xây dựng bảng điều khiển bên
3 Giới thiệu về thuộc tính block
4 Triển khai đường cong svg phía trên
5 Kích hoạt các thuộc tính tích hợp bằng "supports"
6 Các cách khác nhau để thêm kiểu mặc định
7 Sửa kiểu cho block Curvy
8 Triển khai điều khiển chiều cao và chiều rộng
9 Sử dụng thuộc tính chiều cao và chiều rộng để điều chỉnh hình dạng đường cong
10 Triển khai điều khiển lật dọc và ngang
11 Sử dụng thuộc tính lật dọc và ngang để điều chỉnh hình dạng đường cong
12 Sử dụng ColorPicker để đặt màu cho đường cong svg
13 Triển khai cài đặt đường cong dưới
14 Kết nối đường cong svg phía dưới
15 Giới thiệu về inner blocks
16 Tạo giao diện front-end động cho block Curvy
17 Thêm kiểu bổ sung và inner blocks vào front-end
18 Thêm đường cong trên vào front-end của block Curvy
19 Hoàn thiện giao diện front-end cho đường cong trên và thêm đường cong dưới
1 Tạo danh mục block WordPress tùy chỉnh
2 Thêm biểu tượng svg tùy chỉnh cho block Curvy
3 Chuyển đổi block đoạn văn và tiêu đề thành block Curvy
4 Tạo biến thể block cho block Curvy
5 Tạo bản xem trước cho block Curvy
1 Demo các block Clicky
2 Tạo block nhóm Clicky
3 Tạo block nút Clicky và hạn chế loại block
4 Lưu inner blocks của nhóm Clicky
5 Thêm kiểu và thuộc tính cho block nút Clicky
6 Thêm nhãn nút qua RichText vào nút Clicky
7 Triển khai khoảng cách block cho nhóm Clicky
8 Triển khai căn chỉnh nội dung cho nhóm Clicky
9 Thêm biểu tượng tùy chỉnh cho nhóm Clicky và nút Clicky
10 Tải dữ liệu loại bài viết
11 Hiển thị dropdown loại bài viết trong thanh bên
12 Tải và hiển thị dữ liệu bài viết trong thanh bên
13 Hiển thị giao diện động cho nhóm Clicky
14 Hiển thị giao diện động cho nút Clicky
15 Tái cấu trúc blockylicious.php
1 Tạo và đăng ký block thư viện ảnh Piccy mới
2 Triển khai nút thanh công cụ chế độ chỉnh sửa & xem trước
3 Thêm kiểu vào chế độ chỉnh sửa và inner blocks
4 Thêm block ảnh Piccy
5 Triển khai tải lên & chọn media cho ảnh Piccy
6 Lưu hình ảnh như một phần của ảnh Piccy
7 Hoàn thiện kiểu chế độ chỉnh sửa cho ảnh Piccy
8 Triển khai chế độ xem trước cho thư viện ảnh Piccy
9 Thêm kiểu thumbnail và hình ảnh xem trước đầy đủ
10 Hoàn thiện kiểu chế độ xem trước cho thư viện ảnh Piccy
11 Thêm giao diện front-end cho người dùng của thư viện ảnh Piccy
12 Thêm hình ảnh xem trước đầy đủ cho thư viện ảnh Piccy ở front-end
13 Xử lý trường hợp không có hình ảnh được đặt cho block ảnh Piccy
1 Mẫu block tùy chỉnh
2 Kiểu block mặc định qua theme.json
1 Thiết lập codebase để đăng ký định dạng văn bản mới
2 Đăng ký và áp dụng định dạng văn bản mới
3 Thêm và tải css cho hiệu ứng văn bản
4 Thêm bộ chọn màu
5 Lưu kiểu css và thuộc tính cho hiệu ứng văn bản
6 Thêm biểu tượng phù hợp cho hiệu ứng tô sáng nhẹ
1 Tạo file zip để cài đặt trên các trang WordPress khác
2 PHẦN THƯỞNG!

Giới thiệu khóa học

Master WordPress Gutenberg Block Development with React & PHP by building a completely custom WordPress block library.

In this course we'll be building "Blockylicious" - a completely custom WordPress block library built using React and PHP. We'll be building 5 different custom WordPress blocks in this course:

Introducing the Ultimate Gutenberg Block Library!

  • Curvy: Break the mold with aesthetically pleasing curvy shape dividers. Elevate your content separation in style.

  • Piccy Gallery & Piccy Image: Craft interactive image galleries that engage and enthrall your site visitors.

  • Clicky Group & Clicky Button: Elevate your call-to-action game with dynamic button groups that link directly to specific pages, not just URLs.

What You'll Learn:

  • React within WordPress: Understand the fusion of React's component-based architecture within the Gutenberg editor for seamless block creation.

  • Static vs. Dynamic Blocks: Delve deep into the nuances and understand why dynamic blocks often win.

  • Custom Block Essentials: Explore custom block data, side panels, post data retrieval, custom toolbars, and leveraging innate WordPress toolbars and features.

  • Block Variations: Craft varied designs like Curvy, Curvy top, and Curvy bottom.

  • Block Transforms: Master the art of transforming regular text paragraphs into feature-rich Curvy blocks using React components.

  • Custom Block Metadata: Personalize your blocks with custom icons, categories, and more.

  • Inner Block Rendering: Dive into the mechanics of rendering inner blocks efficiently with React.

  • Block Restriction: Learn the art of defining which blocks fit where, such as ensuring Clicky Button blocks exclusively serve as children to Clicky Group blocks.

  • Interactive Blocks: Harness the power of JavaScript and React to create dynamic blocks that interact and respond.

  • Block Previews: Get hands-on with block previews by utilizing "example" in block.json.

  • Styling Techniques: Dive into different strategies for block styling from stylesheets, block.json attributes, to theme.json elements.

Transform your WordPress designs and functionalities using custom built Gutenberg blocks enhanced by React and PHP. Enroll today and shape the future of your websites!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Php
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Hiển thị tất cả khoá học Wordpress Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊