Как использовать цикл запросов в WordPress для создания страницы со списком сообщений?

Опубликовано: 2021-11-20

Страница сообщений блога отображает все сообщения блога на вашем веб-сайте WordPress на странице независимо от их категории, типа, даты публикации или автора. Вы когда-нибудь видели веб-сайты, которые в основном представляют собой сообщения и статьи в блогах? Ну, по сути, это страница сообщений в блоге, которая служит домашней страницей для указанных веб-сайтов. Эти типы веб-сайтов наиболее очевидны на веб-сайтах, отображающих исключительно новостной контент. Кроме того, страницы со списком постов - это обычно то, что вы видите, когда заходите в блоги или на страницу новостей большинства веб-сайтов. Итак, как вы можете создать один из них для своего собственного веб-сайта?

Настройка страницы сообщений блога в WordPress

Если вы хотите создать страницу блога, вы можете просто создать страницу в WordPress.

  • Перейдите в панель администратора вашего сайта и выберите «Страницы> Добавить».
  • Введите заголовок для страницы. На большинстве веб-сайтов, как упоминалось ранее, эта страница будет называться «Блоги» или «Новости», вы можете использовать все, что захотите.
  • Убедитесь, что на странице нет содержимого, и опубликуйте пустую страницу.
  • Теперь перейдите в раздел «Настройки> Запись» в панели администратора WordPress и выберите пустую страницу в качестве «Страницы сообщений».
  • Сохраните ваши настройки.

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

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

Блок цикла запроса

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

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

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

Добавить блок цикла запроса

  • Нажмите на (+) инструмент для вставки блоков и выберите блок Query Loop, как показано на изображении ниже. Чтобы найти блок Query Loop, вам нужно щелкнуть « Просмотреть все» , а затем перейти к разделу « Тема » средства вставки блоков. Как вариант, вы можете ввести «/ query loop» в новый блок абзаца, чтобы сделать то же самое.
Добавить блок цикла запроса
Добавить блок цикла запроса

Настройка блока цикла запроса

После добавления блока цикла запроса на вашу страницу по умолчанию блок заполнит вашу страницу последней публикацией. Однако с целью создания страницы сообщений вы можете изменить количество отображаемых сообщений. Редактор блоков Query Loop предложит вам различные варианты макета в виде шаблонов блоков для выбора и настройки. Различные варианты макета можно просмотреть в виде карусели или сетки.

Параметры макета в блоке цикла запросов
Параметры макета в блоке цикла запросов

Шаблоны проектирования блоков цикла запросов

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

По умолчанию WordPress предоставляет следующие шаблоны цикла запросов:

  • Стандарт
  • Изображение слева
  • Маленькое изображение и заголовок
  • Сетка
  • Большой заголовок
  • Компенсировать

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

Выбор шаблона цикла запроса
Выбор шаблона цикла запроса

Параметры блока цикла запроса

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

  • Ширина: изменение ширины различных элементов в блоке цикла запроса. С верхней панели инструментов вы сможете сделать сообщения полной или широкой шириной. Параметр широкой ширины расширяет блок за пределы размера содержимого, а параметр полной ширины расширяет блок цикла запросов, чтобы покрыть всю ширину экрана.
  • Выравнивание: измените выравнивание различных элементов в блоке цикла запросов. У вас есть возможность выбрать настройки выравнивания в диапазоне от левой до центральной и правой стороны страницы.
  • Расположение: вы можете переставить элементы блока Query Loop по своему усмотрению, используя движки, как показано ниже.
Изменение порядка элементов в блоке цикла запросов
Изменение порядка элементов в блоке цикла запросов
  • Цвета: вы можете применять различные типы параметров цвета с помощью параметров настройки блока для выбранного вами блока.
  • Добавить блоки: вы также можете добавлять новые элементы в свои блоки, такие как авторы сообщений или отрывки, если хотите.

Панель инструментов блока цикла запросов

На панели инструментов блока «Цикл запросов» вы найдете кнопку « Параметры отображения» , при нажатии на которую открывается всплывающее окно, позволяющее выбрать количество отображаемых сообщений.

  • Элементов на странице: количество сообщений, отображаемых в блоке цикла запросов.
  • Смещение: количество сообщений, которые вы хотите пропустить.
  • Максимальное количество отображаемых страниц: ограничивает количество отображаемых сообщений.

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

Настройки верхней панели инструментов в цикле запросов
Настройки верхней панели инструментов в цикле запросов

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

