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

WordPress Gutenberg & Full Site Editing

WordPress Gutenberg & Chỉnh sửa Toàn bộ Trang web

WordPress Gutenberg & Chỉnh sửa Toàn bộ Trang web

Thành thạo Gutenberg: Tạo bài viết, trang, thậm chí tùy chỉnh đầu trang và chân trang — hơn nữa, thiết kế chủ đề khối của riêng bạn!

4.8
(675 đánh giá)
3,444 học viên
Giảng viên
Andrew Williams
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
65 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ì

Gutenberg với vai trò là trình soạn thảo khối để tạo nội dung cho bài viết và trang.
Giới thiệu về Chỉnh sửa Toàn bộ Trang web Gutenberg và cách nó biến bạn thành một nhà thiết kế web.
Cách tạo một chủ đề đơn giản (tương thích với Trình chỉnh sửa Toàn bộ Trang web) từ đầu.
Cách WordPress sử dụng các mẫu (template) để kiểm soát bố cục của các phần khác nhau trên trang web của bạn.
Tìm hiểu mẫu nào kiểm soát từng trang web trên site của bạn, và cách chỉnh sửa hoặc tạo mẫu để chúng hiển thị theo ý muốn của bạn.
Chúng ta sẽ xem xét kỹ chủ đề Twenty Twenty Two như một điểm khởi đầu cho trang web của riêng bạn.

Yêu cầu

Kiến thức cơ bản/đã từng làm việc với WordPress.
Cần máy tính Windows, Mac hoặc Linux để cài đặt WordPress trên máy cá nhân HOẶC một web host và tên miền để thực hành.

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

Người dùng WordPress muốn học cách khai thác sức mạnh của Chỉnh sửa Toàn bộ Trang web với Gutenberg.
Bất kỳ ai muốn bắt đầu thiết kế web bằng WordPress.

Nội dung khóa học

6 phần • 65 bài giảng
1 Giới thiệu
2 Cài đặt WordPress Local
1 Tổng quan
2 Giao diện
3 Cấu trúc của một Khối
4 Công cụ chèn Khối
5 Tổng quan Tài liệu
6 Chiều rộng Thường, Rộng và Toàn màn hình
7 Bảng Lệnh (Command Palette)
8 Mô hình Hộp (Box Model)
9 Khối Tiêu đề
10 Khối Đoạn văn
11 Khối Hình ảnh
12 Khối Video
13 Khối Nút bấm
14 Khối Ảnh bìa (Cover)
15 Nhóm, Hàng, Ngăn xếp và Lưới
16 Khối Cột
17 Khối Bảng
18 Mẫu Khối (Block Patterns)
19 Tạo Mẫu
20 Ví dụ: Mẫu Đồng bộ (Synced Pattern)
21 Khối Khoảng cách - Dùng Spacer hay Margin?
22 Bài viết Mẫu
1 Chỉnh sửa Toàn bộ Trang web là gì?
2 Chủ đề, Mẫu & Bộ phận Mẫu (Template Parts)
3 Thứ bậc Mẫu (Template Hierarchy)
4 Chỉnh sửa Mẫu?
5 Các Khối mới trong Chỉnh sửa Toàn bộ Trang web
6 Vòng lặp Truy vấn (Query Loop)
7 Điều hướng
8 Tạo Mẫu với các Bộ phận Mẫu
9 Trình chỉnh sửa :: Trang
10 Kiểu dáng Toàn cục (Global Styles)
11 Kiểu dáng :: Kiểu chữ (Typography)
12 Kiểu dáng :: Bảng màu (Color Palette)
13 Kiểu dáng :: Nền (Background)
14 Kiểu dáng :: Đổ bóng (Shadows)
15 Kiểu dáng :: Bố cục và Khoảng cách (Layout and Spacing)
16 Kiểu dáng :: Chỉnh sửa Giao diện Khối
1 Chủ đề Cổ điển vs Chủ đề Khối
2 Các Tệp và Thư mục Bắt buộc
3 Công cụ Tạo theme.json
4 Tạo chủ đề khối bằng một plugin
5 Tạo Đầu trang (Header)
6 Tạo Chân trang (Footer)
7 Mẫu Trang chủ (Index Template)
8 Mẫu Bài viết Đơn (Single Post Template)
9 Mẫu Trang Chủ (Front Page Template)
10 Mẫu Trang (Page Template)
11 Mẫu Lưu trữ (Archive Template)
12 Mẫu Tìm kiếm (Search Template)
13 Mẫu 404
14 Biểu tượng Favicon
1 Giới thiệu về phần này
2 Twenty Twenty-Two
3 Twenty Twenty-Three
4 Twenty Twenty-Four
5 Sự Phát triển của Chủ đề Khối WordPress
1 Dán nội dung từ ChatGPT?
2 Ví dụ: Một Trang Đích (Landing Page)
3 Thêm CSS Tùy chỉnh vào Chủ đề FSE
4 Thêm Thanh bên (Sidebar)
5 Lời Kết
6 Bài giảng Thưởng

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

