Отображение постов и страниц WordPress в виде сетки (Grid Layout)

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

Смотрите также:

  • Используем скрипт jQuery Masonry для оформления записей в стиле Pinterest

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

Использование grid-разметки в WordPress

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

Данные скриншоты показывают темы, которые используют разметки сеткой для вывода на экран сообщений и страниц необычным и эффектным методом:

Вывод записей и страниц WordPress в виде сетки(Grid Layout) Вывод записей и страниц WordPress в виде сетки(Grid Layout) Вывод записей и страниц WordPress в виде сетки(Grid Layout)

Плагины для разметки сеткой

Представленные ниже бесплатные и премиум плагины сделают процесс добавления разметки сеткой на WordPress веб-сайт невероятно легким и простым.

1. uSquare($14)

Это отличный премиум плагин, который достиг более 2,000 покупок в Code Canyon. Вы удивитесь насколько запросто его установить и начать им пользоваться, учитывая то, на что способен этот плагин.

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

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

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

Порядок элементов можно легко запросто изменять при помощи интерфейса «drag and drop». Есть также много вариантов оформления, что дает вам максимальный контроль над внешним видом сетки и ее элементов.

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

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

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

2. Essential Grid($25)


Essential Grid — это премиум плагин WordPress, который может выводить содержимое различного формата в адаптивной сетке. Возможные области применения варьируются от портфолио, блогов, галерей, магазинов WooCommerce, таблиц цен, услуг, продукции, отзывов и вообще всего, что вы только можете себе представить.

3. UberGrid($18)


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

Вы можете без проблем использовать UberGrid для демонстрации портфолио, команды, продукции, фото, блога или чего-нибудь ещё, что может быть представлено с помощью квадратных ячеек. Его уникальная способность четко настраиваться удовлетворит практически любые потребности.

5. Justified Image Grid($28)


Это адаптивный WordPress плагин для галерей, который выравнивает эскизы в сетке по формату при помощи JQuery, как это происходит в Flickr и поиске картинок в Google. Помогите галереям эффектно выделиться из толпы! Замените стандартные галереи WP на шорткод [justified_image_grid] с большим числом новых возможностей и функций.

6. Grid Layout Shock(free)

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

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

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

  • Шрифт и размер заголовка
  • Шрифт и размер содержания
  • Размер каждой ячейки
  • Функция использовать кнопку ‘Читать далее’ и выбирать ее цвет
  • Выбор источника данных для таких категорий, как таксономия, тип записей, RSS-каналы, и т.д.
  • Что отображать: заголовок, изображение, отрывок и т.д.
  • Число элементов для выведения и порядок их сортировки

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

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

Также есть ряд тем, доступных при помощи плагина Grid Layout Shock, хотя большинство из них зарезервированы для премиум-пользователей. Так что, конечно, бесплатная версия достаточно урезанна, но, не смотря на это, она предлагает достаточно функций для работы, что будет хорошим вариантом для тех, кто не хочет обновляться до платной версии.

7. Gridster(free)

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

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

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

После того, как вы добавили элемент в сетку, вы можете без труда редактировать отображаемую информацию: название, отрывок и т.д. Это будет интересной особенностью и дает вам больше контроля над тем, как сетки и их содержимое будут выглядеть в конечном итоге. Размер элементов может быть изменен при помощи простого интерфейса «drag and drop», который поможет вам придать сеткам творческий вид.

Вывод записей и страниц WordPress в виде сетки(Grid Layout)

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

Заключение

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

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

Источник: wplift.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *