Вы хотите отображать сообщения WordPress в виде сетки?
Макет сетки дает вам больше гибкости при отображении ваших сообщений в WordPress. Это может быть полезно при создании пользовательских страниц.
В этой статье мы покажем вам, как легко отображать ваши сообщения WordPress в виде сетки в любом месте вашего сайта.
Когда вам нужен макет сетки для WordPress?
Каждая тема WordPress поддерживает традиционную вертикальную компоновку сообщений в блогах, и это хорошо работает для большинства типов веб-сайтов. Однако такой макет может занимать много места, особенно если у вас много постов.
Если вы создаете настраиваемую домашнюю страницу для своего сайта, вы можете использовать макет сетки для отображения последних сообщений.
Это даст вам больше места для добавления других элементов на вашу домашнюю страницу.
Кроме того, ваша сетка сообщений будет выделять избранные изображения, поэтому она визуально привлекательна и кликабельна. Вы также можете использовать сетку сообщений, чтобы продемонстрировать свое творческое портфолио и другие типы пользовательского контента.
Многие темы журналов и фотографии уже используют макет на основе сетки для отображения постов. Однако, если ваша тема не поддерживает эту функцию, вам необходимо ее добавить.
С учетом сказанного, давайте покажем вам, как отображать ваши сообщения WordPress в виде сетки. Просто используйте быстрые ссылки ниже, чтобы сразу перейти к методу, который вы хотите использовать.
- Создайте макет сетки с помощью редактора блоков WordPress.
- Создайте макет сетки с помощью плагина Post Grid
- Создайте макет сетки с помощью конструктора страниц SeedProd.
- Создайте макет сетки, добавив код в WordPress
Метод 1. Создайте макет сетки записей WordPress с помощью редактора блоков
Этот метод позволяет вам просто отображать ваши сообщения и эскизы в макете сетки сообщений с помощью редактора блоков WordPress. Есть встроенный блок сетки постов, который позволяет создавать собственную сетку.
Для этого откройте страницу, которую вы хотите отредактировать, затем нажмите кнопку «Плюс» для добавления блока и найдите «Цикл запроса», затем щелкните блок, чтобы добавить его.
Этот блок добавляет цикл сообщений на вашу страницу.
Затем нажмите «Начать пустой» в верхней части блока, чтобы создать сетку постов.
Это дает несколько различных вариантов в зависимости от типа информации, которую вы хотите отображать в своей сетке сообщений.
Мы выберем вариант «Изображение, дата и название», но вы можете выбрать все, что вам нравится.
После этого наведите курсор на изображение и выберите опцию «Сетка».
Это превращает ваш список в сетку постов.
Далее вы можете настроить отображаемую информацию.
Во-первых, мы удалим нумерацию страниц в нижней части блока. Для этого просто щелкните по нему и выберите меню параметров «Три точки».
Затем нажмите «Удалить нумерацию страниц».
Это автоматически удалит элемент из блока.
Вы можете удалить даты из сообщений таким же образом или оставить дополнительную информацию для ваших посетителей.
Далее мы добавим ссылки как к миниатюре сообщения, так и к заголовку сообщения.
Просто нажмите на миниатюру публикации и включите переключатель «Ссылка на публикацию» на правой панели параметров.
Затем проделайте то же самое с заголовком вашего поста.
Когда вы закончите, нажмите кнопку «Обновить» или «Опубликовать», чтобы активировать сетку сообщений.
Теперь вы можете посетить свой веб-сайт WordPress, чтобы увидеть новую сетку сообщений WordPress.
Вы можете добавить этот блок на любую страницу или запись. Если вы хотите использовать это как страницу архива блога, вы можете посмотреть наше руководство о том, как создать отдельную страницу для постов блога в WordPress.
Способ 2. Создайте макет сетки сообщений WordPress с помощью плагина сетки сообщений
Этот метод предлагает простой способ добавить настраиваемую сетку сообщений, которую вы можете добавить в любое место на своем веб-сайте.
Первое, что вам нужно сделать, это установить и активировать Почтовая сетка плагин. Для получения дополнительной информации см. Наше руководство по установке плагина WordPress.
После активации вам необходимо посетить Опубликовать сетку » Добавить новый чтобы создать свою первую сетку сообщений.
Затем дайте вашей сетке сообщений название. Это не будет отображаться нигде на вашей странице, это просто поможет вам запомнить.
Ниже вы найдете настройки сетки сообщений, разделенные на разные разделы с несколькими вкладками.
Во-первых, вам нужно нажать на вкладку «Запрос сообщения». Здесь вы определите типы сообщений, которые вы хотите отображать в поле «Типы сообщений».
По умолчанию он будет отображать только сообщения, но вы можете добавлять страницы и даже собственные типы сообщений.
После этого вам нужно нажать на вкладку «Макеты».
Затем нажмите кнопку «Создать макет». Это откроется в новом окне.
Вам нужно назвать свой макет. Затем нажмите «Общие», и откроется список тегов.
Эти теги представляют собой информацию, которая будет отображаться в вашей сетке сообщений.
Мы выберем опцию «Миниатюра со ссылкой» и опцию «Опубликовать заголовок со ссылкой».
Затем нажмите «Опубликовать» или «Обновить», чтобы сохранить макет.
Теперь вернитесь к исходному редактору сетки сообщений на предыдущей вкладке, и там будет доступен новый вариант макета, который вы можете выбрать.
Просто нажмите на новый макет в разделе «Макеты элементов» в нижней части экрана.
Затем перейдите на вкладку «Стиль элемента». Здесь вы можете установить размер вашей сетки.
Настройки по умолчанию должны работать для большинства сайтов, но если нет, то вы можете изменить их здесь.
Когда вы закончите, нажмите кнопку «Опубликовать» в верхней части страницы, и ваша сетка будет готова для добавления в ваш блог WordPress.
Теперь вам нужно щелкнуть вкладку «Шорткод», а затем скопировать шорткод в поле «Шорткод публикации сетки».
После этого откройте страницу, на которой вы хотите отобразить список сообщений, и нажмите кнопку «Плюс» для добавления блока.
Затем найдите «Шорткод» и выберите блок «Шорткод».
Затем вставьте в поле шорткод, который вы скопировали ранее.
Затем нажмите кнопку «Обновить» или «Опубликовать».
Теперь вы можете просмотреть свою страницу, чтобы увидеть макет сетки записей WordPress в реальном времени.
Способ 3. Создайте макет сетки записей WordPress с помощью плагина SeedProd Page Builder.
Другой способ создать макет сетки записей — использовать SeedProd плагин конструктора страниц. Это лучший конструктор страниц WordPress с перетаскиванием на рынке, который используется более чем 1 миллионом веб-сайтов.
SeedProd помогает вам легко создавать пользовательские страницы и даже полностью настраиваемые темы WordPress без написания кода. Вы можете использовать плагин для создания любых страниц, например страниц 404, скоро выходящих страниц, целевых страниц и многого другого.
Чтобы узнать больше, ознакомьтесь с нашим руководством о том, как создать пользовательскую страницу в WordPress.
В конструкторе SeedProd, когда вы настраиваете свою страницу, просто нажмите кнопку «Добавить раздел» в любом месте страницы.
Это вызовет возможность добавить новый блок.
Затем перетащите блок «Сообщения» на свою страницу, и он автоматически добавит список сообщений на вашу страницу.
Теперь вы можете настроить этот блок с помощью левой панели параметров.
Сначала прокрутите вниз до раздела «Макет». Здесь вы можете установить количество столбцов для сетки сообщений в блоге и включить переключатели «Показать изображение функции» и «Показать заголовок».
Затем прокрутите вниз до переключателей «Показать отрывок» и «Показать дополнительные сведения» и отключите их, чтобы создать простой макет сетки сообщений в блоге.
Если вы хотите настроить цветовую схему, текст и т. д., щелкните вкладку «Дополнительно» в верхней части левого столбца.
Затем щелкните раскрывающийся список «Текст» и внесите изменения.
Вы можете продолжать настраивать сетку своей страницы и постов в блоге по своему усмотрению.
Когда вы закончите, нажмите кнопку «Сохранить» и выберите раскрывающийся список «Опубликовать» в верхней части страницы, чтобы изменения вступили в силу.
Теперь вы можете просмотреть новую сетку сообщений на своем веб-сайте.
Способ 4. Создайте макет сетки записей WordPress, добавив код в WordPress
Этот метод требует некоторого базового понимания того, как добавлять код в WordPress. Если вы еще этого не сделали, посмотрите наше руководство о том, как копировать и вставлять код в WordPress.
Прежде чем добавлять код, вам нужно создать новый размер изображения, который вы будете использовать для своей сетки постов. Чтобы узнать больше, ознакомьтесь с нашим руководством о том, как создавать дополнительные размеры изображений в WordPress.
Затем вам нужно найти правильный файл темы WordPress, в который вы добавите фрагмент кода. Например, вы можете добавить его в файл single.php, чтобы он отображался внизу всех ваших сообщений.
Вы также можете создать собственный шаблон страницы и использовать его для отображения макета сетки сообщений блога с миниатюрами.
Чтобы узнать больше, ознакомьтесь с нашей памяткой по иерархии шаблонов WordPress, которая поможет найти правильный файл шаблона темы.
Как только вы это сделаете, вы можете начать добавлять код в WordPress. Поскольку фрагмент кода довольно длинный, мы разберем его по частям.
Сначала добавьте следующий фрагмент кода в файл шаблона темы.
<?php
$counter = 1; //start counter
$grids = 2; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) : while(have_posts()) : the_post();
?>
Этот фрагмент кода настраивает запрос циклического сообщения. Вы можете изменить переменную «posts_per_page», чтобы отображать больше сообщений на странице, если хотите.
Затем добавьте следующий фрагмент кода в файл шаблона темы.
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
Этот фрагмент кода создает два столбца для наших сообщений и отображает заголовок и изображение сообщения. Он также создает класс CSS, стиль которого мы покажем вам позже.
Он также ссылается на «postimage», поэтому вам нужно изменить его на имя размера изображения, которое вы создали ранее.
После этого добавьте в конец следующий фрагмент кода.
<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>
Этот фрагмент кода просто закрывает цикл. Это также дает возможность добавить навигацию по записям, но большинство владельцев веб-сайтов используют для этого другой плагин, поэтому мы не включили его, чтобы избежать конфликтов кода.
Вот как в целом выглядит окончательный фрагмент кода.
<div id="gridcontainer">
<?php
$counter = 1; //start counter
$grids = 2; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>
Теперь вам нужно добавить следующий CSS на свой сайт, чтобы убедиться, что ваша сетка сообщений отображается красиво.
Если вы еще этого не сделали, ознакомьтесь с нашим руководством о том, как легко добавить пользовательский CSS на свой сайт WordPress.
#gridcontainer{
margin: 20px 0;
width: 100%;
}
#gridcontainer h2 a{
color: #77787a;
font-size: 13px;
}
#gridcontainer .griditemleft{
float: left;
width: 278px;
margin: 0 40px 40px 0;
}
#gridcontainer .griditemright{
float: left;
width: 278px;
}
#gridcontainer .postimage{
margin: 0 0 10px 0;
}
Вы можете изменить различные селекторы CSS, чтобы увидеть, как они изменяют различные элементы вашего цикла сообщений.
Мы надеемся, что эта статья помогла вам научиться отображать записи WordPress в виде сетки. Вы также можете ознакомиться с нашим руководством о том, как выбрать лучшее программное обеспечение для веб-дизайна, и нашим экспертным выбором лучшего программного обеспечения для чата для малого бизнеса.
Если вам понравилась эта статья, то, пожалуйста, подпишитесь на нашу Канал YouTube для видеоуроков WordPress. Вы также можете найти нас на Твиттер а также Фейсбук.
Сообщение «Как отображать ваши сообщения WordPress в виде сетки» впервые появилось на WPBeginner.
