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 ở frontend.
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 "toàn bộ" 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ó một số cách sử dụng có thể cho một khối đầ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 khối bìa đầ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 một khu vực cuộc gọi không thể di chuyển. 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 cảnh báo nhỏ: Chủ đề của bạn phải hỗ trợ toàn bộ, các khối được nhắm mục tiêu. May mắn thay, nó khá dễ để làm. Sau đây là hướng dẫn nhanh để thêm hỗ trợ điều 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 Feature.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 có (có thể tìm thấy nó trong / wp-content / Themes / yourtheme / thư mục và thay thế "yourtheme" bằng tên thư mục thực tế). Sau đó sao chép và dán các đoạn PHP sau:
add_theme_support ('align-wide');
Sau khi bạn thêm mã, bạn 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 có nghĩa là bạn muốn kích hoạt các khối được điều chỉnh toàn bộ và chiều rộng. 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 điều chỉnh "Đầy đủ" và "Rộng" mới.
Bạn có 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 tiêu chuẩn WordPress hoặc một chủ đề kinh doanh, hãy chắc chắn rằng bạn đang sử dụng một chủ đề con. Điều này 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.
Màn hình @media và (min-width: 960px) {.align Worldwide, .alignfull {width: 100vw; chiều rộng tối đa: 100vw; lề trái: calc (50% – 50vw); }}
Lưu ý rằng chúng tôi sử dụng câu hỏi 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. Đó là bởi vì 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 điều chỉnh khối. Tất nhiên, hoàn toàn có thể thiết kế chúng riêng biệt để mỗi người cung cấp một cái nhìn độc đáo ở phía trước.
Cũng đáng lưu ý 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. Nó 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:
cơ thể {tràn-x: ẩn; }
các kết quả
Bây giờ chúng tôi đã kích hoạt chức năng khối đầy đủ và nhắm mục tiêu, đã đế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 một điều chỉnh rộng.
Khi bạn nhìn vào mặt trước của trang web, khối bảo vệ hoạt động như dự định. Phần tử trải dài trên 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 tiêu chuẩn 960 pixel của chủ đề.
Chỉ với phong cách tiêu chuẩn, yếu tố này thực sự nổi bật. Vẫn còn 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 tùy chọn thiết kế hoàn chỉnh 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ể mang lại một liên lạc độc đá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 xây dựng trang. Nhưng các điều chỉnh chặn cho phép chúng tôi mạo hiểm vào lãnh thổ đó.
Điều này là tốt, vì thiết kế web đã phát triển kể từ ngày Classic Editor lần đầu tiên xuất hiện. Vào thời điểm đó, các trang web được sử dụng để sử dụng chiều rộng đồng đều của nội dung mọi lúc.
Ngày nay, các bộ 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ế.