Gutenberg was launched as an integrated part of WordPress 5.0.  Gutenberg was the name given to the new block editor that replaced the Classic WYSIWYG editor that we'd been using since the early versions of WordPress. 

Gutenberg is the editor of choice as you create the content for your WordPress posts and pages.  There's blocks for headings, blocks for images, blocks for text.  And blocks for just about anything else you'd want to add to a web page.  You can build your posts and pages by dragging the blocks onto, and around, the editor. 

But Gutenberg had a huge update with version WordPress 5.9.  Full Site Editing!  This is often abbreviated to FSE and quite often just Site Editing, but what does this mean?

Using the same block editor (Gutenberg) you've been using for your content, you can now edit and design the headers and footers for your website. So you design the bit at the top of the page, the bit at the bottom, and the bit in the middle.  That means you now have total control over the design of your website.  That is Full Site Editing. You can also create a complete block theme from scratch, and I'll show you how.

This course is designed to get you up to speed quickly with Full Site Editing in WordPress. 

In this course:


  • We take a deep dive into using the Gutenberg editor to create better-looking web pages as well as a complete study on the Full Site Editor itself.

  • The course showcases the Twenty Twenty-Five theme, which is the latest block theme from WordPress.

  • You'll learn how to use the Document Overview and Command Palette to enhance your workflow.

  • You'll learn about the normal, wide, and full-width options you can use in your design, and how to set these values yourself.

  • You'll look at the box model so you fully understand padding and margin, and when to use each of these to add space around your design elements.

  • We'll cover the most common blocks, like paragraph, image, video, button, cover, query loop, columns, table, etc., but also advanced design blocks like Groups, Rows, Stacks, and Grids.

  • You'll explore template hierarchy and how themes consist of templates and template parts.

  • You'll learn to use Global Styles, including typography (where you'll be able to install and use any Google font you want), color palettes, backgrounds, shadows, layout and spacing, and even how to change the default appearance of any block.

  • Following the detailed study of Gutenberg, we'll create a fully functional block theme from scratch, building the template parts and templates required to run a full site. During this process, you'll understand which template you need to create for any post type on your site. We'll even look at using the query loop in a more advanced "manual" way, so you can include multiple query loops on a page for more design flexibility.

  • At the end of the course, we'll study all of the other block themes WordPress created, from the Twenty Twenty-Two theme to the Twenty Twenty-Four theme, and how each built on the previous theme, culminating in the latest Twenty Twenty-Five theme that we used and studied during the course.

  • A final section of the course looks at a few "extras" that were requested from students of previous versions of the course, like creating a landing page, adding custom CSS to a block theme, and even how to add a sidebar to your theme or just to specific areas of your website.

By the end of the course, you'll have the confidence to take over the design of your own website, using Gutenberg to design the header, footer, and content.  You'll be on your way to mastering Full Site Editing.


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 Web Design
Hiển thị tất cả khoá học WordPress
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 😊