Chủ đề mặc định của WordPress là gì?

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 khung vẽ trống có khả năng tùy biến cao. Giống như những người tiền nhiệm của nó, chủ đề mặc định mới sẽ chủ yếu dựa vào Trình chỉnh sửa khối để tạo trang

Trong bài đăng này, chúng tôi sẽ điểm 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 trang web WordPress với chủ đề con Twenty-One đơn giản

Sẳn sàng?

Bản xem trước chủ đề Twenty Twenty-One (Nguồn hình ảnh. Tạo lõi WordPress)

Cái nhìn đầu tiên về chủ đề Twenty-One WordPress

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 một 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 cấu trúc rõ ràng và được sắp xếp hợp lý của các thuộc tính tùy chỉnh CSS lồng nhau. Do sử dụng nhiều trong biểu định kiểu của chủ đề, nên việc xây dựng các chủ đề con trên Twenty Twenty-One rất nhanh chóng và dễ dàng

Cần phải hét lên ở đây. Kinsta thật tuyệt vời, tôi sử dụng nó cho trang web cá nhân của mình. Hỗ trợ nhanh chóng và xuất sắc, và máy chủ của họ là nhanh nhất cho WordPress

Phillip Stemann

Xem kế hoạch

Chủ đề hạt giống WordPress

Twenty Twenty-One là một chủ đề WordPress tối giản, dễ truy cập với bố cục một cộ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 phần lớn các hệ điều hành hỗ trợ và không yêu cầu thêm thời gian tải
• Thứ hai, chúng có vẻ ngoài trung tính, vì vậy chúng có thể dễ dàng kết hợp với bất kỳ loại thiết kế nào.
• Thứ ba, vì chúng không yêu cầu tải các tệp phông chữ bổ sung, 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 nhạt và hai sắc xám làm màu nền trước. Chủ đề cung cấp một số bảng màu pastel 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ẽ kết hợp 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 pastel?

Hai mươi mốt màu (Nguồn ảnh. Tạo lõi WordPress) Twenty Twenty-One là chủ đề mặc định mới của WordPress đi kèm với WordPress 5. 6. 👁‍🗨 Tìm hiểu tất cả các tính năng chính của nó trong hướng dẫn chuyên sâu này. Nhấp để Tweet

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 phiên bản đang hoàn thiện 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 vào lõi và bạn sẽ tìm thấy nó trong Thư mục chủ đề. Khi Hai Mươi Hai Mươi Một theo sau WordPress 5. 6 lịch phát hành, bạn có thể muốn lưu các ngày sau

• 20 Tháng mười 2020. phiên bản thử nghiệm 1
• 27 Tháng mười 2020. phiên bản thử nghiệm 2
• 2 Tháng mười một 2020. phiên bản thử nghiệm 3
• 12 Tháng mười một 2020. phiên bản thử nghiệm 4
• 17 Tháng mười một 2020. RC 1
• 1 tháng mười hai 2020. RC 2
• 7 Tháng mười hai 2020. Chạy khô để phát hành WordPress 5. 6
• 8 tháng mười hai 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

1. Nhận gói zip từ GitHub
2. Tải gói của bạn lên bản cài đặt phát triển của bạn từ bảng điều khiển WordPress hoặc qua SFTP
3. 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ủ đề
4. Vào Giao diện → Tùy chỉnh để cấu hình Twenty Twenty-One

Giờ đây, bạn có thể bắt đầu chạy thử nghiệm trên trang web dàn dựng hoặc trên môi trường cục bộ của mình

Quan trọng

Xin lưu ý rằng Twenty Twenty-One vẫn đang được phát triển tích cực, nhiều vấn đề chưa được khắc phục và một số tính năng có thể thay đổi trong tương lai

Số phát hành 20 21 số #620 trên Github

Chưa sẵn sàng để chạy thử nghiệm của bạn?

