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ố khả năng mới ở mặt trước là tốt.
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 bổ sung khả năng cho khối Gutenberg đi chệch khỏi độ rộng mặc định của nội dung của một chủ đề, một điều gần như không thể có trong Trình chỉnh sửa Cổ điển cũ.
Có một số cách sử dụng có thể cho một khối được căn chỉnh đầy đủ hoặc chiều rộng. Ví dụ, bạn có thể giới thiệu các phần trang mới với khối bìa 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ể tận dụng tính năng này để tạo khu vực gọi hành động không thể bỏ qua. Hầu như bất kỳ 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 cảnh báo nhỏ: Chủ đề của bạn phải hỗ trợ các khối đầy đủ, được căn chỉnh. May mắn thay, nó khá dễ dàng để làm. Sau đây là hướng dẫn nhanh để thêm hỗ trợ căn chỉnh rộng cho chủ đề WordPress của bạn và thiết kế các khối thông qua CSS.
Thêm hỗ trợ chủ đề
Bước đầu tiên là thêm một dòng mã vào tệp tin.php của chủ đề đang hoạt động. Tải xuống tệp này từ trang web của bạn nếu bạn chưa có (có thể tìm thấy nó trong thư mục / wp-content / Themes / yourtheme /, thay thế "yourtheme" cho tên thư mục thực tế). Sau đó sao chép và dán đoạn mã PHP sau:
add_theme_support( 'align-wide' );
Khi bạn đã thêm mã, tải tệp Chức năng đã sửa đổi trở lại vào thư mục của chủ đề.
Mã này sẽ có nghĩa là bạn muốn kích hoạt các khối được căn chỉnh đầy đủ và chiều rộng. Bây giờ khi bạn đăng nhập vào WordPress và vào trình chỉnh sửa trang / bài đăng, bạn sẽ nhận thấy rằng một số khối (không phải tất cả) có các tùy chọn căn chỉnh mới "Đầy đủ" và "Rộng".
Bạn có sử dụng một chủ đề thương mại hoặc mặc định?
Nếu bạn đang sử dụng một chủ đề kinh doanh hoặc mặc định của WordPress, bạn sẽ muốn đảm bảo rằng bạn đang sử dụng một chủ đề con. Điều này sẽ cho phép bạn thay đổi chủ đề mà không có khả nă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 trôi nổi xung quanh. Cái chúng ta sẽ 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 đang sử dụng truy vấn phương tiện CSS để chỉ nhúng kiểu này 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ác kiểu giống nhau cho cả hai cách sắp xếp khối. Tất nhiên, hoàn toàn có thể thiết kế chúng riêng biệt để mỗi cái mang đến một cái nhìn độc đáo ở phía trước.
Cũng đáng chú ý một nhược điểm có thể xảy ra: một thanh cuộn ngang có thể xuất hiện trong một số thiết kế khi sử dụng kỹ thuật này. Điều đó có thể được sửa chữa thông qua CSS với phần sau được thêm vào phần tử body:
body {
overflow-x: hidden;
}Kết quả
Bây giờ chúng tôi đã kích hoạt khả năng khối đầy đủ và phù hợp, đã đế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 sự liên kết rộng.
Khi 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 mặc định là 960 pixel của chủ đề.
Chỉ sử dụng các kiểu mặc định, yếu tố này thực sự nổi bật. Tuy nhiên, có rất nhiều cơ hội để 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ó một kho đầy đủ các khả năng thiết kế theo ý của chúng tôi. Những thứ như hình nền, đường viền hoặc đường cắt có thể thêm một liên lạc độc đáo.
Mở rộng với các chủ đề WordPress
Trong bản cài đặt mặc định, Gutenberg không cung cấp tất cả các tính năng của plugin xây dựng trang. Nhưng sự sắp xếp của các khối cho phép chúng ta mạo hiểm vào lãnh thổ đó.
Điều đó tốt, bởi vì thiết kế web đã phát triển kể từ ngày Trình soạn thảo cổ điển xuất hiện lần đầu tiên. Trước đó, các trang web có xu hướng sử dụng độ rộng đồng đều của nội dung 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 tận dụng điều này mà không cần plugin hay hack chủ đề khiến WordPress trở nên tuyệt vời hơn cho các nhà thiết kế.
