Как пользоваться grid post

Обновлено: 09.01.2025

Almost everything is ready to create post grid from any post types, with few click you can generate beautiful grid for your blog post, product showcase, team member showcase, portfolio, gallery, archive post display, category post display, tags post display and custom taxonomy and terms post can be displayed via post grid. if you have basic knowledge in CSS you can style your own via layout editor to create unique style of your grid.

Responsive Grid
Post Grid is responsive and almost work in any device. good things is you can set some option based on mobile or tablet
device. like you can set custom column number on mobile device.

Any Custom Post
Post grid is master of displaying grid from any custom post types. You will never ever worried about. you can also
select multiple post types to display on single post grid.

Taxonomy & Terms Support
Query post by custom taxonomy and terms is the most wanted feature already in post grid, you can select multiple taxonomy and terms for query post.

Unlimited Post Grid
There is no limitation of creating post grid, you can create unlimited post grid on your website.

Skin & Layout Based
Post grid items based on skin and layout based, you can customize layout elements and change skin, if you have basic CSS
knowledge you can customize layout elements and apply your own style.

Search Input Field
you can display search input field at top of grid, so user can search though your grid and find their desired post.

Post Query Features
Post Grid has many support and input to display your desired post on the grid, you can customize

Premium features

View Type

Filterable
Glossary
Carousel Slider
Collapsible

Post grid for Archives

category.php
tags.php
search.php
author.php
Custom taxonomy & terms page

Advance Pagination types

Ajax Pagination
Next-Previous
Filterable pagination
Ajax Load More

Advance Media Sources

First youtube video from content
Custom youtube video
First vimeo video from content
Custom vimeo video
First dailymotion video from content
Custom dailymotion video
First MP3 from content
Custom MP3
First SoundCloud from content
Custom SoundCloud
Custom Thumbnail
Font Awesome
Custom Video

Filterable Features

Advance Query

3rd party plugins support

Easy Digital Download
Easy Digital Download is another best ecommerce for digital products and we provide full support to display following elements for downloads on the post grid.

Video Tutorial(with premium version interface)

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

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

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

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

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

Installation

How to use on page or post
When Post Grid options setup done please publish Post Grid as like post or page

and then copy shortcode from top of Post Grid Options [post_grid ]

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

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

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

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

The Post Grid

The Post Grid is a fully Responsive & Mobile friendly plugin to display your page/post in Grid, List and Isotope View without any line of coding. It is fast and easy to generate grid from admin end and insert into page/post. You can Display posts by any category(s), tag(s), author(s), keyword(s) also Order posts by Id, Title, Created date, Modified date and Menu order.

Возможности:

4 easy steps to Generate Grid

Step 1) Post Source: Select Post Source then Select the Taxonomy ie category(s), tag(s), author(s), keyword(s) and Select Order by Id, Title, Created date, Modified date and Menu order then set the Terms and Relation.

Step 2) Layout Settings: From the 4 different layouts select which layout you want then Select Number of Columns, pagiantion, Image Size, Image Source and Excerpt limit.

Step 3) Field Selection: You can select which fields you want to display.

Step 4) Style: You can set Primay color and Button Color.

How to use?

From the Editor The Post Grid icon you can easily add into your page or post.

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

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

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

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

Установка

How to use on page or post
When Post Grid options setup done please publish Post Grid as like post or page

and then copy shortcode from top of Post Grid Options [post_grid ]

Post Grid

Responsive Grid
Post Grid is responsive and almost work in any device. good things is you can set some option based on mobile or tablet
device. like you can set custom column number on mobile device.

Any Custom Post
Post grid is master of displaying grid from any custom post types. You will never ever worried about. you can also
select multiple post types to display on single post grid.

Taxonomy & Terms Support
Query post by custom taxonomy and terms is the most wanted feature already in post grid, you can select multiple taxonomy and terms for query post.

Unlimited Post Grid
There is no limitation of creating post grid, you can create unlimited post grid on your website.

Search Input Field
you can display search input field at top of grid, so user can search though your grid and find their desired post.

Post Query Features
Post Grid has many support and input to display your desired post on the grid, you can customize

Premium features

View Type

Filterable
Glossary
Carousel Slider
Collapsible

Post grid for Archives

category.php
tags.php
search.php
author.php
Custom taxonomy & terms page

Advance Pagination types

Ajax Pagination
Next-Previous
Filterable pagination
Ajax Load More

Advance Media Sources

First youtube video from content
Custom youtube video
First vimeo video from content
Custom vimeo video
First dailymotion video from content
Custom dailymotion video
First MP3 from content
Custom MP3
First SoundCloud from content
Custom SoundCloud
Custom Thumbnail
Font Awesome
Custom Video

Filterable Features

Advance Query

3rd party plugins support

Easy Digital Download
Easy Digital Download is another best ecommerce for digital products and we provide full support to display following elements for downloads on the post grid.

Video Tutorial(with premium version interface)

Скриншоты

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

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

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

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

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

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

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

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

Screenshots

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

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

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

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

Читайте также: