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

Gatsby JS v5 & Headless WordPress (Gatsby & WordPress 2023)

Gatsby JS v5 & Headless WordPress (Gatsby & WordPress 2023)

Gatsby.js & WordPress: Học Gatsby và tạo các trang tĩnh siêu nhanh với backend WordPress, bao gồm cả Gutenberg

4.7
(761 đánh giá)
4,856 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
7.0 giờ video
95 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ì

Nâng cao giá trị bản thân và mở rộng kiến thức với tư cách là một lập trình viên Front-end / React JS
Học Gatsby
Tạo một website tĩnh, biên dịch từ server, dựa trên nội dung bằng Gatsby JS (với React JS & GraphQL)
Học cách sử dụng GraphQL và GraphiQL để truy vấn dữ liệu lưu trữ trong WordPress
Thiết lập WordPress làm backend để xây dựng nội dung, sau đó hiển thị nội dung thành các trang với React JS & GraphQL
Triển khai website tĩnh Gatsby JS và tự động build lại khi nội dung thay đổi bằng Gatsby Cloud
Sử dụng Tailwind CSS để tạo kiểu cho các khối (block) WordPress tùy chỉnh

Yêu cầu

Có hiểu biết cơ bản về React JS

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

Dành cho lập trình viên React JS muốn tìm hiểu cách tiếp cận tốt hơn để tạo website tĩnh dựa trên nội dung với WordPress, React JS và GraphQL, sử dụng Gatsby JS

Nội dung khóa học

7 phần • 47 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 khóa học
3 Thiết lập WordPress trên máy cục bộ & giải thích về plugin
4 THAY ĐỔI LỚN! QUAN TRỌNG!
5 Đánh giá và nhận xét trên Udemy
6 Thiết lập Gatsby JS, tổng quan dự án và truy vấn đầu tiên với WordPress
1 Tạo trang trong Gatsby dựa trên các trang được lưu trữ trong WordPress
2 Hiển thị các khối Gutenberg của WordPress trong Gatsby
3 Thêm nhiều khối hơn vào trang chủ
1 Hiển thị một component tùy chỉnh cho một khối WordPress cụ thể
2 Sử dụng Gatsby Image
3 Tinh chỉnh việc hiển thị các khối tùy chỉnh
4 Hiển thị liên kết với Gatsby Link API
1 Tạo trang tùy chọn Menu chính trong WordPress
2 Tạo các trường dữ liệu cho menu chính
3 Thêm tất cả các trang cần thiết cho menu chính & tạo nội dung trang bằng ChatGPT
4 Truy vấn menu chính từ Gatsby & xây dựng thanh điều hướng
5 Hiển thị các mục menu
6 Hiển thị các mục menu con
7 Hiển thị logo và nút Kêu gọi hành động (Call To Action)
1 Thêm màu sắc cho giao diện
2 Thêm bộ font chữ vào WordPress
3 Thêm bộ font chữ vào website Gatsby
4 Tạo khối Gutenberg tùy chỉnh "Nút CTA" trong WordPress
5 Gán các trường có thể chỉnh sửa và tạo kiểu cho khối Nút CTA tùy chỉnh
6 Triển khai component Nút CTA trong Gatsby cho khối CTA & cập nhật ảnh bìa
7 Xây dựng trang chủ với nhiều khối WordPress hơn
8 Triển khai Gatsby Image cho khối Hình ảnh & Ảnh bìa
9 Tạo khối TickItem tùy chỉnh & danh mục khối tùy chỉnh trong WordPress
10 Hiển thị khối TickItem trong Gatsby & thêm khoảng cách mặc định giữa các khối văn bản
11 Các khối có thể tái sử dụng trong WordPress
1 Tạo loại bài đăng tùy chỉnh "Ô tô" với các trường tùy chỉnh
2 Xây dựng các trang ô tô trong WordPress và tạo các trang liên kết trong Gatsby
3 Tạo khối WordPress tùy chỉnh "Giá Ô tô"
4 Sửa đổi thuộc tính trả về của một khối từ WordPress & hiển thị Giá Ô tô
5 Tạo khối WordPress tùy chỉnh "Tìm kiếm ô tô"
6 Tạo truy vấn tìm kiếm ô tô và hiển thị kết quả
7 Hoàn thiện kiểu dáng cho kết quả tìm kiếm ô tô
8 Tạo truy vấn phân trang cho kết quả tìm kiếm ô tô
9 Triển khai các nút phân trang và chức năng URL
10 Triển khai giao diện bộ lọc tìm kiếm với chức năng URL cho tìm kiếm ô tô
11 Triển khai truy vấn bộ lọc tìm kiếm
1 Triển khai biểu mẫu với Contact Form 7 và Flamingo
2 Gửi dữ liệu biểu mẫu liên hệ đến WordPress
3 SEO & Truy vấn trang trong Gatsby
4 Triển khai lên Gatsby Cloud & Flywheel
5 PHẦN THƯỞNG BỔ SUNG!

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