Đừng lo lắng, chúng tôi đã phân tích 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 khối và chủ đề 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 trên trình chỉnh sửa khối để tạo trang. Đề tài cũng nhằm. 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 thích ý tưởng khi +thực hiện. báo chí. org/khả năng tiếp cận/ đã đưa nó lên và sẽ đánh giá cao mọi hướng dẫn từ cộng đồng của chúng tôi và các chuyên gia để giúp thực hiện điều này

Chủ đề hỗ trợ một số lượng lớn các tính năng chủ đề và khối bao gồm các tính năng sau

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ỏ
• 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

• Kiểu khối mặc định
• phong cách biên tập
• Kiểu trình chỉnh sửa tối (nền tối)
• Căn chỉnh rộng
• Khối kích thước phông chữ
• Bảng màu khối
• Chặn cài đặt trước độ dốc
• Nội dung 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 (đã 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 Hai Mươi Hai Mươi Mốt

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

Hai mươi hai vị trí menu

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 phương tiện truyền thông xã hội được hỗ trợ

Menu mạng xã hội Twenty Twenty-One

Định dạng bài đă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 & Khả năng hiển thị trong cài đặt của trình chỉnh sửa

Twenty Twenty-One hỗ trợ chín định dạng bài đăng

Để 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 template-parts/excerpt và chọn mẫu. Ví dụ: mở hình ảnh trích đoạn. 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 đoạn 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ã này tự giải thích, nhưng chúng ta hãy xem xét kỹ hơn

• :root {
  	--global--color-beige: #e6d7c1;
  }
  
  body {
  	background-color: var(--global--color-beige);
  }

  5 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)

• :root {
  	--global--color-beige: #e6d7c1;
  }
  
  body {
  	background-color: var(--global--color-beige);
  }

  6 là một chức năng mẫu Twenty-Hai mươi mốt in phiên bản đầu tiên của một khối trong nội dung và sau đó tách ra

Vì vậy, nếu người xem trang web yêu cầu kho lưu trữ các bài đăng ở định dạng 'hình ảnh', 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à Logo 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 thấy cài đặt Logo tùy chỉnh trong bảng Nhận dạng Trang web

Nhận dạng trang web trong Twenty Twenty-One

Màn hình này bao gồm

• Biểu tượng tùy chỉnh
• Tiêu đề trang web
• khẩu hiệu
• Biểu tượng trang web

Kích thước phông chữ của trình chỉnh sửa

Twenty Twenty-One hỗ trợ các cỡ chữ sau

• Cực nhỏ – 16
• Nhỏ – 18
• Bình thường/Trung bình – 20
• Lớn – 24
• Cực lớn – 40
• Rất 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ị

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

7

Twenty Twenty-One hỗ trợ bảy cỡ chữ

Cài đặt màu

Trình tùy chỉnh chủ đề cung cấp bảng Màu sắc & Chế độ tối bao gồm hai tùy chọn

• Bộ chọn màu đơn giản với 10 bảng màu được xác định trước
• Một 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

Cài đặt Màu sắc & Chế độ tối trong Twenty Twenty-One

Màu nền mặc định là xanh nhạt (

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

8), 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 =

  :root {
  	--global--color-beige: #e6d7c1;
  }
  
  body {
  	background-color: var(--global--color-beige);
  }

  9;
• Xám đậm =
  0;
• Xám =
  1;
• Xanh lục =
  2;
• Màu xanh lam =
  3;
• Tím =
  4;
• Đỏ =
  5;
• Cam =
  6;
• Vàng =
  7;
• Trắng =
  8;

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 độ dốc cho các khối hỗ trợ tính năng này. Hình ảnh bên dưới hiển thị độ dốc mặc định trong cài đặt khối Cột

Tám cài đặt trước độ dốc trong cài đặt Màu của khối

Từ quan điểm khả năng truy cập, hỗ trợ Chế độ tối là một điểm mới tuyệt đối cho một chủ đề mặc định

Hãy tìm hiểu 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 #core-themes Slack, Mel Choyce-Dwan đã giới thiệu hỗ trợ Chế độ tối cho Twenty Twenty-One

Kích hoạt chế độ tối trong macOS

Lúc đầu, không rõ làm thế nào tính năng này có thể được triển khai trong Twenty Twenty-One nếu được thêm 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 plugin

