Twenty Twenty-One là chủ đề mặc định mới của WordPress đi kèm với WordPress 5.6. Nếu bạn đang chờ đợi một chủ đề WordPress đầy đủ tính năng, bạn có thể hơi thất vọng.
Twenty Twenty-One là một chủ đề tối giản trông và hoạt động như một canvas trống có thể tùy chỉnh cao. Giống như những người tiền nhiệm, chủ đề mặc định mới chủ yếu dựa vào Trình chỉnh sửa khối để xây dựng trang.
Trong bài đăng này, chúng ta sẽ đi qua các tính năng thú vị nhất của chủ đề Twenty Twenty-One và chúng tôi sẽ chỉ cho bạn cách tùy chỉnh giao diện của một trang web WordPress với chủ đề con Twenty Twenty-One đơn giản.
Sẳn sàng? Hãy đi sâu vào!

Cái nhìn đầu tiên về Chủ đề WordPress Twenty Twenty-One
Giống như Twenty Twenty, chủ đề mặc định mới đi kèm với WordPress 5.6 không được xây dựng từ đầu mà dựa trên chủ đề đến từ cộng đồng.
Twenty Twenty-One đã được phát triển dựa trên chủ đề mới của Automattic, chủ đề Seedlet, cung cấp một cấu trúc rõ ràng và có trật tự của các thuộc tính tùy chỉnh CSS lồng nhau. Do việc sử dụng nhiều thuộc tính CSS trong biểu định kiểu của chủ đề, việc xây dựng các chủ đề con trên Twenty Twenty-One rất nhanh chóng và dễ dàng.

Twenty Twenty-One là một chủ đề WordPress tối giản, dễ tiếp cận với bố cục một cột, một thanh bên chân trang và hai vị trí menu: Điều hướng chính và Điều hướng chân trang.
Chủ đề mới sử dụng ngăn xếp phông chữ hệ thống. Điều này sẽ có một số lợi ích cho cả người dùng và nhà phát triển:
- Đầu tiên và quan trọng nhất, việc sử dụng ngăn xếp phông chữ hệ thống mang lại lợi ích cho UX và hiệu suất vì phông chữ gốc đã được hỗ trợ bởi đa số hệ điều hành và không yêu cầu thêm thời gian tải.
- Thứ hai, chúng trông trung tính, vì vậy chúng có thể được kết hợp nhuần nhuyễn vào bất kỳ loại thiết kế nào.
- Thứ ba, vì chúng không yêu cầu tải thêm tệp phông chữ nên người dùng và nhà phát triển sẽ dễ dàng tùy chỉnh bố cục của trang web hơn bằng cách sử dụng Twenty Twenty-One.
Chủ đề Twenty Twenty-One sử dụng bảng màu tối thiểu dựa trên màu nền xanh lá cây nhạt và hai màu xám làm màu nền trước. Chủ đề cung cấp một số bảng màu phấn bổ sung.
Về điểm này, Mel Choyse-Dwan, Trưởng nhóm thiết kế chủ đề mặc định, giải thích:
Chúng tôi sẽ gói chủ đề với một số bảng màu bổ sung, bao gồm cả bảng màu trắng và đen. Tại sao màu xanh lá cây pastel? Màu phấn và màu tắt ngay bây giờ rất đẹp

Cách cài đặt Twenty Twenty-One
Tại thời điểm viết bài này, Twenty Twenty-One đang được phát triển tích cực và chưa có sẵn để tải xuống trong Thư mục chủ đề WordPress. Nhưng bạn có thể lấy một phiên bản đang tiến hành của chủ đề trên Github.
Kho lưu trữ Github sẽ không được dùng nữa sau khi chủ đề được hợp nhất thành lõi và bạn sẽ tìm thấy nó trong Thư mục chủ đề. Vì Twenty Twenty-One tuân theo lịch trình phát hành WordPress 5.6, bạn có thể muốn lưu những ngày sau:
- 20 tháng 10 năm 2020: Beta 1
- Ngày 27 tháng 10 năm 2020: Beta 2
- Ngày 2 tháng 11 năm 2020: Beta 3
- Ngày 12 tháng 11 năm 2020: Beta 4
- Ngày 17 tháng 11 năm 2020: RC 1
- Ngày 1 tháng 12 năm 2020: RC 2
- Ngày 7 tháng 12 năm 2020: Chạy khô để phát hành WordPress 5.6
- Ngày 8 tháng 12 năm 2020: Ngày mục tiêu phát hành WordPress 5.6
Để thiết lập và chạy chủ đề Twenty Twenty-One, hãy làm theo các bước sau:
- Nhận gói zip từ GitHub.
- Tải gói của bạn lên cài đặt phát triển của bạn từ bảng điều khiển WordPress hoặc qua SFTP.
- Duyệt đến Giao diện → Chủ đề và nhấp vào nút Kích hoạt trên hình ảnh xem trước của chủ đề.
- Đi tới Giao diện → Tùy chỉnh để cấu hình Twenty Twenty-One.
Bây giờ bạn có thể bắt đầu chạy thử nghiệm của mình trên một trang web dàn dựng hoặc trên môi trường cục bộ của bạn.

