Trình chỉnh sửa khối Gutenberg cho WordPress đã thay đổi cách chúng tôi tạo nội dung trong CMS. Nhưng nó cũng đã mở ra một số cơ hội mới ở mặt trước.
Một trong những phát triển thú vị nhất trong lĩnh vực này là khả năng thêm các khối "đầy đủ" hoặc "rộng" vào một trang hoặc bài đăng. Tính năng này cho phép khối Gutenberg đi chệch khỏi độ rộng mặc định của nội dung của một chủ đề, điều gần như không thể có trong trình chỉnh sửa cổ điển cũ.
Có nhiều cách sử dụng khác nhau cho một khối với định hướng đầy đủ hoặc rộng. Ví dụ: bạn có thể giới thiệu các phần trang mới với một bảng có chiều rộng đầy đủ che phủ văn bản trên nền hình ảnh. Hoặc bạn có thể sử dụng chức năng để tạo khu vực kêu gọi hành động không thể bỏ qua. Hầu như tất cả các loại nội dung có thể được thêm vào đây, đó là một phần của sự hấp dẫn.
Tuy nhiên, có một hạn chế nhỏ: chủ đề của bạn phải hỗ trợ các khối đầy đủ, được căn chỉnh. May mắn là nó dễ dàng. Dưới đây là hướng dẫn nhanh về cách thêm hỗ trợ căn chỉnh toàn diện cho bố cục WordPress của bạn và cách thiết kế các khối bằng CSS.
Thêm hỗ trợ chủ đề
Bước đầu tiên là thêm một dòng mã vào tệp function.php trong chủ đề hoạt động của bạn. Tải xuống tệp này từ trang web của bạn nếu bạn chưa thực hiện (tìm thấy trong / wp nội dung / chủ đề / thư mục chủ đề / thư mục của bạn và thay thế tên thư mục hiện tại bằng chủ đề của bạn. Sau đó sao chép và dán các đoạn PHP sau:
add_theme_support( 'align-wide' );
Sau khi thêm mã, tải lại tệp Hàm.php đã sửa đổi vào thư mục có chủ đề của bạn.
Mã này có nghĩa là bạn muốn kích hoạt các khối với căn chỉnh đầy đủ và rộng. Nếu bạn đăng nhập vào WordPress ngay bây giờ và vào Trình chỉnh sửa trang / bài đăng, bạn nên lưu ý rằng một số (không phải tất cả) các khối có các tùy chọn nhắm mục tiêu mới "Đầy đủ" và "Rộng".
Bạn đang sử dụng một chủ đề thương mại hoặc tiêu chuẩn?
Nếu bạn đang sử dụng một chủ đề WordPress hoặc doanh nghiệp tiêu chuẩn, hãy chắc chắn sử dụng một chủ đề phụ. Điều này cho phép bạn thay đổi chủ đề mà không mất chúng sau khi cập nhật.
Kiểu khối cơ bản
Thiết kế một khối rộng hoặc hoàn toàn phù hợp có thể là một chút khó khăn. Và có một số kỹ thuật khác nhau. Cái được sử dụng ở đây xuất phát từ ví dụ này trong CodePen.
@media screen and (min-width: 960px) {
.alignwide, .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
}Xin lưu ý rằng chúng tôi sử dụng truy vấn phương tiện CSS để nhúng kiểu này chỉ khi kích thước màn hình là 960 pixel trở lên. Điều này là do chúng tôi không nhất thiết muốn hiệu ứng này trên màn hình nhỏ hơn.
Trong trường hợp này, chúng tôi sử dụng cùng một kiểu cho cả hai cài đặt khối. Tất nhiên, rất có thể thiết kế chúng riêng biệt để mọi người có một cái nhìn độc đáo về mặt trước.
Cũng lưu ý một nhược điểm có thể xảy ra: Với kỹ thuật này, một thanh cuộn ngang có thể xuất hiện trên một số thiết kế. Điều này có thể được sửa bằng CSS bằng cách thêm phần sau vào phần tử body:
body {
overflow-x: hidden;
}Kết quả
Khi chúng tôi đã kích hoạt tính năng khóa đầy đủ và chặt chẽ, đã đến lúc thử nghiệm mọi thứ. Ở đây chúng tôi đã tạo ra một trang với một khối bìa với định hướng rộng.
Nếu bạn nhìn vào mặt trước của trang web, khối bìa hoạt động như dự định. Phần tử kéo dài toàn bộ chiều rộng của trang, trong khi nội dung bên dưới vẫn nằm trong chiều rộng chủ đề mặc định là 960 pixel.
Nếu bạn chỉ sử dụng các định dạng tiêu chuẩn, mặt hàng này thực sự nổi bật. Vẫn còn nhiều cách để làm nhiều hơn với thiết kế.
Bằng cách thêm các lớp CSS bổ sung hoặc nhắm mục tiêu các khối cụ thể, chúng tôi có sẵn rất nhiều tùy chọn thiết kế. Những thứ như hình nền, khung hoặc đường dẫn cắt có thể là duy nhất Note Thêm vào.
Mở rộng với các chủ đề WordPress
Trong bản cài đặt tiêu chuẩn, Gutenberg không cung cấp tất cả các tính năng của plugin Trình tạo trang. Nhưng sự liên kết của các khối cho phép chúng ta vào khu vực này.
Điều này là tốt bởi vì thiết kế web đã phát triển kể từ ngày Classic Editor xuất hiện lần đầu tiên. Tại thời điểm đó, các trang web sử dụng một số lượng lớn nội dung thống nhất mọi lúc.
Ngày nay, các phần có chiều rộng đầy đủ là một trong những lựa chọn thiết kế phổ biến và hữu ích nhất. Khả năng sử dụng điều này mà không cần plugin hoặc hack chủ đề làm cho WordPress trở nên tốt hơn cho các nhà thiết kế.
