При выборе подходящего шаблона для вашего сайта, например, лендинга на WordPress, многие пользователи сталкиваются с задачей отображения списка постов на главной странице. Скажем, вам подошла тема, но вывод записей осуществляется одним элементом в строке, а вам хотелось бы видеть по 2 или 3 записи одновременно.
Некоторые темы предоставляют возможность настраивать макет вывода записей в своих опциях, однако такие функции чаще встречаются в платных версиях. А что делать, если вы остановили свой выбор на бесплатном шаблоне?
Если вы используете тему Root, то в ней уже имеется встроенная опция для настройки отображения постов. Чтобы изменить макет, перейдите в админ-панели в раздел Внешний вид -> Настроить -> Блоки и расположение -> Главная, затем в блоке Карточки постов на главной выберите подходящий вам вариант.
Если ваша тема не поддерживает подобной функциональности, вы можете воспользоваться плагинами, которые обеспечивают вывод постов в сеточном (grid) формате. Например, такие плагины, как WP Grid Builder или Post Grid, позволяют с легкостью создать сеточный макет для ваших записей. Установив один из них, вы сможете настроить количество колонок и стиль отображения постов.
Кроме того, многие пользователи используют кастомные CSS стили, чтобы изменить отображение записей. Если вы знакомы с основами CSS, вы можете добавить свои стили в раздел Внешний вид -> Настроить -> Дополнительные стили. Убедитесь, что вы используете правильные классы и селекторы, чтобы не нарушить другие элементы страницы.
Также можно рассмотреть возможность создания дочерней темы, где вы сможете адаптировать шаблоны файлов для вывода постов согласно вашим требованиям. Это даст вам больше контроля без риска потерять изменения при обновлении основной темы.
Не забудьте протестировать ваш сайт на мобильных устройствах, чтобы убедиться, что новый макет выглядит хорошо и адаптируется к различным размерам экранов.
Плагин Content Views – Post Grid & List for WordPress
Существующий бесплатный плагин Content Views – Post Grid & List for WordPress предлагает гибкие настройки для отображения списка постов в сеточном формате. С помощью этого инструмента вы можете настроить вывод в сетке, задав необходимое количество элементов в строке, а также оформить списки в виде вертикального прокручивающегося списка.
В первую очередь необходимо установить и активировать плагин. После этого перейдите в админ-панели в раздел Content Views -> Все виды.
Теперь вы находитесь на странице с перечнем макетов, где есть возможность создать любое нужное количество с различными заданными параметрами. Давайте приступим к созданию первого макета. Для этого необходимо кликнуть по кнопке Добавить новую.
Сначала требуется ввести название макета в поле Заголовок. Затем в поле Тип содержимого укажите, к каким элементам сайта будет применяться макет. Выберем Запись. В параметре Предел можно указать, сколько элементов отобразится на странице. Например, зададим значение 10.
На следующем этапе следует перейти к вкладке Настройки отображения. В секции Макет выбираем тип макета (например, Сетка). Параметр Элементов в строке позволяет задать количество отображаемых записей в одной строке. Установим значение 3. В последующих блоках можно настроить отображение для мобильных устройств и выбрать, какие элементы записей будут показаны (миниатюра, заголовок, текст, автор, дата и др.).
Чтобы сохранить все настройки, необходимо нажать на кнопку Сохранить. Вы увидите, что в верхней части страницы появилась строка с информацией о способах вставки созданного макета в тему вашего сайта.
В данном случае нам предлагается два метода. Первый позволяет выводить записи через виджет, а второй включает вставку специального кода в тему. Мы воспользуемся вторым вариантом, применяя популярную бесплатную тему.
Как видно, в данной теме посты отображаются по одному на главной странице, составляя список. Для реализации нашего макета требуется вставить указанный код в файл index.php темы GeneratePress. Для этого следует зайти в админпанель вашего сайта и перейти в раздел Внешний вид -> Редактор. В поле Выберите тему для изменения выберите GeneratePress и нажмите кнопку Выбрать. Затем в списке Файлы темы найдите Основной шаблон (index.php).
В большом текстовом поле с кодом найдите строки с вызовом функции get_template_part():
while ( have_posts() ) : the_post(); /* Подключите шаблон, специфичный для формата поста. * Если вы хотите переопределить это в дочерней теме, то добавьте файл * с названием content-___.php (где ___ — это название формата поста), и он будет использован вместо этого. */ get_template_part( 'content', get_post_format() ); endwhile; generate_content_nav( 'nav-below' );
и замените их на
echo do_shortcode("[pt_view
В результате код файла index.php примет следующий вид:
После внесенных изменений нажмите кнопку Обновить файл.
Теперь главная страница вашего сайта будет выглядеть следующим образом:
Нравятся нестандартные решения для отображения карточек постов? Обратите внимание на тему JournalX для WordPress. Она обеспечивает быструю и стабильную загрузку постов, а также привлекательное отображение записей на главной странице с карточками различных форматов.
Для более детальной настройки отображения постов вы можете использовать дополнительные параметры плагина, такие как фильтры контента, сортировка записей по дате или популярности, а также возможность добавления пользовательских полей в вывод. Также стоит отметить, что плагин поддерживает интеграцию с популярными конструкторами страниц, такими как Elementor и Beaver Builder, что позволяет еще больше расширить возможности настройки.
Преимущества использования сеточного макета
Удобство адаптации под разные устройства стоит на первом месте. Адаптивный веб-дизайн позволяет структуре автоматически подстраиваться под размеры экранов. Это особенно полезно для пользователей мобильных устройств, которые составляют значительную часть аудитории. Рекомендую использовать медиазапросы для управления стилями в зависимости от размеров экрана.
Важно помнить, что порядок элементов на странице влияет на взаимодействие пользователей с ресурсом.
Сеточные системы обеспечивают высокую гибкость для разработчиков. Каждый элемент может занимать определенное количество ячеек, что позволяет легко менять его размер и положение. Например, использование CSS Grid может выглядеть так:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
background: #ccc;
}
Скорость загрузки страниц также повышается. Оптимизированные сети сокращают количество необходимого кода и уменьшают объем ресурсов, загружаемых пользователем. В результате страницы оптимизируются для быстрого отображения на любых устройствах.
Сеточная структура облегчает реализацию изменений. Не потребуется переписывать весь код – достаточно изменить несколько строк в CSS или HTML. Это дает разработчикам свободу экспериментов и улучшений.
Помните! Четко продуманный макет увеличивает шансы на успех сайта в поисковых системах.
Итак, использование сеточных структур в веб-дизайне позволяет улучшить визуальную организацию, адаптивность, гибкость и производительность. Подумайте о преимуществах, которые вы можете добыть для своего проекта, внедрив прямолинейные и ясные сеточные решения.