Có năm tùy chọn có thể để 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)
• Kích hoạt hỗ trợ chế độ tối dưới dạng “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ưới dạng “luôn bật” và ngăn khách truy cập trang web bật/tắt chế độ tối
• Hoàn toàn 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 khả dụng 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 Tùy biến
• 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
• Khi bật Chế độ tối, người xem trang web có thể bật/tắt chế độ này 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ọ là gì

Chế độ tối được bật trong Trình tùy chỉnh và bị tắt trên trang chủ

Ngay cả khi Chế độ tối được coi là một cải tiến về khả năng truy cập, thì không rõ ràng là các trang trên 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 biểu trưng 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ụ: biểu trưng tối trên nền sáng có thể biến mất hoàn toàn nếu độc giả của bạn bật Chế độ tối ở bên cạnh họ. Những lo ngại tương tự liên quan đến độ sáng và độ tương phản của hình ảnh cũng như độ 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 dự định cung cấp hỗ trợ Chế độ tối cho trang web của mình, thì bạn cũng nên tính đến giao diện trang web của mình với nền tối

Chế độ tối được bật trong Trình tùy chỉnh và được bật trên trang chủ

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 đề về khả năng sử dụng của 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

Các 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 Lưu trữ và mở rộng menu Lưu trữ cục bộ

Tùy chọn người dùng Chế độ tối trong bộ nhớ cục bộ của Trình duyệt Brave

Thành thật mà nói, Dark Mode không phải là một điều phổ biến trong bối cảnh các trang web ngày nay. Tuy nhiên, vì một 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 khả năng truy cập 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ề nội dung 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

Kiểu và thuộc tính tùy chỉnh CSS

Như đã nói, đã đế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 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 thuộc tính tùy chỉnh CSS và điều này giúp nhà phát triển chủ đề và người dùng nâng cao dễ dàng tạo chủ đề con dựa trên chủ đề của Automattic

Điều tương tự cũng xảy ra với Hai Mươi Hai Mươi Mốt. Chủ đề mặc định mới đi kèm với bố cục cột đơn, 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 do Seedlet cung cấp và điều này làm cho Twenty Twenty-One trở thành một khung vẽ hoàn hảo để xây dựng các chủ đề con và các trang web tùy biến 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 một điểm nhấn màu cụ thể trong tài liệu của mình, bạn không cần chạy tìm kiếm toàn cầu để tìm ra bất kỳ sự xuất hiện nào của màu đó trong biểu định kiểu. Bạn chỉ cần đặt một giá trị thuộc tính khác trong khối

9

Thuộc tính tùy chỉnh CSS trong Twenty Twenty-One

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 soạn thảo mã của

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

CSS tùy chỉnh trong Công cụ tùy chỉnh Twenty Twenty-One

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ư minh họa trong hình bên dưới từ Tôi có thể sử dụng không

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Thuộc tính tùy chỉnh CSS được hỗ trợ bởi phần lớn các trình duyệt web hiện đạ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 Hai Mốt Mẫu Khối

Twenty Twenty-One cung cấp một số mẫu cho Trình chỉnh sửa khối. Trong a, chúng tôi đã xác định các mẫu khối dưới dạng 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à nhiều mẫu khác 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 inc/block-patterns. tập tin php. Hai mươi mẫu Twenty-One 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 duy nhất, đến các mẫu phức tạp hơn, chẳng hạn như Hình ảnh và Văn bản chồng chéo và Phương tiện và Tiêu đề bài viết văn bản

Phương tiện và Văn bản Bài viết Mô hình khối tiêu đề trong Twenty Twenty-One

Hiện tại theme cung cấp các mẫu sau