Chưa sẵn sàng để chạy thử nghiệm của bạn?
Đừng lo lắng, chúng tôi đã mổ xẻ chủ đề và chúng tôi sẽ cho bạn thấy những gì bạn có thể mong đợi từ Twenty Twenty-One.
Các tính năng chủ đề và khối của Twenty Twenty-One
Cũng giống như Twenty Twenty, chủ đề WordPress mặc định mới không phải là một chủ đề đầy đủ tính năng, mà là một chủ đề tối giản dựa vào trình chỉnh sửa khối để xây dựng trang. Chủ đề cũng nhằm mục đích cung cấp khả năng tiếp cận tuyệt vời. Theo lời của Mel Choyce-Dwan:
Cuối cùng, chúng tôi muốn làm cho chủ đề đáp ứng các nguyên tắc có liên quan từ WCAG 2.1 cấp AAA. Chúng tôi yêu thích ý tưởng khi + make.wordpress.org / accessibility / đưa ra ý tưởng và sẽ đánh giá cao bất kỳ và tất cả hướng dẫn từ cộng đồng của chúng tôi, các chuyên gia của chúng tôi để giúp thực hiện điều này.
Chủ đề hỗ trợ một số tính năng chủ đề và khối tốt bao gồm:
Các tính năng chủ đề:
- Liên kết nguồn cấp dữ liệu tự động
- Thẻ tiêu đề
- Định dạng bài đăng
- Đăng hình thu nhỏ
- Phần tử HTML5
- Biểu tượng tùy chỉnh
- Làm mới có chọn lọc cho các widget
- Tùy chỉnh nền
- Hai menu điều hướng
- Một thanh bên
Tính năng khối:
- Các kiểu khối mặc định
- Các kiểu biên tập viên
- Các kiểu trình chỉnh sửa tối (nền tối)
- Căn chỉnh rộng
- Kích thước phông chữ chặn
- Bảng màu khối
- Khối cài đặt trước gradient
- Nội dung dành cho người mới bắt đầu
- Nhúng đáp ứng
- Chiều cao dòng tùy chỉnh
- Màu liên kết thử nghiệm
- Khoảng cách tùy chỉnh thử nghiệm
- Đơn vị tùy chỉnh (bị xóa trong WordPress 5.6)
Danh sách sau đây bao gồm các tính năng có thể phù hợp hơn khi xây dựng trang web dựa trên Twenty Twenty-One.
Menu điều hướng
Twenty Twenty-One hỗ trợ hai vị trí menu, Điều hướng chính , nằm ở góc trên cùng bên phải của tiêu đề và Điều hướng chân trang .

Nếu được thêm vào menu Chân trang, các liên kết xã hội sẽ tự động được phát hiện và chuyển đổi thành biểu tượng SVG cho phương tiện truyền thông xã hội được hỗ trợ.

Đăng định dạng
Twenty Twenty-One hỗ trợ chín định dạng bài đăng: liên kết, sang một bên, bộ sưu tập, hình ảnh, trích dẫn, trạng thái, video, âm thanh, trò chuyện. Bạn có thể chọn định dạng bài đăng của mình trong bảng Trạng thái & Mức độ hiển thị trong cài đặt của trình chỉnh sửa.

Để xem cách chủ đề Twenty Twenty-One xử lý các định dạng bài đăng, hãy điều hướng đến thư mục mẫu-phần / đoạn trích và chọn mẫu. Ví dụ: mở tệp Trích dẫn-image.php trong trình chỉnh sửa mã yêu thích của bạn. Trong tệp đó, bạn sẽ thấy mã sau:
/** * Show the appropriate content for the Image post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // If there is no featured-image, print the first image block found. if ( ! twenty_twenty_one_can_show_post_thumbnail() && has_block( 'core/image', get_the_content() ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() ); } the_excerpt();
Mã tự giải thích, nhưng chúng ta hãy xem xét kỹ hơn:
has_block
xác định xem một bài đăng hoặc một chuỗi có chứa một loại khối cụ thể hay không (khối hình ảnh cốt lõi trong ví dụ này).-
twenty_twenty_one_print_first_instance_of_block
là một hàm mẫu Twenty Twenty-One in phiên bản đầu tiên của một khối trong nội dung và sau đó chia nhỏ.
Vì vậy, nếu người xem trang web yêu cầu một kho lưu trữ các bài đăng có định dạng ‘hình ảnh’, thì WordPress sẽ hiển thị một hình ảnh ở trên cùng cho mỗi bài đăng trong kho lưu trữ. Theo cùng một logic, bạn có thể đi sâu vào bất kỳ định dạng bài đăng nào bằng cách kiểm tra các phần mẫu tương ứng.
Nhận dạng trang web và biểu trưng tùy chỉnh
Twenty Twenty-One cung cấp hỗ trợ cho biểu trưng tùy chỉnh 300 × 100 px. Bạn có thể tìm cài đặt Biểu trưng Tùy chỉnh trong bảng Nhận dạng Trang web .

Màn hình này bao gồm:
- Biểu tượng tùy chỉnh
- Tiêu đề trang web
- Dòng giới thiệu
- Biểu tượng trang web
Trình chỉnh sửa kích thước phông chữ
Twenty Twenty-One hỗ trợ các kích thước phông chữ sau:
- Cực nhỏ – 16
- Nhỏ – 18
- Bình thường / Trung bình – 20
- Lớn – 24
- Cực lớn – 40
- Lớn – 96
- Khổng lồ – 144
Trong biểu định kiểu của chủ đề, kích thước được đặt theo đơn vị rem
.

Cài đặt màu sắc
Công cụ tùy chỉnh chủ đề cung cấp bảng Màu & Chế độ tối bao gồm hai tùy chọn:
- Một công cụ chọn màu đơn giản với 10 bảng màu được xác định trước.
- Hộp kiểm để bật / tắt chế độ tối.
Hình ảnh bên dưới hiển thị màu nền vàng nhạt với văn bản màu xám đậm.

Màu nền được mặc định thành màu xanh lá cây nhạt ( '#d1e4dd'
), nhưng quản trị viên trang web có thể dễ dàng chuyển đổi giữa các lựa chọn thay thế màu nền sau:
- Đen =
'#000000'
; - Màu xám đậm =
'#28303D'
; - Màu xám =
'#39414D'
; - Màu xanh lá cây =
'#D1E4DD'
; - Màu xanh lam =
'#D1DFE4'
; - Màu tím =
'#D1D1E4'
; - Màu đỏ =
'#E4D1D1'
; - Màu cam =
'#E4DAD1'
; - Màu vàng =
'#EEEADD'
; - Trắng =
'#FFFFFF'
;
Các màu tương tự có sẵn dưới dạng bảng màu khối trong cài đặt khối của trình chỉnh sửa.
Ngoài ra, Twenty Twenty-One hỗ trợ một số cài đặt trước gradient cho các khối hỗ trợ tính năng này. Hình ảnh bên dưới hiển thị các gradient mặc định trong cài đặt khối Cột.

Từ quan điểm trợ năng, hỗ trợ Chế độ tối là một tính năng mới tuyệt đối cho chủ đề mặc định.
Hãy đi sâu hơn một chút!
Hỗ trợ chế độ tối trong chủ đề Twenty Twenty-One
Sau cuộc thảo luận trên kênh Slack # core-themes, Mel Choyce-Dwan đã giới thiệu hỗ trợ Chế độ tối cho Twenty Twenty-One.

Lúc đầu, không rõ làm cách nào mà tính năng này có thể được triển khai trong Twenty Twenty-One nếu được thêm vào dưới dạng tính năng chủ đề hoặc dưới dạng vận chuyển dự án riêng biệt trong một plugin.
Có năm tùy chọn khả thi để lựa chọn:
- Cho phép chủ sở hữu trang web tắt hỗ trợ chế độ tối và khách truy cập trang web bật / tắt chế độ tối trong khi xem trang web.
- Chỉ cho phép chủ sở hữu trang web tắt hỗ trợ chế độ tối (không có tùy chọn cho khách truy cập trang web để bật / tắt chế độ tối).
- Bật hỗ trợ chế độ tối là “luôn bật” trong khi cho phép khách truy cập trang web chuyển đổi chế độ này trong khi xem trang web.
- Bật hỗ trợ chế độ tối ở dạng “luôn bật” và ngăn khách truy cập trang web bật / tắt chế độ tối.
- Không hỗ trợ chế độ tối
Sau khi thảo luận kỹ lưỡng, Chế độ tối đã được thêm vào chủ đề. Hiện nay:
- Hỗ trợ Chế độ tối có sẵn dưới dạng tính năng chọn tham gia cho chủ sở hữu trang web .
- Nút chuyển đổi đã bị xóa khỏi giao diện của trình chỉnh sửa và chỉ khả dụng trong Trình tùy chỉnh.
- Nút chuyển đổi Chế độ tối nằm ở góc dưới cùng bên phải (bên trái trên RTL) và biến mất khi người xem trang cuộn xuống trang.
- Với Chế độ tối được bật, người xem trang web có thể bật / tắt nó tùy thuộc vào sở thích cá nhân của họ và bất kể cài đặt hệ điều hành / trình duyệt của họ .

Ngay cả khi Chế độ tối được coi là một cải tiến về khả năng truy cập, không rõ ràng là các trang web của bạn sẽ dễ truy cập hơn trong mọi ngữ cảnh.
Mối quan tâm lớn nhất liên quan đến logo tối và hình ảnh trong suốt. Việc chuyển từ mẫu sáng mặc định sang màu nền tối có thể dẫn đến các vấn đề về khả năng đọc, có thể làm giảm khả năng sử dụng và làm hỏng giao diện trang web của bạn.
Ví dụ: một biểu trưng tối trên nền sáng có thể biến mất hoàn toàn nếu người đọc của bạn bật Chế độ tối ở bên cạnh họ. Mối quan tâm tương tự liên quan đến độ sáng và độ tương phản của hình ảnh và độ mờ của đường viền, dải phân cách và dải phân cách.
Vì lý do này, nếu bạn đang lên kế hoạch cung cấp hỗ trợ Chế độ tối cho trang web của mình, bạn cũng nên tính đến việc trang web của bạn sẽ trông như thế nào với nền tối.

Những người đóng góp chủ đề nhận thức được những vấn đề này và cuộc thảo luận vẫn tiếp tục trên Github. Để có cái nhìn sâu hơn về các vấn đề khả năng sử dụng Chế độ tối và cơ hội tham gia vào cuộc thảo luận, hãy xem danh sách đầy đủ các vấn đề trên Github.
Tùy chọn Chế độ tối được lưu trữ trong LocalStorage và có thể được xem trong các công cụ dành cho nhà phát triển của trình duyệt.
Trong Google Chrome, khởi chạy Chrome WebTools và nhấp vào tab Ứng dụng . Tìm phần Bộ nhớ và mở rộng menu Bộ nhớ cục bộ.

Thành thật mà nói, Chế độ tối không phải là một điều phổ biến trong bối cảnh của các trang web ngày nay. Tuy nhiên, vì chủ đề mặc định mới của WordPress hiện hỗ trợ chế độ tối, chúng tôi có thể mong đợi một sự thay đổi trong lĩnh vực trợ năng cụ thể này vì WordPress là phần mềm CMS được sử dụng nhiều nhất.
Các nhà phát triển muốn tìm hiểu sâu hơn về công nghệ không nên bỏ lỡ hướng dẫn chuyên sâu này về chế độ tối trên web.
Thuộc tính tùy chỉnh kiểu và CSS
Nói như vậy, đã đến lúc khám phá các tính năng thú vị nhất của Twenty Twenty-One dành cho các nhà phát triển chủ đề.
Hãy bắt đầu với Thuộc tính tùy chỉnh CSS.
Như đã đề cập ở trên, Twenty Twenty-One dựa trên Seedlet, một chủ đề hai cột, với một thanh bên ở chân trang và ba vị trí menu. Kiểu dáng của Seedlet hoàn toàn dựa trên các thuộc tính tùy chỉnh CSS và điều này giúp các nhà phát triển chủ đề và người dùng nâng cao dễ dàng hơn trong việc xây dựng các chủ đề con dựa trên chủ đề của Automattic.
Đối với Twenty Twenty-One cũng vậy. Chủ đề mặc định mới đi kèm với bố cục một cột, một thanh bên ở chân trang và hai vị trí menu. Biểu định kiểu phản ánh hệ thống các thuộc tính tùy chỉnh lồng nhau được cung cấp bởi Seedlet và điều này làm cho Twenty Twenty-One trở thành một canvas hoàn hảo để xây dựng các chủ đề con và các trang web được tùy chỉnh cao.
Thuộc tính tùy chỉnh CSS (còn được gọi là biến CSS ) là các thực thể đặc biệt chứa các giá trị cụ thể có thể được sử dụng lại ở mọi nơi trong biểu định kiểu của bạn.
Vì vậy, nếu bạn cần thay đổi điểm nhấn màu cụ thể trong tài liệu của mình, bạn không cần phải chạy tìm kiếm toàn cục để tìm ra bất kỳ sự xuất hiện nào của màu đó trong toàn bộ biểu định kiểu. Bạn chỉ cần đặt một giá trị thuộc tính khác trong :root
.

Ví dụ về tùy chỉnh đơn giản, giả sử bạn muốn đặt màu nền tùy chỉnh. Bạn không cần phải xây dựng một chủ đề con cho điều đó. Bạn chỉ cần đưa hai khai báo CSS vào trình chỉnh sửa mã của bảng CSS bổ sung :
:root { --global--color-beige: #e6d7c1; } body { background-color: var(--global--color-beige); }

Thuộc tính tùy chỉnh CSS an toàn để sử dụng vì chúng được hỗ trợ bởi tất cả các trình duyệt chính, như thể hiện trong hình ảnh bên dưới từ Tôi có thể sử dụng:
Đăng kí để nhận thư mới

Nếu bạn muốn tìm hiểu sâu hơn về các thuộc tính tùy chỉnh CSS, hãy xem tài liệu MDN.
Hai mươi mốt khối
Twenty Twenty-One cung cấp một số mẫu cho Trình chỉnh sửa khối. Trong một bài đăng trên blog trước đây, chúng tôi đã xác định các mẫu khối là bố cục khối được xác định trước cho phép người dùng nhanh chóng thêm các cấu trúc phức tạp của các khối lồng nhau vào trang của họ .
WordPress 5.5 đã giới thiệu một số mẫu khối và hơn thế nữa sẽ đi kèm với WordPress 5.6. Hơn nữa, Twenty Twenty-One đi kèm với bộ mẫu khối riêng.
Trong Twenty Twenty-One, các mẫu khối được định nghĩa trong tệp inc / block-pattern.php . Hai mươi mốt mẫu thay đổi từ các mẫu đơn giản như mẫu Văn bản lớn , chứa một phần tử H2 đơn lẻ, đến các mẫu phức tạp hơn, chẳng hạn như Chồng chéo Hình ảnh và Văn bản và Phương tiện và Tiêu đề Bài viết Văn bản .

Hiện tại, chủ đề cung cấp các mẫu sau:
- Văn bản lớn
- Khu vực liên kết : Một văn bản khổng lồ theo sau là các mạng xã hội và liên kết địa chỉ email.
- Tiêu đề Bài viết Phương tiện và Văn bản : Một khối Phương tiện & Văn bản với hình ảnh lớn ở bên trái và tiêu đề ở bên phải. Theo sau tiêu đề là một dấu phân cách và một đoạn mô tả.
- Chồng chéo hình ảnh : Ba hình ảnh bên trong một khối cột chồng chéo.
- Hai Hình ảnh Hiển thị: Một khối Phương tiện & Văn bản với một hình ảnh lớn ở bên trái và một hình ảnh nhỏ hơn với khung viền ở bên phải.
- Chồng chéo Hình ảnh và Văn bản : Một khối cột chồng chéo với hai hình ảnh và mô tả văn bản.
- Danh sách danh mục đầu tư : Danh sách các dự án có hình ảnh thu nhỏ.
- Thông tin liên hệ : Một khối có 3 cột hiển thị thông tin liên hệ và các liên kết mạng xã hội.

Sự sẵn có của rất nhiều mẫu khối là rất tốt cho cả người dùng và nhà phát triển. Người dùng sẽ được phép nhanh chóng và dễ dàng thêm các khối mã phức tạp vào các bài đăng và trang của họ, các nhà phát triển có thể sử dụng các mẫu đó làm mẫu hữu ích để xây dựng khi viết mã của riêng họ.
Thử nghiệm 21 khối
Twenty Twenty-One Blocks là một phiên bản thử nghiệm dựa trên khối riêng biệt của chủ đề Twenty Twenty-One. Mục đích của nó là chia sẻ và cập nhật cho mọi người về những gì đang xảy ra trong thử nghiệm Chỉnh sửa trang web đầy đủ, giúp mọi người có cơ hội tìm hiểu sâu hơn về các tính năng FSE mới trước khi họ trở thành một phần của WordPress Core.
Không chắc rằng chúng ta sẽ thấy phiên bản thử nghiệm này được hợp nhất thành lõi với WordPress 5.6. Theo Carolina Nymark,
Chủ đề sẽ cần Gutenberg và thử nghiệm Chỉnh sửa trang web đầy đủ để được bật. Nó sẽ không phải là một phần của Core, nhưng sau khi hoàn thành, nó sẽ có sẵn trong thư mục chủ đề.
Tại thời điểm viết bài này, Twenty Twenty-One Blocks yêu cầu plugin Gutenberg . Sau khi cài đặt và kích hoạt cả chủ đề và plugin, mục menu Trình chỉnh sửa trang web sẽ xuất hiện trong trình đơn quản trị WordPress của bạn (bạn không cần phải kích hoạt thử nghiệm Chỉnh sửa trang web đầy đủ nữa).

Bây giờ, nhấp vào mục menu Trình chỉnh sửa trang web mới để mở giao diện chỉnh sửa toàn trang và bắt đầu chỉnh sửa bất kỳ phần tử nào trên trang bằng trình chỉnh sửa khối.

Ở đây chúng tôi sẽ không đi sâu vào các nội dung kỹ thuật. Đủ để nói rằng chủ đề cổ điển và chủ đề dựa trên khối là khác nhau về cấu trúc.
Hình ảnh dưới đây cho thấy nội dung của thư mục Twenty Twenty-One Blocks:

Bạn sẽ nhận thấy tệp thử nghiệm-theme.json và các thư mục khối- mẫu và các thư mục khối-mẫu-phần .
Sự khác biệt chính giữa các chủ đề WordPress truyền thống và các chủ đề dựa trên khối là các chủ đề dựa trên khối bao gồm các mẫu hoàn toàn bao gồm các khối.
Ví dụ: mở block-template-Parts / header.html trong trình soạn thảo mã của bạn. Bạn sẽ thấy đoạn mã sau:
<!-- wp:spacer {"height":70} --> <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:columns {"align":"wide"} --> <div class="wp-block-columns alignwide"><!-- wp:column --> <div class="wp-block-column"><!-- wp:site-title /--> <!-- wp:site-tagline /--></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} --> <!-- wp:navigation-link {"label":"Home","url":"#"} /--> <!-- wp:navigation-link {"label":"Blog","url":"#"} /--> <!-- wp:navigation-link {"label":"Work","url":"#"} /--> <!-- wp:navigation-link {"label":"Contact","url":"#"} /--> <!-- /wp:navigation --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:spacer {"height":70} --> <div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer -->
Như bạn có thể thấy, tệp mẫu header.php cổ điển đã được thay thế bằng tệp .html chứa nhiều khối.
Bạn có thể lấy phiên bản đang tiến hành của chủ đề Twenty Twenty-One Blocks từ dự án thử nghiệm chủ đề trên Github.
Nếu bạn là nhà phát triển chủ đề, tài liệu chính thức cung cấp tất cả những gì bạn cần biết về các chủ đề dựa trên khối.
Nếu bạn muốn đóng góp vào Thử nghiệm Chỉnh sửa Toàn bộ Trang web, hãy gửi phản hồi của bạn tại đây.
Cách xây dựng chủ đề trẻ em trên Twenty Twenty-One
Các chủ đề WordPress mặc định là điểm khởi đầu tuyệt vời để tìm hiểu những kiến thức cơ bản về phát triển chủ đề và giúp bạn bắt đầu với việc xây dựng các chủ đề con tùy chỉnh.
Các chủ đề mặc định tuân theo các nguyên tắc của Tiêu chuẩn mã hóa WordPress chính thức và tuân thủ các tiêu chuẩn web.
Có nơi nào tốt hơn để học viết mã không?
Cần lưu trữ nhanh chóng, an toàn và thân thiện với nhà phát triển cho các trang web khách hàng của bạn? Kinsta được xây dựng với các nhà phát triển WordPress và cung cấp nhiều công cụ cũng như bảng điều khiển mạnh mẽ. Kiểm tra các kế hoạch của chúng tôi
Chủ đề con là một tính năng tuyệt vời của WordPress cho phép bạn tùy chỉnh bố cục, chức năng và cấu trúc của các trang của mình. Với các ví dụ sau, chúng ta sẽ đi sâu vào từng khía cạnh của tùy chỉnh chủ đề.
Thiết lập chủ đề con của bạn
Xây dựng một chủ đề con WordPress là một quy trình gồm 3 bước:
1. Tạo Thư mục Chủ đề Con
Tạo một thư mục mới trong wp-content / themes và đặt tên như bạn muốn. Nhưng hãy nhớ rằng nó phải là một tên duy nhất. Sổ tay Chủ đề Trẻ em khuyến nghị sử dụng cùng tên với chủ đề mẹ, với -child được thêm vào cuối.
Vì vậy, chúng tôi có thể đặt tên cho thư mục mới là hai mươi hai mươi một đứa trẻ .
2. Tạo tệp style.css
Bây giờ, hãy chuyển đến thư mục chủ đề con của bạn và tạo một tệp style.css mới bao gồm mã sau:
/* Theme Name: My Twenty Twenty One Child Theme Theme URI: https://example.com Description: A child theme for Twenty Twenty One. Author: Your Name Author URI: https://example.com/ Template: twentytwentyone Version: 1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */
Tiêu đề thông tin cho phép WordPress xử lý đúng chủ đề con của bạn.
- Tên chủ đề: Tên duy nhất cho chủ đề.
- URI chủ đề: Nơi người dùng có thể tìm thấy mã hoặc tài liệu cho chủ đề.
- Mô tả: Văn bản mô tả để giúp người dùng hiểu chủ đề hoạt động.
- Tác giả: Tên của bạn
- Tác giả URI: Trang web của tác giả.
- Mẫu: Thư mục lưu trữ chủ đề mẹ. Sử dụng tên thư mục chứ không phải tên chủ đề. Nếu không có dòng này, chủ đề của bạn sẽ không hoạt động như một chủ đề con.
- Phiên bản: Số phiên bản
- Giấy phép: Giấy phép, phải là GNU.
- URI giấy phép: Liên kết đến thông tin trên giấy phép.
Bên dưới văn bản đó, bạn có thể thêm các khối khai báo CSS của mình, vì tôi sẽ chỉ cho bạn trong giây lát.
3. Tạo một tệp functions.php
Với Twenty Twenty-One, bạn cũng sẽ cần một tệp functions.php . Vì vậy, hãy tạo của riêng bạn trong thư mục của chủ đề con, mở nó trong trình chỉnh sửa mã của bạn và thêm mã sau:
<?php /* enqueue scripts and style from parent theme */ function twentytwentyone_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');
Vì chủ đề Twenty Twenty-One sử dụng get_template_directory()
để tải biểu định kiểu của nó, bạn cần xếp hàng biểu định kiểu của chủ đề con bằng hành động wp_enqueue_scripts
.
Sau đó, lưu các tệp của bạn, mở bảng điều khiển WordPress của bạn, duyệt đến Giao diện -> Chủ đề và kích hoạt chủ đề con của Twenty Twenty-One.
Bây giờ hãy thêm các tùy chỉnh của chúng tôi.
Cách thêm kiểu tùy chỉnh
Khi nói đến tùy chỉnh bố cục của trang web WordPress, bạn có một số tùy chọn để thêm mã CSS tùy chỉnh của mình. Bảng điều khiển CSS bổ sung của Customizer có thể đủ cho những thay đổi nhỏ.
Nhưng một chủ đề con sẽ là một lựa chọn tốt hơn nếu bạn phải thực hiện các tùy chỉnh nâng cao hoặc bạn cần xuất mã của mình sang các trang web WordPress khác nhau.
Hãy thử với tùy chỉnh đơn giản: thay đổi ngăn xếp phông chữ mặc định.
Giả sử bạn muốn tải một ngăn xếp phông chữ khác hoặc chỉ cần thêm phông chữ yêu thích của bạn vào họ phông chữ Twenty Twenty-One mặc định.
Bạn làm nó như thế nào?
Ở đây tôi sẽ chỉ cho bạn cách thay đổi phông chữ mặc định cho tiêu đề H1, nhưng bạn có thể thay đổi họ phông chữ cho bất kỳ thành phần văn bản nào trên trang web của mình.
Đầu tiên, mở tệp style.css của Thenty Twenty-One và tìm khối CSS sau:
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { clear: both; font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); }
Như bạn có thể thấy, họ phông chữ cho tiêu đề được đặt trong biến --heading--font-family
.
Bây giờ, hãy chuyển đến khối :root{}
và tìm khai báo sau:
--heading--font-family: var(--global--font-primary);
--heading--font-family
phụ thuộc vào biến --global--font-primary
, được xác định ở trên cùng của khối :root{}
:
:root{ /* Font Family */ --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); ... }
Bây giờ chúng tôi biết những gì để thay đổi!
Sao chép khai báo --global--font-primary
từ biểu định kiểu của cha mẹ và dán vào style.css của con bạn. Sau đó, thay đổi tên và giá trị thuộc tính như hình dưới đây:
:root{ /* Font Family */ --global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif); --global--font-family-child: var(--global--font-primary-child); }
Khi bạn đã khai báo ngăn xếp phông chữ tùy chỉnh của mình, bạn có thể sử dụng nó ở bất cứ đâu bạn muốn trong biểu định kiểu của mình. Tiêu đề H1 trong ví dụ của chúng tôi:
h1, .h1 { font-family: var(--global--font-family-child); }
Lưu style.css của con bạn và tải lại trang. Bạn sẽ thấy Ubuntu là họ phông chữ mặc định mới cho tiêu đề trang của bạn.

Bây giờ bạn đã biết cách tùy chỉnh phong cách của Twenty Twenty-One với chủ đề con, chúng ta có thể khám phá các tính năng nâng cao hơn.
Cách thêm các mẫu khối mới
Trong ví dụ này, chúng tôi sẽ xây dựng một mẫu khối tùy chỉnh bao gồm một khối hai cột với hình ảnh tròn ở bên trái, tiêu đề H4 và một đoạn văn ở bên phải.
Bạn có thể tạo mẫu của mình trực tiếp trong Trình chỉnh sửa khối hoặc tùy chỉnh mã của mẫu khối hiện có.
Nếu bạn chọn xây dựng mẫu của mình trong Trình chỉnh sửa khối, bạn chỉ cần thêm các khối cần thiết vào bài đăng hoặc bản nháp trang, sau đó chuyển sang Trình chỉnh sửa mã và sao chép mã tương ứng.

Bây giờ chúng ta có thể đăng ký mẫu của mình trong tệp functions.php của chủ đề con:
add_action( 'init', function(){ register_block_pattern_category( 'custom-patterns', array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) ); register_block_pattern( 'twentytwentyone-child/custom-bio-pattern', array( 'title' => __( 'Author Bio', 'twentytwentyone-child' ), 'description' => _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ), 'content' => '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that's our promise. We don't settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->', 'categories' => array( 'custom-patterns' ), ) ); });
Đoạn mã trên đăng ký danh mục Mẫu tùy chỉnh và mẫu Tiểu sử tác giả .
Lưu ý mã chúng tôi đã sử dụng để xây dựng phần tử img
:
<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />
Hàm get_stylesheet_directory_uri()
cung cấp URI của thư mục chủ đề con (hình ảnh trước đó đã được thêm vào thư mục nội dung của chủ đề con).
Lưu các thay đổi của bạn và tạo một bài đăng hoặc trang mới.
Bây giờ bạn sẽ tìm thấy mẫu mới trong trình chèn khối.