JAN 2023 UPDATE - This course has been completely updated to use Gatsby v5 & Headless WordPress with Gutenberg blocks / WordPress block editor.

Do you want to improve your React JS skills and increase your value as a front-end developer?

- "Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future."

Level-up your React skillset by learning Gatsby.js with a WordPress backend! Gatsby JS uses React JS and GraphQL to generate and build static pages from a given dataset. This course will look at setting up WordPress as a headless CMS while using GatsbyJS to generate a blazing-fast server-rendered React website from WordPress data using the NEW WordPress block editor (otherwise known as the Gutenberg block editor). We'll building out custom posts, pages, menus, media, advanced custom fields, (and more!) using GraphQL to query that data.

That's right, we can actually query Wordpress data using GraphQL!

This course will cover Gatsby v5 with WordPress (using the NEW Gutenberg block editor). We'll create "The Gatsby Garage" in this course; a fictional classic car garage that buys and sells classic cars. While building this site we'll be covering so many different features of both Gatsby and WordPress.

  • We'll style our site using Tailwind CSS.

  • We'll dive into WordPress development by creating our own custom Gutenberg blocks using ACF Pro.

  • We'll implement forms where we'll store form submissions directly in WordPress using Contact Form 7 and Flamingo.

  • We'll implement dynamic searching of cars.

  • We'll deploy a live, production version of our site.

  • Plus so much more!

This is the ONLY resource available online that covers using Gatsby & WordPress in this way.

It's recommended you have rudimentary knowledge of React. We'll be covering everything else from Gatsby.js, Wordpress, GraphQL, and Tailwind CSS!

What other students are saying about this Gatsby & WordPress course:

5/5 stars - "Tom is a really nice guy with a good voice. His course is to the point and his response to the Q&A is awesome. I really like the fact that this course is not that long and shows you the endless possibilities that you can do with both Gatsby and the Wordpress API. For me this is a really good starting point in transforming a couple of websites without a CMS into a website with CMS" - Edwin Boon


5/5 stars - "Tom's course is concise, clear, and gives you a good example of how to leverage your knowledge of React into fluency working with Gatsby." - Rob Thorne


5/5 stars - "Straight to the point, no pep talkings, Tom delivers the course as a sharing-experience between two colleagues. From his experience, without pretensions of teaching but showing what he finds to be helpful, he drives the lectures smoothly intertwining react, graphQL and wordpress with gatsby in a minimalistic way that can be approachable by anybody. Don't expect complicated ract patterns as that's not the point; I really appreciate that from Tom, keeping the focus on the whole architecture, not react/wordpress/graphQL specific. Just be aware we are not talking about the old web patterns, so make sure you have a sound understanding of react, wordpress and REST APIs; and by his exposition, gatsby explanations will naturally fall in place almost unnoticeable; you will be using it already." - Tony Guerrero


5/5 stars - "I had no idea this was possible! I usually use React but have never used WordPress before, but I found this was really well articulated. Brilliant course - thank you!" - Carol Emma


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 Frontend Development
Hiển thị tất cả khoá học Gatsby
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