Giao diện khối WordPress dành cho nhà phát triển, được xây dựng trên theme.json
Canvas là một giao diện WordPress kèm plugin đồng hành, và toàn bộ đều là giao diện khối. Các mẫu là mẫu khối, kiểu dáng lấy từ theme.json, và những gì trình chỉnh sửa lưu vào cơ sở dữ liệu là cùng một mã khối mà bất kỳ giao diện khối nào khác cũng đọc được. Không có gì ở đây phụ thuộc vào trình tạo trang.
Cập nhật
Một giao diện khối, được chỉnh sửa tại nơi WordPress lưu trữ nó
Giao diện chứa các mẫu, phần mẫu và biến thể kiểu dáng; plugin chứa thư viện khối, các trình tạo, biểu mẫu, lớp SEO và hiệu năng, cùng trình nhập demo. Mẫu và kiểu toàn cục vẫn nằm trong Trình chỉnh sửa trang, nên không có gì về trang web bị ẩn trong một bảng cài đặt riêng của chúng tôi.
- 173 mẫu khối và 5 phần mẫu, tất cả đều có thể chỉnh sửa trong Trình chỉnh sửa trang
- 4 biến thể kiểu dáng, bao gồm tối và nửa đêm, có thể chuyển đổi trong Trình chỉnh sửa trang
- Màu sắc và kiểu chữ được áp dụng qua theme.json, nên trình chỉnh sửa hiển thị cùng kiểu chữ với phần hiển thị trên trang web.
- 183 mẫu khối, được chèn dưới dạng một bản sao mã đánh dấu một lần
- Trang mở ra với toàn bộ mẫu được hiển thị xung quanh nội dung bạn đang chỉnh sửa
Những gì được lưu trong cơ sở dữ liệu là mã khối
Lý do nên chọn giao diện khối không nằm ở danh sách tính năng. Mà là thứ bạn còn giữ trong tay sau năm năm.
Không dùng định dạng độc quyền
Canvas chỉnh sửa các khối WordPress tiêu chuẩn, không có định dạng riêng, nên bài viết và trang vẫn giữ nội dung nếu sau này bạn đổi giao diện. Không cần ghi nhớ shortcode và cũng không có chế độ xem mã để mở.
Cài đặt, không phải đoạn mã
Mọi thứ khách truy cập nhìn thấy đều có thể điều chỉnh từ bảng cài đặt khối. Khi một bản demo cần thứ mà khối không thể thể hiện, khối sẽ có thêm cài đặt đó, còn trang không bao giờ có thêm HTML thô.
Bảng nâng cao trên mọi khối
Hoạt ảnh, điều kiện hiển thị, class tùy chỉnh, thuộc tính tùy chỉnh và CSS tùy chỉnh theo từng khối được thêm vào mọi khối trong trình chỉnh sửa, bao gồm cả khối lõi và khối của bên thứ ba.
Tài nguyên đi theo trang
Mỗi trang chỉ tải CSS và JavaScript của các khối có trong trang đó, nên trang bảng giá sẽ không bao giờ tải script slider. 35 tối ưu hóa bổ sung khác chỉ là công tắc bật tắt, không cần cài thêm plugin.
Đang chuyển từ giao diện khác? Elementor và Divi xây dựng trang bằng các trình chỉnh sửa riêng, nên bố cục sẽ mất theo khi trình dựng bị gỡ bỏ: xem nội dung của một trang Elementor được giữ lại như thế nào khi chuyển đi và Divi Builder so sánh ra sao. Kadence và GeneratePress cũng xây dựng trong trình chỉnh sửa khối, với các khối của chúng nằm trong plugin miễn phí (So sánh Canvas với Kadence, So sánh Canvas với GeneratePress), còn Blocksy giữ trình tạo header trong Customizer.
Trình tạo header và footer được hiển thị dưới dạng phần mẫu
Header, footer, thanh trên cùng, mega menu, bảng bên và tiêu đề trang là các bản ghi được xây dựng từ khối, và chúng hiển thị ở phía người dùng thông qua các phần mẫu riêng của giao diện. Phần Header hiển thị header được gán cho trang; phần Footer hiển thị bản ghi footer đã gán. Nhờ vậy, Trình chỉnh sửa trang vẫn nhìn thấy chúng và cài đặt khối luôn giống nhau ở mọi nơi khác.
- 22 khối header và 94 tùy chọn header nằm bên dưới trình tạo header
- Gán header cho toàn bộ website hoặc ghi đè trên một trang riêng, và làm tương tự với footer, thanh trên cùng, mega menu, bảng bên và tiêu đề trang
- Hero và slider cũng là bản ghi, được đặt bởi một khối slot nằm trong mẫu
- Cả hai khối slot đều hiển thị trong vùng chỉnh sửa, nên trang mở ra với phần mà khách truy cập sẽ thấy
24 khối cửa hàng và 18 mẫu cửa hàng
WooCommerce là tùy chọn, và khi có mặt, WooCommerce được hiển thị bằng khối và mẫu, không cần ghi đè mẫu nào phải đồng bộ.
Khối cửa hàng
Khối cho trang sản phẩm, lưới cửa hàng, giỏ hàng và thanh toán, cùng ô chọn màu và thêm vào giỏ hàng mà không tải lại trang.
Mẫu cửa hàng
Mẫu cho các màn hình cửa hàng, sản phẩm, giỏ hàng, thanh toán và tài khoản, được chỉnh sửa trong Trình chỉnh sửa trang như mọi mẫu khác.
Bản demo cửa hàng
21 trong số 88 bản demo website được nhập dưới dạng cửa hàng hoàn chỉnh, với sản phẩm, danh mục, thuộc tính và thanh toán đã sẵn sàng.
Hai trong số 21 bản demo cửa hàng, chạy bằng các khối và mẫu dành cho cửa hàng.
Trình hướng dẫn cài đặt sẽ tạo một giao diện con, nếu bạn muốn
Chỉ tạo child theme nếu bạn định sửa trực tiếp các tệp mẫu của Canvas, vì đó là cách giữ cho những chỉnh sửa như vậy an toàn khi cập nhật. Trình hướng dẫn cài đặt đưa ra tùy chọn này ở một bước riêng trước khi nhập bản demo, ghi child theme vào thư mục giao diện và kích hoạt nó, và sau đó trang web của bạn trông vẫn y như cũ. Hầu hết trang web không bao giờ cần đến nó, vì các lý do thường gặp giờ đã được xử lý bằng cài đặt.
- CSS tùy chỉnh toàn bộ website, cùng JavaScript tùy chỉnh cho phần head và footer, trong mục Misc của Tùy chọn giao diện
- CSS tùy chỉnh cho từng khối, viết dưới dạng cặp thuộc tính và giá trị, không có bộ chọn bao quanh
- Thuộc tính tùy chỉnh cho từng khối, mỗi dòng một cặp khóa và giá trị, hỗ trợ thuộc tính data và aria
- Quy tắc kiểu chữ tùy chỉnh cho bất kỳ bộ chọn nào bạn đặt tên, trong mục Typography
- Đăng ký một gói biểu tượng riêng qua cùng giao diện mà 4 gói biểu tượng tích hợp sẵn đang sử dụng
- Xuất toàn bộ cấu hình Tùy chọn giao diện thành một tệp và nhập vào website tiếp theo
Canvas cần những gì, và nó làm gì ngay khi bắt đầu
Các ngưỡng tối thiểu là ngưỡng thật, không phải gợi ý. Canvas tự kiểm tra chúng trên máy chủ lưu trữ của bạn, nên lỗi nhập dữ liệu sẽ không bao giờ là điều bạn biết đến đầu tiên.
- Canvas Core không bao giờ là tệp tải xuống riêng: nó được cài đặt từ bên trong WordPress sau khi giấy phép được kích hoạt, nên bạn không cần quản lý việc ghép phiên bản
- Bản cập nhật xuất hiện trên màn hình cập nhật của WordPress, kèm chế độ bảo trì, bản sao lưu tạm thời và khả năng khôi phục từ chính WordPress
- Cập nhật tự động chỉ áp dụng cho các bản vá, được bật theo mặc định với công tắc để tắt, và một bản phát hành có thay đổi mẫu bạn đã tùy chỉnh sẽ nêu rõ điều đó
- Màn hình Health Check chạy các yêu cầu máy chủ trên host thực tế của bạn và báo cáo những gì cần chú ý, đồng thời các kiểm tra tương tự cũng xuất hiện trong Site Health của WordPress
- Mọi chuỗi đều có thể dịch, với các mẫu bản dịch cho giao diện và plugin được tạo lại theo mỗi bản phát hành, cùng tệp cấu hình WPML trong plugin
- SEO kỹ thuật, sitemap XML và 16 loại schema được tạo từ nội dung của bạn tại thời điểm hiển thị
Các câu hỏi kỹ thuật, được giải đáp
Năm điều mà lập trình viên kiểm tra trước khi bàn giao dự án, kể cả điều Canvas không làm.
Canvas là giao diện theo khối hay giao diện dùng trình dựng trang?
Canvas là một giao diện WordPress được xây hoàn toàn bằng khối, thứ mà WordPress gọi là block theme. Mẫu là các mẫu block của WordPress, template part vẫn là template part, màu sắc và kiểu chữ được quản lý qua theme.json, và mọi thứ được chỉnh sửa trong trình chỉnh sửa khối và Trình chỉnh sửa trang đi kèm WordPress. Không cần cài đặt trình xây dựng riêng, không cần học thêm một trình chỉnh sửa khác và không cần gia hạn đăng ký trình xây dựng nào.
Điều gì xảy ra với mã đánh dấu nếu sau này website đổi giao diện?
Nội dung vẫn là markup khối tiêu chuẩn của WordPress, vì đó là những gì Canvas lưu. Một khối Canvas mà giao diện khác không nhận diện sẽ ngừng hiển thị thiết kế của nó, nhưng tiêu đề, đoạn văn, hình ảnh và danh sách là các khối lõi và được đọc bình thường ở bất kỳ đâu. Không có gì được lưu dưới dạng shortcode hay định dạng bố cục độc quyền.
Header và footer thực sự hiển thị ở đâu?
Thông qua các phần mẫu mà Canvas đăng ký, gồm 5 phần: Header, Footer, Page Title, Sidebar và Sidebar Alt. Phần Header hiển thị bản ghi header được gán cho trang, phần Footer hiển thị bản ghi footer được gán, còn phần Page Title hiển thị bất cứ nội dung nào mà cài đặt tiêu đề trang của trang đó xác định. Các phần này chỉ là hạ tầng nền; thiết kế nằm ở bản ghi bạn xây dựng từ 22 khối header.
Bạn có cần giao diện con không?
Chỉ cần thiết nếu bạn định trực tiếp chỉnh sửa các tệp mẫu của Canvas, đó là điều mà giao diện con giúp bảo vệ khỏi các bản cập nhật. Trình hướng dẫn cài đặt sẽ tạo một giao diện con cho bạn ở bước Child Theme (tùy chọn) và chuyển trang sang giao diện này, hoặc bạn có thể tự sao chép thư mục giao diện con đi kèm Canvas vào thư mục themes của mình. Hầu hết các trang không bao giờ cần đến nó: Tùy chọn giao diện chứa các cài đặt toàn trang, Custom CSS và Custom Attributes riêng cho từng khối đảm nhận cấp khối, còn các trường Custom CSS và JavaScript toàn trang nằm trong mục Misc của Tùy chọn giao diện.
Canvas có phải là giao diện viết từ phải sang trái không?
Có, mọi tệp stylesheet của Canvas đều có phiên bản đảo ngược từ phải sang trái, và WordPress tự động tải phiên bản đó khi website chạy bằng tiếng Ả Rập, tiếng Do Thái, tiếng Farsi hoặc bất kỳ ngôn ngữ đọc từ phải sang trái nào khác. 88 trong số 88 bản demo được kiểm tra ở chế độ từ phải sang trái trước khi phát hành, nên menu, lưới và biểu mẫu đều nằm đúng phía. Dịch thuật là một vấn đề riêng và cũng đã hoàn chỉnh: cả hai phần của sản phẩm đều đi kèm tệp mẫu bản dịch, và tệp cấu hình WPML được cung cấp cùng plugin.
Một giao diện dạng khối mà bạn có thể bàn giao cho bất kỳ ai
Canvas được xây dựng trên trình chỉnh sửa mà WordPress cung cấp, lưu đánh dấu khối tiêu chuẩn và giữ các mẫu trong Trình chỉnh sửa trang. Bạn xây dựng website cho khách hàng? Hãy đọc các trang agency và freelancer.