Найти в Дзене

Плагин POST GRID для вывода постов сеткой на WordPress

Здравствуйте друзья. В данной статье мы с Вами поговорим о плагине, который дает возможность работать с постами блога и выводить их на определенной странице разделяя по рубрикам, меткам, создавая анимацию, выводя определенное количество, уменьшая и увеличивая их и многое другое. Рекомендую Вам ознакомиться с этим плагином Post Grid в данной статье. Установка плагина Post Grid на WordPress Сначала давайте установим плагин. Заходим в WordPress > Плагины > Добавить новый: Теперь на панели WordPress нажимаем “Post Grid” (п.1), и “New Post Grid” (п.2) для добавления новой строки. Добавляем New Post Grid На следующей странице вносим название “Новые статьи блога”. Теперь нажимаем “Сохранить” (п.2). или “Опубликовать” (п.3). Код под (п.4) нам в дальнейшем понадобится. Заходим на следующую вкладку “Query Post”. В первом списке выбираем “Записи” (п.1), а во втором выбираем рубрики, которые будем выводить на странице. Здесь мы хотим выбрать все рубрики, поэтому все и выделяем. Естественно можно
Оглавление

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

Установка плагина Post Grid на WordPress

Сначала давайте установим плагин. Заходим в WordPress > Плагины > Добавить новый:


На следующей странице в поисковой строке вводим “Post Grid” (п.1), появившийся плагин (п.2), устанавливаем и активируем.
На следующей странице в поисковой строке вводим “Post Grid” (п.1), появившийся плагин (п.2), устанавливаем и активируем.
-3

Теперь на панели WordPress нажимаем “Post Grid” (п.1), и “New Post Grid” (п.2) для добавления новой строки.

-4

Добавляем New Post Grid

На следующей странице вносим название “Новые статьи блога”.

-5

Теперь нажимаем “Сохранить” (п.2). или “Опубликовать” (п.3). Код под (п.4) нам в дальнейшем понадобится.

-6

Заходим на следующую вкладку “Query Post”. В первом списке выбираем “Записи” (п.1), а во втором выбираем рубрики, которые будем выводить на странице. Здесь мы хотим выбрать все рубрики, поэтому все и выделяем. Естественно можно выбрать только одну рубрику, тогда будут выведены посты только из этой рубрики. Таким образом Вы можете выбирать рубрики, которые Вам понадобятся.

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

Выбираем отображение картинки

-8

Переходим на вкладку “Layout”. Здесь можно выбрать как будут отображаться картинки нашего блога. В первой картинке наше изображение будет обычным, а в других будет изображениям даваться различная анимация (п.2). Теперь перейдем по ссылке “Edit” (п.1) и посмотрим на следующую страницу.

-9

На данной странице можно выбрать, какой текст будет выводится вместе с изображением поста. Под пунктом (п.1), можно выбрать, что выводить заголовок, название статьи ссылкой или без, полный текст статьи и т.д. В пункте (п.2) будут отображаться те значения, которые будут выводиться на странице. После того как мы выбрали. Нажимаем “Save Changes” (п.3), сохраняя, то что выбрали.

Задаем размер картинкам постов

-10

Во вкладке “Layout settings” задаем размеры картинок для:

  • компьютера (п.2)
  • планшета (п.3)
  • смартфона (п.4)

По умолчанию для компьютера и планшета стояли размеры 280px, тогда бы на странице в одной строке выводилось бы по два поста, мне же нужно чтобы на одной строке выводилось бы 4 поста. Поэтому я задал им значения по 140px. Для мобильной версии лучше оставить 90%, для удобного прочтения, если конечно Ваш блог адаптирован под мобильные устройства. Теперь все сохраняем.

Код для установки на блог

-11

Переходим на вкладку “Shortcodes”, где у нас находятся 2 кода, где Вы выбираете либо первый либо второй. Код под пунктом (п.1) устанавливается на обычную страницу в WordPress. Второй код PHP устанавливается в файл .php, который Вы выберите и на какой странице захотите, чтобы выводились Ваши посты. Я в моем случае воспользуюсь первым кодом.

-12

Захожу на страницу блога и вставляю свой код. Нажимаю “Обновить”.

Отображение постов в виде сетки на странице блога

-13

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

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

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

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков