Супер адаптивная сетка записей на сайт wordpress

WordPress

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

Плагин – Post Grid можно установить прямо из админ-панели wordpress. Перейдите по вкладке: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

08-12-2015 23-20-27_mini

 

После установки и активации плагина, перейдите по вкладке: Post GirdLayout Editor.

 

08-12-2015 23-26-12_mini

 

Далее, на странице Редактор макетов, вам нужно выбрать элементы, которые будут отображаться в анонсе записи. Для выбора просто нажмите по элементу и он появится в списке. Например можно выбрать основные элементы:

 

Title, заголовок.

Excerpt, отрывок из записи.

Read more, читать далее.

Thumbnail, изображение. (в конце сохраните настройки – Save Changes)

 

08-12-2015 23-31-38_mini

 

Далее, идём на страницу – New Post Grid, укажите заголовок сетки, на первой странице у вас будет отображаться шорткод, который нужно будет вставить на страницу, где и будет сетка записей. Так же есть php код для вставки в шаблон.

 

08-12-2015 23-47-50_mini

 

Разберём остальные настройки:

 

Query Post

– Post Type, выберите типы постов для отображения в сетки, например – записи, страницы, медиафайлы и т.д.

– Post Status, статус поста, по умолчанию – Опубликованные.

– Posts per page, укажите число записей для отображения в сетке.

– Exclude by post ID, можно исключить запись, указав её ID здесь.

– Post query order, по убыванию или по возрастанию. По умолчанию – по убыванию.

– Post query orderby, по какому значению сортировать записи.

– Search keyword, оставьте пустым.

 

Layout

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

 

Layout settings

– Grid Items Width, можно задать ширину, например если вы хотите сделать в один ряд 3-4 записи, то уменьшите размер ширины.

– Media Height, можно высоту указать, по умолчанию стоит авто-определение.

– Featured Image size, размер изображения.

– Media source, выберите источник изображений для записи. сверху 1 – популярные, 2 – из контента, 3 – пустые.

– Grid Items Margin, расстояние между записями, цвет фона сетки, либо изображение фона сетки.

 

