Как использовать макет сетки для отображения ваших сообщений WordPress

Вы хотите, чтобы ваши сообщения WordPress отображались в формате сетки?

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

Когда вам нужен макет сетки WordPress?

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

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

Используя редактор блоков, создайте макет сетки записей WordPress.

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

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

Этот блок включает цикл сообщений на вашу страницу.

Затем в верхней части блока выберите «Начать пустой», чтобы создать сетку постов.

В зависимости от типа информации, которую вы хотите отображать в сетке сообщений, у вас есть несколько вариантов.

Мы пойдем с «Изображение, дата и название», но вы можете делать все, что хотите.

Затем наведите курсор на изображение и выберите опцию «Сетка».

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

Отображаемая информация затем может быть настроена.

Во-первых, мы удалим нумерацию страниц внизу блока. Просто щелкните по нему и выберите меню параметров «Три точки».

Затем выберите «Удалить нумерацию страниц».

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

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

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

Просто щелкните миниатюру своего сообщения и переключите переключатель «Ссылка на сообщение» в правом поле параметров.

Затем повторите процесс для заголовка сообщения.

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

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

Затем повторите процесс для заголовка сообщения. Когда вы закончите, нажмите кнопку «Обновить» или «Опубликовать», чтобы опубликовать сетку сообщений. Теперь вы можете просмотреть новую сетку записей WordPress, посетив свой веб-сайт WordPress.

Добавив код в WordPress, вы можете создать макет сетки записей WordPress.

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

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

После этого вы можете начать добавлять код в 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(); ?>

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

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

 <?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, стиль которого мы добавим позже. Это также относится к «изображению публикации», которое необходимо заменить именем размера изображения, которое вы сделали ранее.

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

 <?php $counter++; endwhile; //Post Navigation code goes here endif; ?>

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

Вот как выглядит весь фрагмент кода.

 <div> <?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 на свой веб-сайт.

 #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 в виде сетки.