Cách tạo màn hình lưới hình thu nhỏ bài đăng trong các chủ đề WordPress

Khi tạo bố cục trang web WordPress, bạn đã bao giờ có nhu cầu tạo lưới bài chưa? Bố cục lưới hoạt động tuyệt vời cho các trang web tập trung vào phương tiện truyền thông như thư viện WordPress của chúng tôi hoặc trang web loại giới thiệu khác. Các khung chủ đề như Genesis đã có sistema Lưới Loop dựng sẵn. Tuy nhiên, nếu bạn đang cố gắng hiển thị lưới trong chủ đề WordPress tùy chỉnh của mình, thì chúng tôi sẵn sàng giúp bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo hiển thị vòng lặp lưới hình thu nhỏ trong chủ đề WordPress của bạn.

Lưu ý: Bạn phải có hiểu biết công bằng về CSS và cách thức hoạt động của vòng lặp WordPress.

Trước khi bắt đầu, chúng ta hãy xem những gì chúng ta đang cố gắng đạt được:

Hiển thị bài lưới

Nếu bạn nhìn, các bài viết trên trang này được hiển thị trong một lưới. Có một đường viền trên các bài viết ở phía bên trái, nhưng không phải ở phía bên phải. Với một vòng lặp bài viết bình thường, tất cả các bài đăng theo cùng một phong cách, vì vậy bạn sẽ có một đường viền bên phải trên cả hai bài viết trông sẽ lạ. Cũng lưu ý rằng không gian khá đối xứng. Mà một lần nữa là không thể với vòng lặp bình thường để làm một cái gì đó như thế này. Bây giờ bạn có thể thấy những gì chúng tôi đang cố gắng đạt được, hãy xem làm thế nào để đạt được nó.

Điều đầu tiên cần làm là đảm bảo chủ đề của bạn có hình thu nhỏ cho các bài đăng WordPress được bật. Bạn cũng nên suy nghĩ về cách bạn muốn thay đổi kích thước hình ảnh WordPress của mình vì bạn sẽ cần nó.

Khi bạn đã thiết lập hình thu nhỏ và kích thước, hãy bắt đầu với điều này. Chúng tôi sẽ cấu hình các truy vấn lặp của chúng tôi: