Как вывести записи WordPress в виде сетки

Хотели бы вы вывести записи WordPress в виде сетки? В большинстве тем WordPress не предусмотрен такой внешний вид блога. В сегодняшней статье мы покажем вам как вывести ваши WordPress записи в виде сетки в любой теме без единой строчки кода.

postgridlayoutexample[1]

Когда может понадобится внешний вид в виде сетки в WordPress?

Традиционное вертикальное расположение записей отлично подходит для большинства сайтов. Однако, такой внешний вид может занимать много места, особенно если вы выводите сразу множество записей.

Если вы используете произвольную главную страницу для WordPress, то вам может пригодится расположение записей в виде сетки для вывода недавних записей.

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

Темы WordPress, разработанные для журналов или фотосайтов уже давно используют сетку для вывода записей. Однако, если ваша тема не поддерживает такого вида, то придется создать свой шаблон, а это, в свою очередь, потребует от вас знаний PHP, HTML, CSS и т.п.

Давайте же посмотрим, как можно вывести записи WordPress в виде сетки в любой теме без написания кода.

Выводим записи WordPress в виде сетки

Первым делом вам необходимо будет установить и активировать плагин Post Grid.

После активации переходим на страницу Post Grid » New Post Grid для создания своей сетки записей.

newpostgrid[1]

Страница Post Grid разделена на две секции, представленными в табах. Сначала вам нужно нажать на вкладку ‘Query Post’.

Именно здесь вы определите, как плагин должен получать записи для отображения.

querypostsgrid[1]

Можно выбрать тип записей для вывода. По-умолчанию, он будет выводить ‘posts’, но можно указать и другие страницы при необходимости, или же выбрать произвольный тип записей.

Далее, нажимаем на вкладку layout. Здесь выбираем каким образом будет отображаться ваша сетка.

gridlayout[1]

Можно указать расположение контента. В плагине есть несколько шаблонов на выбор: flat, flat center, flat right и т.д. Вы можете нажать на кнопку редактирования, после чего откроется редактор, где вы самостоятельно сможете создать layout.

Или же, выбираем один из 5 доступных скинов. Некоторые из них содержат крутые визуальные эффекты, позволяющие вращать и трансформировать изображение, когда пользователь наводит курсор мыши на миниатюру записи.

Теперь нажимаем на вкладку ‘Layout Settings’. Настройки по-умолчанию подойдут для большинства сайтов, но если сетка не подходит к вашей странице, то здесь вы сможете исправить ситуацию.

gridlayoutsettings[1]

Наконец, нажимаем на вкладку navigation и выбираем стиль пагинации.

Теперь, когда настройка окончена, жмем на кнопку publish. Ваша сетка записей станет доступна, и вы сможете добавить ее в то место страницы, где нужно отобразить post grid.

Добавляем сетку записей на страницу WordPress

В редакторе сетки записей вы увидите вкладку shortcodes. Нажатие на нее выведет шорткод.

gridshortcode[1]

Скопируйте шорткод и перейдите в редактирование страницы WordPress, на которую нужно добавить сетку записей. Вставьте шорткод в область контента в то место, где нужно отобразить элемент.

Далее, сохраните страницу нажатием на кнопку Обновить. Теперь переходим на свой сайт, чтобы увидеть сетку записей в действии.

postgridpreview[1]

Также можно использовать PHP код, если вы хотите добавить сетку записей прямо в файлы вашей темы WordPress (речь идет о файлах шаблона, куда можно будет добавить вывод сетки напрямую в код).

Вот и все, мы надеемся, что эта статья помогла вам вывести ваши записи WordPress в виде сетки. Также вам может быть интересная наша статья о том, как добавить колонки в записи WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 5.0/5 (11 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top