Tùy chỉnh tệp mẫu
Nếu bạn muốn tạo tệp mẫu mới cho một kho lưu trữ cụ thể hoặc một bài đăng / trang duy nhất, bạn sẽ cần tạo một mẫu .php mới theo Hệ thống phân cấp mẫu WordPress.
Nhưng nếu bạn chỉ muốn chỉnh sửa một mẫu hiện có (hoặc một phần mẫu), bạn chỉ cần sao chép mẫu gốc từ chủ đề mẹ và dán nó vào vị trí tương ứng của chủ đề con của bạn (đọc thêm về chủ đề này trong hướng dẫn mở rộng của chúng tôi để chủ đề trẻ em).
Giả sử bạn muốn tùy chỉnh dòng chữ “Tự hào được cung cấp bởi WordPress”. Bạn có một số tùy chọn để xóa hoặc tùy chỉnh dòng đó. Đối với ví dụ của chúng tôi, hãy thay đổi nó theo cách thủ công.
Để làm như vậy, hãy sao chép tệp mẫu footer.php từ thư mục gốc và dán vào thư mục gốc của chủ đề con của bạn. Khi hoàn tất, hãy mở footer.php
của chủ đề con của bạn trong trình chỉnh sửa mã của bạn và tìm mã sau:
<div class="powered-by"> <?php printf( /* translators: %s: WordPress. */ esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ), '<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>' ); ?> </div><!-- .powered-by -->
Bây giờ, bạn có thể thực hiện các thay đổi của mình. Giả sử bạn muốn cấp tín dụng cho máy chủ web của mình, chỉ cần thay thế a
phần tử như được hiển thị bên dưới:
<div class="powered-by"> <?php printf( esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ), '<a href="https://kinsta.com/">Kinsta</a>' ); ?> </div><!-- .powered-by -->
Để xóa văn bản đó, chỉ cần nhận xét hoặc xóa phần tử div.powered-by
:
<!-- <div class="powered-by"> <?php printf( /* translators: %s: WordPress. */ esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ), '<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>' ); ?> </div> -->
Và đó là nó. Bây giờ, chuyển từ các ví dụ đơn giản ở trên, bạn có thể thực hiện các tùy chỉnh thú vị hơn và đưa trang web của bạn được hỗ trợ với chủ đề Twenty Twenty-One lên một cấp độ tiếp theo.
Bản tóm tắt
Chủ đề Twenty Twenty-One là nỗ lực thứ ba cho phép những người không có kỹ năng kỹ thuật nâng cao xây dựng trang web. Đó là một chủ đề WordPress tối giản, hoạt động tốt và dễ tiếp cận, cũng phù hợp với nhiều trường hợp sử dụng. Các trang web WordPress được cung cấp bởi chủ đề Twenty Twenty-One có đủ hình dạng và kích cỡ. Để tìm hiểu xem một chủ đề có đang sử dụng Twenty Twenty-One hay không, hãy xem công cụ phát hiện chủ đề WordPress tiện dụng của chúng tôi.
Được thiết kế với trình chỉnh sửa khối, chủ đề mặc định mới dễ dàng tùy chỉnh cho cả người dùng và nhà phát triển.
Bây giờ đến lượt bạn: Bạn đã cài đặt chủ đề Twenty Twenty-One chưa? Kinh nghiệm của bạn với nó là gì? Hãy cùng chia sẻ suy nghĩ của bạn tại phần bình luận!
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, di chuyển được hỗ trợ và bảo đảm hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.