Как отобразить посты WordPress в сетчатом макете

Хотите ли вы отображать посты WordPress в виде сетки??

Сетчатый макет дает вам больше гибкости при отображении постов в WordPress. Это может быть полезно при создании пользовательских страниц.

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

Когда вам нужна сетчатая компоновка для WordPress?

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

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

Это даст вам больше пространства для добавления других элементов на вашу главную страницу.

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

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

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

• Создание макета сетки с помощью редактора блоков WordPress
• Создайте макет сетки с помощью плагина Post Grid
• Создайте макет сетки с помощью конструктора страниц SeedProd
• Создание макета сетки путем добавления кода в WordPress

.com/wp-content/uploads/2016/02/add-query-loop-block.png» alt=»Добавить блок цикла запросов» width=»680″ height=»229″ />

Этот блок добавляет контур вашего поста на вашу страницу.

Затем нажмите на опцию ‘Start Blank’ в верхней части блока, чтобы создать сетку постов.

Это дает несколько различных вариантов в зависимости от типа информации, которую вы хотите отобразить в сетке постов.

Мы выберем вариант ‘Image, Date, & Title’, но вы можете выбрать любой другой.

После этого наведите курсор на изображение и выберите опцию «Вид сетки».

Это превратит ваш список в сетку постов.

Далее вы можете настроить информацию, которую хотите отображать.

Сначала мы собираемся удалить пагинацию в нижней части блока. Для этого просто щелкните по нему и выберите меню опций «Три точки».

Затем нажмите на «Удалить пагинацию».

Это автоматически удалит элемент из блока.

Вы можете удалить даты из постов тем же способом или оставить больше информации о постах для ваших посетителей.

Далее мы добавим ссылки на миниатюру и заголовок поста.

Просто нажмите на миниатюру вашего поста и включите переключатель «Ссылка на пост» в правой панели опций.

Затем сделайте то же самое для заголовка вашего поста.

Как только вы закончите, нажмите кнопку «Обновить» или «Опубликовать», чтобы сделать вашу сетку постов живой.

Теперь вы можете посетить свой сайт WordPress, чтобы увидеть свою новую сетку постов WordPress.

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

Способ 2. Создание макета сетки постов WordPress с помощью плагина Post Grid

Этот метод предлагает простой способ добавления настраиваемой сетки постов, которую вы можете добавить в любое место на вашем сайте.

Первое, что вам нужно сделать, это установить и активировать плагин Post Grid. Для более подробной информации смотрите наше руководство о том, как установить плагин WordPress.

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

Затем дайте название вашей сетке постов. Эта кнопка не появится нигде на вашей странице, она просто поможет вам запомнить.

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

Во-первых, вам нужно нажать на вкладку ‘Query Post’. Здесь вы определите типы постов, которые вы хотите отобразить в поле «Типы постов».

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

После этого вам нужно перейти на вкладку «Макеты».

Затем нажмите кнопку «Создать макет. Блок откроется в новом окне.

Вы должны назвать свой макет. Затем нажмите на опцию ‘General’, и откроется список тегов.

Эти теги — информация, которая будет отображаться в вашей сетке постов.

Выберем опцию ‘Эскиз со ссылкой’ и опцию ‘Заголовок поста со ссылкой’.

Затем нажмите ‘Опубликовать’ или ‘Обновить’, чтобы сохранить макет.

Теперь вернитесь к редактору сетки постов в предыдущей вкладке, и там будет доступен новый вариант макета, который вы можете выбрать.

Просто нажмите на новый макет в разделе «Макеты элементов» в нижней части экрана.

Затем перейдите на вкладку «Стиль элемента». Здесь вы можете установить размер вашей сетки.

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

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

Теперь перейдите на вкладку ‘Shortcode’ и скопируйте шорткод в поле ‘Post Grid Shortcode’.

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

Затем найдите «Shortcode» и выберите блок «Shortcode».

Затем вставьте в поле шорткод, который вы скопировали ранее.

Затем нажмите кнопку «Обновить» или «Опубликовать».

Теперь вы можете просмотреть свою страницу, чтобы увидеть макет сетки постов WordPress в реальном времени.

Метод 3. Создание макета сетки постов WordPress с помощью плагина SeedProd Page Builder

Другой способ создания макета сетки постов — использование плагина SeedProd page builder. Это лучший конструктор страниц WordPress, используемый более чем 1 миллионом сайтов.

SeedProd поможет вам легко создавать пользовательские страницы и даже полностью пользовательские темы WordPress без написания какого-либо кода. Вы можете использовать плагин для создания любого типа страниц, таких как страницы 404, страницы скорого появления, целевые страницы и т.д.

В конструкторе SeedProd, когда вы настраиваете свою страницу, просто нажмите на плюсовую кнопку «Добавить раздел» в любом месте страницы.

Появится возможность добавить новый блок.

Далее, перетащите блок ‘Posts’ на вашу страницу, и он автоматически добавит список постов на вашу страницу.

Теперь вы можете настроить этот блок с помощью левой панели опций.

Сначала прокрутите вниз до раздела «Макет». Здесь вы можете установить количество колонок для сетки записей вашего блога и включить переключатели «Показывать изображение особенности» и «Показывать заголовок».

Далее прокрутите вниз до тумблера ‘Show Excerpt’ и тумблера ‘Show Read More’ и выключите их, чтобы создать простой макет сетки постов блога.

Если вы хотите настроить цветовую схему, текст и многое другое, перейдите на вкладку «Дополнительно» в верхней части левой колонки.

Затем щелкните на выпадающем меню «Текст» и внесите изменения.

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

Как только вы закончите, нажмите кнопку «Сохранить» и выберите пункт «Опубликовать» в верхней части страницы, чтобы изменения вступили в силу.

Теперь вы можете просмотреть новую сетку постов на своем сайте.

Метод 4. Создание макета сетки постов WordPress путем добавления кода в WordPress

Этот метод требует некоторого базового понимания того, как добавлять код в WordPress. Если вы не делали этого раньше, то смотрите наше руководство о том, как копировать и вставлять код в WordPress.

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

Далее вам нужно найти нужный файл темы WordPress, в который вы добавите фрагмент кода. Например, вы можете добавить его к вашему синглу.php, так что он отображается в нижней части всех ваших постов.

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

Чтобы узнать больше, смотрите нашу шпаргалку по иерархии шаблонов WordPress, которая поможет найти нужный файл шаблона темы.

Как только вы это сделаете, вы можете начать добавлять код в WordPress. Поскольку фрагмент кода довольно длинный, мы разобьем его по разделам.

Сначала добавьте следующий фрагмент кода в файл шаблона вашей темы.

Этот фрагмент кода настраивает запрос цикла постов. При желании вы можете изменить переменную ‘posts_per_page’, чтобы отображать больше постов на странице.

Затем добавьте следующий фрагмент кода в файл шаблона вашей темы.

» title=»»>