Tích hợp bố cục lưới CSS đơn giản vào WordPress
Có được một bố cục lưới nhất quán, vững chắc vào WordPress có thể là một quá trình không đau nếu bạn sử dụng đúng công cụ. Trong hướng dẫn này, bạn sẽ tìm hiểu từng bước làm thế nào để nhanh chóng thiết lập một hệ thống lưới trong WordPress rất nhẹ và dễ sửa đổi. Chúng tôi sẽ giữ cho thiết kế đơn giản để chúng tôi có thể tập trung vào việc sử dụng các công cụ phù hợp để thiết lập lưới của bạn, nhưng hãy nhớ rằng bạn có thể tự tạo kiểu cho lưới nếu cần.
Tôi sẽ sử dụng một chủ đề Pool mặc định trong WordPress cho hướng dẫn này chỉ để cho bạn thấy cách tiếp cận "bắt đầu từ đầu" để có được các lưới vừa phải.
Bước 1: Xác định chiều rộng lưới của bạn
Trước khi bắt đầu, bạn cần xác định lưới của bạn sẽ rộng đến mức nào. Đối với trang web WordPress của tôi, tôi có thể thấy rằng chiều rộng của cột chính của tôi là 450px bằng cách sử dụng tính năng "Kiểm tra phần tử" của Google Chrome khi bạn nhấp chuột phải vào một đối tượng. Đây là cách nhanh nhất tôi tìm thấy có thể nhanh chóng xác định chiều rộng và chiều cao của một đối tượng trên trang web.
Bước 2: Thiết kế lưới
Thay vì tự tay xây dựng một lưới, điều mà bạn có thể làm nếu muốn, tôi khuyên bạn nên sử dụng một trong nhiều công cụ tạo lưới có sẵn. Đối với hướng dẫn này, tôi sẽ sử dụng trình tạo lưới bằng MindPlay. Đó là một máy phát điện lưới rất đơn giản và nhẹ.
Tôi muốn hiển thị ba cột và tôi cần đảm bảo các pixel của mình ở mức 450. Vì vậy, điều chỉnh cho phù hợp và bỏ qua tab "Xuất". Chúng tôi sẽ không đi qua * kiểu chữ Các tính năng trong hướng dẫn này, mặc dù điều này chắc chắn đáng để bạn tự khám phá.
Trong tab Xuất, sử dụng khung "Biểu định kiểu" trên cùng và cuộn xuống cho đến khi bạn thấy nhận xét "Lưới". Bạn sẽ sao chép mọi thứ từ bình luận xuống cuối khung này. Nó chỉ nên có khoảng 30 dòng .
Bước 3: Cập nhật Biểu định kiểu WordPress của bạn
Đăng nhập vào trang web WordPress của bạn và đi đến Giao diện> Trình chỉnh sửa.
Ở phía dưới bên phải của bảng Editor, bạn sẽ thấy một Styles.css tập tin (hoặc một cái gì đó tương tự, tùy thuộc vào chủ đề của bạn). Nhấn vào đây để mở nó lên.
Cuộn xuống cuối trang tính và dán phần trước của bạn từ MindPlay.dk:
Bước 4: Triển khai lưới
Để sử dụng lưới, bạn chỉ cần tạo một Đây là một số mẫu trước mà bạn có thể dán vào vị trí để bắt đầu: Cột bên trái Cột giữa Cột bên phải Đây là những gì nó trông giống như trong WordPress: Lưu / Cập nhật trang và xem kết quả. Trong trường hợp của tôi, đây là trang chủ của trang web: Như bạn có thể thấy từ ảnh chụp màn hình ở trên, chúng tôi có ba cột của chúng tôi và mọi thứ đều đúng nơi chúng tôi mong đợi. Bạn có thể thêm bao nhiêu hàng tùy thích bằng cách bắt đầu bằng cách sau Cột bên trái Cột giữa Cột bên phải Hàng trái # 2 Hàng giữa số 2 Hàng bên phải số 2 Đây là cách nó trông cho đến nay: Bây giờ bạn có thể thêm hình ảnh hoặc văn bản và tạo kiểu cho mỗi hàng chính xác như bạn muốn. Bạn có thể gặp sự cố trong một số trình duyệt khi bạn có nhiều hơn một hàng. Để giải quyết vấn đề này, bạn sẽ cần đặt lề ở bên phải ( Điều này sẽ đảm bảo Nếu bạn muốn tạo kiểu nền cho toàn bộ lưới, bạn sẽ cần điều chỉnh chiều cao của Tùy thuộc vào phiên bản của trình tạo lưới MindPlay.dk bạn sử dụng, trang web có thể không tạo ra ".grid-m4" và thay vào đó bạn sẽ cần sử dụng Cột bên trái Cột giữa Cột bên phải Đây là kết quả cuối cùng của tôi trông như thế nào với hai hàng và một số đồ họa đơn giản: Hãy vui vẻ thiết kế và nhớ rằng bạn có thể tạo kiểu cho lưới của mình theo bất kỳ cách nào bạn muốn. Ghi chú của biên tập viên: Bài này được viết bởi Tara Hornor cho Hongkiat.com. Tara có bằng tiếng Anh và viết về tiếp thị, quảng cáo, thương hiệu, thiết kế đồ họa và xuất bản máy tính để bàn. Ngoài sự nghiệp viết lách, Tara còn thích dành thời gian cho chồng và hai con..
:
Mẹo tinh chỉnh
.lưới-m4, trong trường hợp của chúng tôi) đến chiều cao bạn muốn mỗi hàng được. Nếu bạn đang sử dụng hình ảnh có kích thước 250px x 250px, thì hãy tạo chiều cao hàng trong .lưới-m4 là 250px:.lưới-m4 float: trái; chiều rộng: 20px; chiều cao: 250px;
.lưới-m1 ở phía bên trái của hàng tiếp theo không nổi lên hàng phía trên nó..lưới điện lớp học. Vì vậy, giả sử bạn có bốn hàng trên lưới của mình, mỗi hàng có kích thước 250px. Bạn sẽ muốn thêm chiều cao cho lớp .grid ở 1000px để mọi thành phần kiểu dáng bạn thêm sẽ bao trùm toàn bộ thiết kế lưới..lưới chiều rộng: 450px; chiều cao: 1000px; lề: tự động;
.lưới-m1 sau .lưới-c3 để đảm bảo lưới của bạn mở rộng đến đúng nơi:Kết quả cuối cùng