• Chữ lớn
• Khu vực liên kết. Một văn bản lớn theo sau là các mạng xã hội và liên kết địa chỉ email
• Tiêu đề bài báo và văn bản. Khối Phương tiện & Văn bản có hình ảnh lớn ở bên trái và tiêu đề ở bên phải. Tiêu đề được theo sau bởi một dấu phân cách và một đoạn mô tả
• Hình ảnh chồng chéo. Ba hình ảnh bên trong một khối cột chồng lên nhau
• Trưng bày hai hình ảnh. Khối Phương tiện & Văn bản có hình ảnh lớn ở bên trái và hình ảnh nhỏ hơn có 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 mục đầu tư. Một danh sách các dự án với hình ảnh thu nhỏ
• Thông tin liên lạc. Một khối có 3 cột hiển thị thông tin liên hệ và liên kết mạng xã hội

Mẫu khối hình ảnh chồng chéo trong Twenty Twenty-One

Sự sẵn có của rất nhiều mẫu khối rất tốt cho cả người dùng và nhà phát triển. Người dùng sẽ được phép thêm các khối mã phức tạp vào bài đăng và trang của họ một cách nhanh chóng và dễ dàng, 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 hai mươi mốt khối

Twenty Twenty-One Blocks là 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 diễn ra trên thử nghiệm Chỉnh sửa toàn bộ trang web, mang đến cho mọi người cơ hội tìm hiểu sâu về các tính năng FSE mới trước khi chúng trở thành một phần của WordPress Core

Không chắc là 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 kích hoạt Gutenberg và thử nghiệm Chỉnh sửa toàn bộ trang web. 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ột mục menu Trình chỉnh sửa trang web sẽ xuất hiện trong menu quản trị viên WordPress của bạn (bạn không cần phải kích hoạt thử nghiệm Chỉnh sửa toàn bộ trang web nữa)

Mục menu Trình chỉnh sửa trang web trong thử nghiệm Hai mươi mốt khối

Bây giờ, hãy 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 bộ trang web và bắt đầu chỉnh sửa bất kỳ thành phần nào trên trang bằng trình chỉnh sửa khối

Chỉnh sửa toàn bộ trang web trong 20 khối 21

Ở đây chúng ta sẽ không đi sâu vào nội dung kỹ thuật. Đủ để nói rằng các chủ đề cổ điển và chủ đề dựa trên khối khác nhau về cấu trúc

Hình ảnh bên dưới hiển thị nội dung của thư mục Twenty-One Blocks

Thư mục Hai mươi Hai mươi mốt Khối

Bạn sẽ nhận thấy chủ đề thử nghiệm. json và các thư mục block-templates và block-template-parts

Sự khác biệt chính giữa chủ đề WordPress truyền thống và chủ đề dựa trên khối là 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 chỉnh sửa mã của bạn. Bạn sẽ thấy đoạn mã sau

Như bạn có thể thấy, tiêu đề cổ điển. tệp mẫu php đã được thay thế bằng một. tệp html chứa một số khối

Bạn có thể lấy phiên bản đang thực hiện 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ề chủ đề dựa trên khối

Nếu bạn muốn đóng góp cho 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

Quan trọng

Twenty Twenty-One Blocks là một chủ đề thử nghiệm và không nên được sử dụng trong sản xuất. Chơi xung quanh với nó trong một môi trường dàn dựng

Cách xây dựng chủ đề trẻ em trên 20 21

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 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 cách viết mã không?

Cần lưu trữ nhanh, 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? . 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 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 theo ý muốn. Nhưng hãy nhớ rằng nó phải là một tên duy nhất. khuyên bạn nên sử dụng cùng tên với chủ đề gốc, với -child được thêm vào cuối

Vì vậy, chúng ta có thể đặt tên cho thư mục mới là Twentytwentyone-child

2. Tạo phong cách. tệp css

Bây giờ hãy chuyển đến thư mục chủ đề con của bạn và tạo một kiểu mới. css bao gồm đoạn mã sau

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

8

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ủ đề
• Sự miêu tả. Văn bản mô tả để giúp người dùng hiểu những gì chủ đề làm
• Tác giả. Tên của bạn
• URI tác giả. Trang web của tác giả
• Mẫu. Thư mục lưu trữ chủ đề gốc. Sử dụng tên thư mục chứ không phải tên chủ đề. 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, tôi sẽ chỉ cho bạn sau giây lát

