Trình chỉnh sửa trang web WordPress: chỉnh sửa toàn bộ trang web với giao diện khối và khác biệt so với Tùy biến
Trình chỉnh sửa trang web WordPress là màn hình quản trị dùng để chỉnh sửa đầu trang và chân trang, mẫu trang và kiểu hiển thị của toàn bộ trang web trong giao diện khối bằng các khối, và được mở từ menu Giao diện. Tôi đã tự mở cả 8 mẫu trang và 7 thành phần mẫu trang trên WordPress 7.1.3 với giao diện Twenty Twenty-Five rồi tóm tắt điểm khác so với Tùy biến.
1️⃣ Màn hình trình chỉnh sửa trang web WordPress: Giao diện › Trình thiết kế
Tên mục trong menu [Giao diện] dùng để mở trình chỉnh sửa trang web thay đổi tùy theo giao diện bạn dùng. Với giao diện khối, mục này hiện là [Trình thiết kế]. GeneratePress, Astra và các giao diện cổ điển khác hỗ trợ kiểu trình soạn thảo hoặc [theme.json] hiện [Thiết kế], còn các giao diện cổ điển còn lại hiện [Các mẫu]. Cả ba mục đều mở cùng một màn hình trình soạn thảo là [site-editor.php], nhưng ở [Thiết kế] bạn chỉ dùng được Sổ tay kiểu hiển thị và danh sách mẫu, còn ở [Các mẫu] chỉ có danh sách mẫu.
| Loại giao diện | Mục trong menu [Giao diện] | Những gì dùng được trên màn hình mở ra | Menu [Sửa giao diện] |
|---|---|---|---|
| Giao diện khối (Twenty Twenty-Five) | Trình thiết kế | Kiểu hiển thị · Mẫu trang · Mẫu khối | ❌ |
| Cổ điển hỗ trợ kiểu trình soạn thảo · theme.json (GeneratePress · Astra) | Thiết kế | Sổ tay kiểu hiển thị · danh sách mẫu | ✅ |
| Cổ điển khác (Ashe) | Mẫu khối | Danh sách mẫu | ✅ |
Khi mở [Giao diện › Trình thiết kế], một bảng tối có tiêu đề [Thiết kế] hiện ở bên trái thay cho menu quản trị, và bản xem trước trang web mở ở bên phải. Việc chỉnh sửa toàn bộ trang web của giao diện khối được thực hiện qua [Kiểu hiển thị], [Mẫu trang] và [Các mẫu] trên màn hình này.
[Sửa tệp tin giao diện], nơi bạn sửa trực tiếp mã của các tệp giao diện, có tên gần giống [Trình thiết kế] nhưng là một màn hình khác; khi dùng giao diện khối, mục này nằm dưới menu [Công cụ].
Tiêu đề trang web, dòng mô tả, logo và biểu tượng được thiết lập ở [Identity] trong bảng [Thiết kế] bên trái.
Tùy chỉnh giao diện trang web của bạn bằng Trình soạn thảo khối.
Menu điều hướng là một tập hợp các khối được tuyển chọn cho phép khách truy cập khám phá trang web của bạn.
Quản lý những mẫu nào có sẵn khi chỉnh sửa trang web.
Tạo mẫu mới, hoặc đặt lại bất kỳ tùy chỉnh nào được thực hiện cho các mẫu được cung cấp bởi chủ đề của bạn.
Khám phá kiểu dáng và mẫu khối để tinh chỉnh trang web của bạn.
Xem trước hình ảnh nhận diện trực quan của trang web: màu sắc, kiểu chữ và các khối.
Quản lý những mẫu nào có sẵn khi chỉnh sửa trang web.
Quản lý những mẫu nào có sẵn khi chỉnh sửa trang web.
Mẫu khối là các bố cục block được cấu hình trước. Sử dụng chúng để lấy cảm hứng hoặc tạo trang mới một cách nhanh chóng.
Thêm trang mớiThiết kế tất cả mọi thứ trên trang web của bạn - từ đầu trang xuống chân trang, tất cả đều sử dụng khối và mẫu.
Chỉnh sửa trang web của bạn, hoặc đưa ra một diện mạo hoàn toàn mới! Hãy sáng tạo — thử một bảng màu hoặc phông mới như thế nào?
Tuỳ chỉnh logo, đầu trang, menu và nhiều hơn nữa trên trang web của bạn trong Công cụ tùy chỉnh.
Mở trình tuỳ chỉnhCó một loại giao diện WordPress mới, được gọi là giao diện khối, cho phép bạn xây dựng trang web mà bạn luôn muốn - với các khối và kiểu dáng.
Học về giao diện khốiTùy chỉnh sự xuất hiện của các khối cụ thể cho toàn bộ trang blog.
Chọn một biến thể để thay đổi vẻ ngoài của trang web.
Danh sách tất cả các mẫu từ tất cả các nguồn
Bao gồm mọi phần mẫu được xác định cho bất kỳ khu vực nào.
Hiển thị một trang tĩnh trừ khi một mẫu tùy chỉnh đã được áp dụng cho trang đó hoặc một mẫu chuyên dụng tồn tại.
Danh sách tất cả các mẫu từ tất cả các nguồn
Danh sách tất cả các mẫu từ tất cả các nguồn
2️⃣ Kiểu hiển thị: màu và phông chữ của toàn trang web, các biến thể kiểu
Màu và phông chữ bạn đổi trong [Kiểu hiển thị] áp dụng cho toàn bộ trang web. Muốn đổi riêng phông chữ thì mở [Kiểu chữ], muốn đổi riêng màu thì mở [Màu], cứ thế mở từng mục trong bảng để đặt giá trị cho toàn trang web. Trong [Khối], bạn chỉnh giao diện của từng loại khối, như khối Trích dẫn, cho toàn bộ trang web (theo tài liệu chính thức).
[Tìm kiểu hiển thị] là danh sách các biến thể đổi cùng lúc tổ hợp màu và phông chữ mà không cần đổi giao diện; Twenty Twenty-Five 1.5 có 9 biến thể kể cả mặc định. Khi chỉ muốn một trang trông khác, hãy đổi trong phần cài đặt khối của trang đó thay vì dùng biến thể, vì biến thể thay đổi giao diện của toàn bộ trang web cùng một lúc.
3️⃣ Mẫu trang và thành phần mẫu trang: chỉnh sửa đầu trang và chân trang
Cách bố trí tiêu đề trang web và menu trong đầu trang và chân trang được chỉnh sửa trong thành phần mẫu trang. Kiểu hiển thị chỉ đổi màu và phông chữ, không thay đổi cấu trúc này.
| Phân loại | Twenty Twenty-Five 1.5 | Vai trò |
|---|---|---|
| Mẫu trang | 8 | Khung tổng thể cho từng loại màn hình như trang, bài viết đơn, lưu trữ và 404 |
| Phần mẫu | 7 (đầu trang 3 · chân trang 3 · chung 1) | Đầu trang và chân trang được nhiều mẫu trang dùng chung |
| Giao diện các biến thể | 9 (kể cả mặc định) | Tổ hợp màu và phông chữ của toàn trang web |
Khi bấm [Trang] trong [Mẫu trang], màn hình chỉnh sửa mẫu sẽ mở ra, và đầu trang cùng chân trang mà mẫu này dùng hiện trong [Nội dung] của thẻ [Mẫu trang] bên phải. Vì thành phần mẫu trang được nhiều mẫu dùng chung, sửa đầu trang sẽ thay đổi mọi mẫu dùng cùng đầu trang đó.
Nội dung đã sửa chỉ hiện với khách truy cập sau khi bạn bấm [Lưu] ở góc trên bên phải màn hình chỉnh sửa, và nếu không có thay đổi thì nút [Lưu] bị vô hiệu hóa.
4️⃣ Khác biệt so với Tùy biến WordPress: giao diện cổ điển và giao diện khối
Với giao diện khối, các thiết lập tương tự được thực hiện bằng khối trong trình chỉnh sửa trang web thay vì [Tùy biến]. Vì vậy, nếu không có plugin hay giao diện nào dùng Tùy biến, giao diện khối sẽ không hiện menu [Sửa giao diện] (theo tài liệu chính thức).
Khi dùng giao diện khối Twenty Twenty-Five, menu [Giao diện] chỉ hiện ba mục là Giao diện, Trình thiết kế và Phông chữ, còn vai trò của tiện ích và menu trong giao diện cổ điển do thành phần mẫu trang và [Điều hướng] đảm nhận.
Khi dùng giao diện cổ điển như Astra hoặc GeneratePress, menu [Giao diện] sẽ hiện Giao diện, Thiết kế, Sửa giao diện, Cấu hình cột tiện ích, Phông chữ và Thiết lập Menu, và [Sửa tệp tin giao diện] cũng nằm trong menu này. Tiện ích và menu chỉ xuất hiện khi giao diện hỗ trợ, còn giao diện hỗ trợ ảnh đầu trang và nền sẽ có thêm [Đầu trang] và [Nền].
GeneratePress khi mở bằng [Xem trước] sẽ thêm các mục Bố cục, Màu sắc, Kiểu chữ và Chung vào Tùy biến, đồng thời xuất hiện mục [Thiết lập Menu] để đặt vị trí menu.
🔢 FAQ & nội dung đề xuất
Mẫu khối
Mẫu khối WordPress
Cách lưu các tổ hợp khối hay dùng thành mẫu khối rồi chèn lại khi cần.
Công cụ soạn thảo
Tổng quan trình soạn thảo khối WordPress
Bố cục màn hình và các khối cơ bản của trình soạn thảo khối Gutenberg.
Theme
Giao diện con WordPress
Công dụng của giao diện con: giữ lại mã bạn đã sửa dù giao diện được cập nhật.
ℹ️ Thông báo tiếp thị liên kết
Nội dung trên trang này có chứa liên kết affiliate (tiếp thị liên kết). Khi khách truy cập mua sản phẩm hoặc dịch vụ qua các liên kết này, trang sẽ nhận hoa hồng từ bên bán. Trong quá trình đó, số tiền người mua phải trả (sẽ giảm khi có chương trình khuyến mãi ↓) không hề tăng lên. Giá, khuyến mãi và tình trạng hàng được đăng theo thời điểm viết bài và có thể khác với thực tế, vì vậy hãy kiểm tra lại lần cuối với bên bán trước khi mua. Việc chọn và đánh giá sản phẩm dựa trên tiêu chí riêng của trang; việc có nhận hoa hồng hay không không ảnh hưởng đến thứ tự giới thiệu hay nội dung đánh giá.