Как создать макеты в стиле журнала с помощью темы GeneratePress? –

GeneratePress — это легкая тема, которую вы должны попробовать, если ваша основная цель — скорость. Раньше тема слишком сильно фокусировалась на скорости, не предоставляя множество функций, таких как поле автора. Однако последняя версия GeneratePress Pro с комбинацией GenerateBlocks Pro открыла другие возможности. Создание макета в стиле журнала — одна из таких функций, и вы можете сделать это без каких-либо тяжелых плагинов для создания страниц, таких как Elementor.

Домашняя страница в стиле журнала

Когда у вас есть тысячи статей в блогах по разным категориям, домашняя страница в стиле журнала поможет красиво продемонстрировать контент. Однако скорость резко упадет, если вы используете Elementor, WP Bakery или любые другие плагины для создания страниц. Хотя с GeneratePress процесс более длительный и сложный, вы получите 100/100 баллов в Google PageSpeed ​​Insights с макетом журнала, как показано ниже.

Макет стиля журнала GeneratePress

Вот вещи, которые вы должны знать перед началом:

GeneratePress Тема

Получите самую легкую и быструю тему WordPress, чтобы ускорить загрузку страниц вашего сайта.

Импорт демо или блока журнала

GeneratePress предлагает несколько демонстраций в журнальном стиле в разделе «Библиотека сайта». Если вам нравится один из них, просто импортируйте тему и отредактируйте контент в соответствии с вашими потребностями.

• Перейдите в раздел «Внешний вид > GeneratePress > Библиотека сайта».
• Выберите демонстрационные версии, такие как Info или Newsroom, которые поставляются с макетом в стиле журнала/новостей.

Библиотека сайтов GeneratePress Pro с демонстрациями

• Если предварительный просмотр перегружен на экране, вы можете перейти на демонстрационный сайт GeneratePress, чтобы просмотреть информацию и Шаблоны новостей.
• Следуйте инструкциям, чтобы импортировать параметры темы или контент в соответствии с вашими потребностями.

Импорт демонстрации стиля журнала GeneratePress

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

Вставить шаблон шаблона GenerateBlocks Pro

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

Вставить цикл запроса GenerateBlocks Pro Pattern

Настройка блоков журнального стиля

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

Блок шаблона журнала GeneratePress в редакторе Gutenberg

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

Добавление параметра смещения цикла запроса

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

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

Допустим, вы просто хотели показать последние сообщения на дисплее.

• Выберите первый блок Query Loop и выберите «Сообщения» в раскрывающемся списке «Выбор типа сообщения» на правой боковой панели. Вы можете установить «Сообщений на страницу» как 1, чтобы отображать только одно сообщение на дисплее.

Установите параметры запроса для первого блока цикла запроса

• Теперь выберите второй цикл запросов и выберите «Сообщений на странице» как 5, чтобы отобразить 5 сообщений. Однако это снова покажет тот же первый пост в цикле. Чтобы избежать этого, нажмите кнопку «Добавить параметр», выберите параметр «Смещение» и установите его значение равным 1. Это удалит первый пост, который уже отображается в первом блоке цикла запросов.

Добавить параметр смещения в блок цикла запроса

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

Плагин GenerateBlocks

Создавайте красивые макеты страниц с помощью блоков шаблонов копирования и вставки с динамическими данными с помощью GenerateBlocks.

Настройка типа записи и таксономии для цикла запросов

Если вы хотите продемонстрировать пользовательские типы сообщений или страницы из определенных категорий, выберите тип сообщения в раскрывающемся списке «Выбор типа сообщения». Вы увидите все доступные пользовательские типы сообщений в списке для выбора. После этого нажмите кнопку «Добавить параметр» и выберите опцию «Таксономии».

Установить таксономию и исключения

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

Фильтрация элементов категории в цикле запросов

Фильтрация элементов с датами

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

Показать сообщения после или до даты

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

Избранный источник изображения и ссылка

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

• Источник данных — текущий пост
• Источник изображения — избранное изображение
• Источник ссылки — один пост.

Связывание избранного изображения с публикацией

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

Настройка метаданных

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

Настройка метаданных в цикле

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

Рассмотрение кэширования и отложенной загрузки

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

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

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

Заключительные слова

Как уже упоминалось, создание макета в стиле журнала в GeneratePress — это долгий процесс, поскольку вам нужно настроить каждый блок и установить фильтры категорий. Тем не менее, это одноразовая задача, которая может занять пару часов. Это лучший вариант для получения хорошей оценки скорости страницы, и если вы не хотите использовать тяжелые плагины компоновщика страниц, которые повлияют на весь ваш сайт. Если вы используете GenerateBlocks только для страниц, вы можете отключить CSS плагина, загружаемый в сообщения, с помощью дополнительных плагинов Perfmatters. Таким образом, вы можете оптимизировать скорость всего сайта.