Всё, последние 2 вкладки можно не трогать, жмите – Опубликовать, копируете шорткод, вставляете его на страницу и смотрите, что у вас получилось. У меня всё, есть вопросы? пиши коммент, до новых встреч!

 

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

  1. Дон

    Как сделать три колонки?

    Ответить
    1. Admin автор

      Смотри параметр – Grid Items Width, там нужно указать размер ширины одного анонса записи. Если у тебя отображаются две колонки, то надо уменьшить размер, чтобы влазили три анонса записи.

      Ответить
  2. Daulet Meldeshev

    Привет Админ! как сделать чтобы записи отображались на метке и на рубрике тоже так? спасибо!

    Ответить
    1. Admin автор

      Привет, увы такой возможности в данном плагине нет. Могу порекомендовать ещё один Супер плагин – Читай Здесь !!!

      Ответить
  3. Daulet Meldeshev

    Мне кажется у этого плагине тоже такие функций. Я хочу чтобы на метке, на рубрике и на поиске отображали также. Я не только про на ручных страниц, а оригинальных страниц сайта. Помогите. Спасибо!

    Ответить
    1. Admin автор

      Вставляете php код записей в файл страницы и всё готово ! На каждой теме это разные файлы. Искать нужно на странице: Внешний вид – Редактор.

      Ответить
  4. Daulet Meldeshev

    У search.php было как я ожидал, но когда поставлю код на archive.php, на каждой рубрике отображаеть одни и тотже записи? Как сделать нормально? Не поможете ли вы? Спасибо!

    Ответить
    1. Admin автор

      А вы хотите чтобы как было ?

      Ответить
  5. Daulet Meldeshev

    этот код сработала только на search.php, а когда поставил код на archive.php на всех рубриках отображаеть записи полного блога. Сортировка не работает вообще, и на метке также одни и тотже записи как у главная страница сайта. Или есть ли другой вариант, без шорткодов, например пхп код. помогите!

    Ответить
    1. Admin автор

      Вы хотите чтобы на странице категории или метки автоматически выводились записи из определённой категории ? Такой возможности в данном плагине нет, он просто выводит последние записи блога на определённой странице и всё. Если я правильно вас понял.

      Ответить
  6. Daulet Meldeshev

    Ага ясно, а тогда как сделать в виде сетке через ftp редактор? Без плагинов, через php кодов. Возможно ли это? Спасибо!

    Ответить
    1. Admin автор

      Возможно. Нужно создавать свои CSS стили для анонсов записей по умолчанию. Есть плагин классный, может вам помочь – SiteOrigin CSS.

      Ответить
    2. Admin автор

      Автор плагина Post Grid включил возможность вывода записей из определённой категории ! Надо обновить плагин до последней версии. На вкладке Query Post будет такая возможность.

      Ответить
      1. Olga

        Здравствуйте. Скажите, а теперь можно вывести на странице каждой из категорий автоматически те записи, которые у ней присутствуют? какой код ставить в файл archive.php?

      2. Admin автор

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

      3. Olga

        Ок, спасибо. Еще такой вопрос: как добавить рейтинг к каждой из записей сетки? у меня есть плагин рейтинга kk Star Ratings, мне нужно вывести звездочки над записями сетки Post Grid, как это сделать?

      4. Admin автор

        Вставьте код рейтинга в нужное вам место. Чтобы рейтинг отображался в каждом анонсе записи в сетке, нужно чтобы плагин рейтинга был синхронизирован с плагином post grid. Такой функции по умолчанию нет.

  7. Alex

    Илья, привет. После обновления по прежнему не могу выводить записи из определенной категории. Я так понимаю это здесь:Query Post-Taxonomy & Terms (Categories)-No categories found. Помоги пожалуйста.

    Ответить
    1. Admin автор

      В параметре “Post Types” нажми по значению “Записи”. После чего в параметре “Taxonomy & Terms (Categories)” появятся категории, если они есть на твоём сайте. Только что проверял, всё работает !

      Ответить
  8. Alex

    Спасибо за оперативность. Все работает))

    Ответить
  9. Игорь

    Добрый день, а PHP куда вставлять?

    Ответить
    1. Admin автор

      Здравствуйте, куда хотите туда и вставляйте. php код ставится в php файлы типа header.php или footer.php

      Ответить
  10. Игорь

    вопрос с тремя колонками? Grid Items Width излазил всю настройку, все равно в одну колонку встает :(

    Ответить
    1. Admin автор

      Надо уменьшить или увеличить параметр, чтобы изменить количество колонок

      Ответить
  11. Ольга

    Здравствуйте! Как сделать, чтобы Read more на русском отображалось?

    Ответить
    1. Admin автор

      Здравствуйте, вам может помочь плагин – Loco Translate.

      Ответить
    2. Admin автор

      На странице перевода плагина, введите в поиск Read More, так быстрее найдёте.

      Ответить
  12. Ольга

    Спасибо, все получилось. А можно как-нибудь в настройках Layout в режимеFlat, получить какой-нибудь эффект при наведении на картинку?

    Ответить
    1. Admin автор

      В плагине нет такой возможности, можно поэкспериментировать с CSS hover, добавить тень, другой цвет при наведении, чтобы выделялось. Есть специальный плагин для создания эффектных анонсов с эффектом при наведении – Image Hover Effects Супер эффектные анонсы !

      Ответить
  13. Olga

    А есть еще плагин, выводящий записи в виде сетки с картинками, только в категориях? очень нужно

    Ответить
    1. Admin автор

      Что значит “только в категориях”…?

      Ответить
      1. Olga

        Мне нужно вывести во всех категориях, принадлежащие им записи в виде сетки. То есть чтоб при заходе в ту или иную рубрику автоматически показывались посты, которые в ней имеются в виде блоков (4 колонки с миниатюрами и заголовком). Post Grid подходит только для вывода записей на главной и страницах, найти другой похожий плагин, который бы смог сделать то же самое в категориях, мне не удалось. Уже 2 дня пытаюсь найти решение…

      2. Admin автор

        У вас два варианта, либо искать готовый шаблон, либо создавать отдельную страницу под каждую категорию и ставить туда шорткод сетки с определённой категории.

  14. Владимир

    Добрый день, Илья ! Подскажите , как вывести определённые посты по ID с помощью этого плагина (Post Grid). По описанию понял что можно, но у меня не получается…а очень надо. Не хотелось бы из-за этого ставить дополнительный плагин. Если вы знаете как , научите.

    Ответить
    1. Admin автор

      Здравствуйте, по id можно только исключить записи из основной сетки. Выводить записи можно только из определённой категории.

      Вроде как у плагина Content Views есть такая возможность, посмотрите.

      Ответить
      1. Владимир

        Понятно! Значит нельзя. Придётся пробовать другие плагины. Спасибо за подсказку. (Но Post Grid я не удалю. Отличный плагин. Настроил отображение для мобильной версии. Всё ок. Сетка смотрится отлично на разных устройствах)

  15. Екатерина

    Добрый день, Илья! Подскажите, пожалуйста, можно ли навести порядок в анонсе поста, который выводится в сетке? На странице поста текст оформлен с переносом строки, а в сетке все кучкуется. Добавление тега в начале строк на странице поста не помогло навести красоту в сетке.

    Ответить
    1. Admin автор

      Здравствуйте. Да, можно. Вам поможет плагин – SiteOrigin CSS. Экспериментируйте со стилями – Margin и Padding. Возникнут вопросы, пишите.

      Ответить
  16. Екатерина

    Илья, спасибо за оперативность! От SiteOrigin CSS просто душа радуется! :) Правда, не знаю как заставить с его помощью Post Grid не игнорировать html разметку в анонсе (переносы строк, списки не отображаются). Буду благодарна за подсказку!

    Ответить
    1. Admin автор

      Да, SiteOrigin может что-то игнорировать, но это уже из-за несовместимости. В таком случае стили можно вручную добавить с помощью плагина:

      Simple Custom CSS.
      Custom CSS Pro.

      А что значит “переносы строк не отображаются” ?

      Ответить
      1. Екатерина

        Илья, спасибо! Пока ищу решение. Внутри поста содержимое оформлено читабельно – текст разбит на абзацы, строки (тег br), есть выделения слов жирным начертанием, но в анонсе поста в сетке все форматирование слетает. На сколько мне хватает сообразительности SiteOrigin CSS здесь не применим, так как задача в том, чтобы Post Grid не игнорировал форматирование текста поста в анонсе в сетке глобально. Если есть зацепки, буду благодарна за совет.

      2. Екатерина

        Предполагаю, нужно отредактировать код плагина Post Gride в местечке, отвечающем за анонс и фильтрацию содержимого поста, когда он становится анонсом. Но пока не знаю как

        //var_dump(get_the_excerpt());
        $the_content = get_the_excerpt();

        $excerpt_removed_shortcode = preg_replace( ‘|\[(.+?)\](.+?\[/\\1\])?|s’, ”, strip_shortcodes($the_content));

        $html_content.= apply_filters(‘post_grid_filter_grid_item_excerpt’,wp_trim_words($excerpt_removed_shortcode, $char_limit,”));

      3. Екатерина

        Проблема была в том, что функция get_the_excerpt хтмл-форматирование выбрасывает по умолчанию, заменила ее на get_the_content плюс в теле поста буду прописывать тег more, чтобы получались красивые анонсы в нужном месте заканчивающиеся. Итого было:
        $html_content.= apply_filters(‘post_grid_filter_grid_item_excerpt’,wp_trim_words($excerpt_removed_shortcode, $char_limit,”));

        стало:
        $html_content.= apply_filters( ‘the_content’, get_the_content( $more_link_text, $stripteaser ) );

  17. my3yka

    Илья Журавлёв как сделать не 3 записи на строку, а больше? У мене отображает только по 3 записи, 4-я уже идет с новой строки.

    Ответить
    1. Admin автор

      Очень просто. В настройках плагина. Настройки отображения – Макет – Элементов в строке. Даже можно указать для планшета и мобильного телефона.

      Ответить
      1. my3yka

        Спс. Grid Items Width в помощь.

  18. Сергей

    Добрый день! Подскажите как вывести записи сеткой на страницах категорий? Чтобы можно было добавить информацию из произвольных полей? Спасибо.

    Ответить
    1. Admin автор

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

      Чтобы можно было добавить информацию из произвольных полей? – вот этот вопрос не понял, что вы имеете ввиду, можно по подробней?

      Ответить
  19. Макс

    День добрый!
    Можно ли настроить в данном плагине показ определенных товаров? пока загрузил 20 иконок, но выходят не те что надо. И можно ли будет настроить ссылку на странице нажимая на иконку, а не не на ссылку подробнее? буду рад помощи

    Ответить
    1. Admin автор

      Здравствуйте! Нет, определённые записи нельзя выбрать. Можно только выбрать категории, из которых будут записи выводится или товары. Рекомендую вам плагин – Content Views, в нём есть такая функция. Второй ваш вопрос не совсем понял, что значит “настроить ссылку нажимая на иконку”? Вы имеете ввиду текст кнопки изменить?

      Ответить
  20. Андрей

    Ребят, как поменять стиль заголовка в блоках?

    Ответить
    1. Admin автор

      С помощью Супер плагина – SiteOrigin CSS

      Ответить
  21. Жорик

    Привет!
    у меня элементы в сетке привязаны к страницам, но почему-то при клике увеличивается изображение страницы, как сделать чтоб на эту страницу перейти?
    Спасибо

    Ответить
    1. Admin автор

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

      Ответить
  22. Руслан

    Приветствую. Подскажите , можно ли вывести для каждой категории картинки (одна картинка для одной категории)?

    Ответить
    1. Admin автор

      Добрый вечер. На WordPress нет возможности устанавливать фото для категорий. Но, можно плагин специальный поставить Category and Taxonomy Image, либо Изображения таксономий (его можно найти по запросу add image to category через админку).

      Ответить
  23. kroshx

    Смотри ещё! Что за плагин у тебя на сайте?

    Ответить
    1. Admin автор

      Related Posts By Taxonomy

      Ответить
  24. Виктор

    У вас видео в статье “битое”

    Ответить
    1. Admin автор

      Спасибо, удалил

      Ответить