Просмотр форматов цикла запросов
Просмотр форматов цикла запросов

Связанный: 5 лучших плагинов блока Gutenberg для WordPress.

Редактор блоков цикла запросов

Используя специальные функции и модификаторы в редакторе блоков Query Loop, вы сможете вносить изменения в настройки цвета, применять специальные фильтры для публикаций, а также изменять порядок публикации на странице списка сообщений. Если вы не видите редактор блоков, щелкните значок «шестеренка» рядом с кнопкой публикации, чтобы открыть боковую панель редактора в правой части экрана.

  • Параметры цвета в редакторе блока Query Loop будут влиять на весь блок Query, но вы также можете настроить отдельные элементы внутри блока, специально выбрав их и внося соответствующие изменения через боковую панель редактора. Редактор блока Query Loop предоставляет следующие параметры настройки цвета внутри блока:
    • Цвет текста: позволяет изменять цвет текста, содержащегося внутри цикла запроса. Здесь у вас есть возможность выбрать один из предустановленных цветов из меню, выбрать собственный цвет из палитры или добавить определенный цветовой код по вашему выбору.
    • Цвет фона: это повлияет на цвет общего фона блока. Здесь вы можете выбрать предустановленный цвет, выбрать собственный цвет, добавить определенный цветовой код или использовать вариант цвета градиента. Вы можете увидеть, как использование параметра цвета градиента повлияло на блок запроса на приведенном ниже снимке экрана.
    • Цвет ссылки: этот параметр цвета контролирует цвета любых ссылок в любых сообщениях, присутствующих в блоке запроса. Этот вариант имеет те же цветовые вариации, что и вариант цвета текста.
Параметры цвета в цикле запросов
Параметры цвета в цикле запросов
  • На боковой панели редактора блока Query Loop вы столкнетесь с опцией Inherit query from the template . Этот параметр можно включать и выключать в зависимости от того, хотите ли вы настроить запрос, на котором построен цикл. Если вы включите его, определенные параметры настройки будут скрыты, но если вы отключите его, появятся дополнительные параметры настройки, такие как:
    • Столбцы: это будет панель перетаскивания, которая позволит вам выбрать количество столбцов, в которых вы хотите отображать свои сообщения. Эта опция появится только в том случае, если выбрано представление сетки, а не представление списка.
    • Сортировать по: вы сможете упорядочить сообщения на странице списка сообщений по любому из следующих критериев:
      • От новых к старым, это вариант порядка по умолчанию.
      • От старых к новейшим
      • По алфавиту, от А до Я
      • По алфавиту, от Я до А
    • Прикрепленные сообщения: используя эту опцию, сообщения блога можно размещать вверху первой страницы сообщений, сохраняя их там до тех пор, пока не будет опубликовано новое прикрепленное сообщение. Вы можете включать, исключать или отображать только прикрепленные сообщения.
  • Вы также найдете параметр « Фильтр» на боковой панели редактора блока цикла запросов - параметр, который поможет вам дополнительно настроить отображение отображаемых сообщений. Этот параметр будет невидимым, если вы включите параметр Наследовать запрос из шаблона . Чтобы создать фильтр для отображения сообщений на странице списка сообщений, вы можете поэкспериментировать со следующими параметрами.
    • Категории: вам нужно будет указать любые категории сообщений, которые вы хотите включить. Имейте в виду, что для работы этого фильтра вам нужно будет распределить свои сообщения по отдельным категориям.
    • Автор: вы можете использовать этот фильтр, если хотите, чтобы на вашей странице индекса отображались только блоги, написанные определенным автором.
    • Ключевое слово: если вы хотите фильтровать сообщения на основе любых ключевых слов, которые они могут включать, используйте эту опцию фильтра.
  • Наконец, вы также найдете опцию Advanced Settings, которая позволит вам добавить собственный класс CSS, с помощью которого вы можете настроить стиль блока в соответствии с вашими конкретными предпочтениями. Вы также можете назначить HTML-элемент, если хотите. Однако, если у вас нет опыта в области интерфейсной веб-разработки, мы рекомендуем оставить этот параметр как есть и использовать другие параметры настройки блока для стилизации блока цикла запроса.

И вот оно! Вы можете использовать различные параметры, упомянутые выше в блоке Query Loop, чтобы создать страницу сообщений, чтобы перечислить различные сообщения на вашем сайте WordPress и настроить их по своему усмотрению. При необходимости вы можете назначить страницу сообщений в качестве своего блога или использовать как отдельный блог с определенными параметрами.