3. Tạo một chức năng. tệp php

Với Twenty Twenty-One, bạn cũng sẽ cần một chức năng. tập tin php. Vì vậy, hãy tạo chủ đề 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 đoạn mã sau

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

9

Vì chủ đề Twenty Twenty-One sử dụng

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

80 để tải biểu định kiểu của nó, bạn cần liệt kê biểu định kiểu của chủ đề con bằng hành động

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

81

Sau đó, lưu 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 việc tùy chỉnh bố cục trang web WordPress của bạn, 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 Tùy biến 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, hãy mở phong cách của Thenty Twenty-One. css và tìm khối CSS sau

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

2

Như bạn có thể thấy, họ phông chữ cho tiêu đề được đặt trong biến

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

82

Bây giờ đi đến khối

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

83 và tìm khai báo sau

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

5

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

82 phụ thuộc vào biến

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

85, được xác định ở trên cùng của khối

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

83

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

9

Bây giờ chúng ta biết những gì để thay đổi

Sao chép khai báo

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

85 từ stylesheet của cha mẹ và dán nó vào style của con bạn. css. Sau đó, thay đổi tên thuộc tính và giá trị như hình bên dưới

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

1

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

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

2

Lưu phong cách của con bạn. css 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

Họ phông chữ mặc định vs. họ phông chữ tùy chỉnh trong Twenty Twenty-One

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 ta sẽ tạo 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à đ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 tạo 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 viết hoặc trang nháp, sau đó chuyển sang Trình chỉnh sửa mã và sao chép mã tương ứng

Một khối hai cột trong Code Editor

Bây giờ chúng ta có thể đăng ký mẫu của mình trong các chức năng của chủ đề con. tập tin php

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

0

Đ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ử

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

88

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

1

Hàm

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

89 cung cấp URI của thư mục chủ đề con (hình ảnh đã được thêm trước đó 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 bộ chèn khối

Một mẫu khối tùy chỉnh được thêm vào Twenty Twenty-One

Tùy chỉnh tệp mẫu

Nếu bạn muốn tạo một tệp mẫu mới cho một kho lưu trữ cụ thể hoặc một bài đăng/trang, bạn sẽ cần tạo một tệp mới. mẫu php theo WordPress

Nhưng nếu bạn chỉ muốn chỉnh sửa một mẫu hiện có (hoặc phần mẫu), bạn chỉ cần sao chép mẫu ban đầu từ chủ đề gốc và dán vào vị trí tương ứng của chủ đề con của bạn (đọc thêm về chủ đề này trong phần của chúng tôi)

Giả sử bạn muốn tùy chỉnh văn bản “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 đó. Ví dụ của chúng tôi, hãy thay đổi nó theo cách thủ công

Để làm như vậy, sao chép chân trang. php tệp mẫu từ thư mục của cha mẹ và dán nó vào thư mục gốc của chủ đề con của bạn. Khi hoàn tất, hãy mở

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

90 của chủ đề con bạn trong trình chỉnh sửa mã của bạn và tìm đoạn mã sau

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

2

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ủ lưu trữ web của mình, chỉ cần thay thế phần tử

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

91 như hình bên dưới

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

3

Để xóa văn bản đó, chỉ cần nhận xét hoặc xóa phần tử

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

92

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}

4

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 cung cấp chủ đề Twenty Twenty-One lên cấp độ tiếp theo

Kiểm tra tính năng mới trong chủ đề WordPress, từ Chế độ tối cho đến chủ đề dựa trên khối, trong phần tổng quan kỹ lưỡng này về Twenty Twenty-One 🌅Nhấp để Tweet

Tóm lược

Chủ đề Twenty Twenty-One là nỗ lực thứ ba nhằm 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ế dành cho 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ờ là lượt của bạn. Bạn đã cài đặt chủ đề Twenty Twenty-One chưa?

---

Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

• Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
• Hỗ trợ chuyên gia 24/7
• Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
• Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
• Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá 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 thấy sự phù hợp nhất của bạn

Chủ đề WordPress phổ biến nhất là gì?

Chủ đề trong WordPress là gì?