Как создать сетку миниатюр сообщений в темах WordPress

При создании макетов веб-сайтов WordPress, вам когда-нибудь нужно было создавать сетку сообщений? Грид-макет отлично подходит для медиацентричных сайтов, таких как галерея WordPress или других сайтов типа витрина. Тематические картины, такие как Genesis, уже имеют встроенную систему петель сетки. Однако, если вы пытаетесь отобразить сетку в своей пользовательской теме WordPress, мы здесь, чтобы помочь вам. В этой статье мы покажем вам, как создать цикл сетки миниатюр постов в вашей теме WordPress.

Примечание: вы должны хорошо понимать CSS и то, как работает цикл WordPress.

Прежде чем мы начнем, давайте посмотрим на то, что мы пытаемся достичь:

Если вы посмотрите, посты на этой странице будут отображаться в сетке. На столбах есть граница с левой стороны, но не с правой. При обычном цикле сообщений все сообщения следуют одному и тому же стилю; поэтому он будет иметь правую границу на обоих постах, что будет выглядеть странно. Также обратите внимание, что пространство довольно симметрично. Что опять-таки невозможно при обычном цикле сделать что-то подобное. Теперь, когда вы видите, чего мы пытаемся достичь, давайте посмотрим, как этого добиться.

Первое, что вы должны сделать, это убедиться, что в вашей теме включены миниатюры сообщений WordPress. Вы также должны подумать о том, как вы хотите изменить размер ваших изображений WordPress, потому что они вам понадобятся.

После настройки миниатюр и размеров давайте начнем. Давайте настроим наши запросы в цикле: