custom post typehow topage builder

Вывод кастомных типов записей с помощью виджета

Привет друзья! Сегодня я хочу показать, как вывести кастомные типы записи с помощью виджета “Services”. Иногда возникает необходимость вывести блок с услугами компании, на главной странице сайта wordpress или на любой другой странице. Главное чтобы она была статичной, а не архивом записей блога.



Многие бизнес темы имеют функционал для создания и вывода произвольных типов записей с помощью виджетов. Например, тема Moesia или Sydney имеют виджет services для вывода услуг компании на главной странице сайта. Если в вашей теме wordpress такая возможность не предусмотрена, и вы не хотите менять из-за этого свою тему сайта, то вывести услуги компании можно с помощью произвольных типов записи и виджета services «услуги».

Данный виджет входит в сборник под названием Livemesh widgets. Для того чтобы показать блок с услугами компании установите плагины:

• Page builder by SiteOrigin (drag and drop конструктор макетов);
• Livemesh widgets (набор виджетов);
• Custom Post Type UI (создание произвольных типов записей).

установка плагина Livemesh SiteOrigin

Плагин для создания произвольных типов записей custom post type ui необходим только в том случае, если вы хотите показать на главной странице сайта небольшой анонс услуг компании в виде заголовков, иконок и маленьких текстов. Ваша цель – сделать заголовки кликабельными ссылками, ведущими на основную запись.

Если у вас нет необходимости делать ссылку на произвольный тип записи, то плагин custom post type ui можно не устанавливать и вывести услуги компании с помощью одного виджета services. В таком случае будут показаны только заголовки и небольшие тексты под ними без ссылок.

установка плагина custom post type ui

Создаем пользовательский тип записей «Услуги»

Итак, устанавливаем и активируем данный плагин. После активации мы увидим, как он появился в консоли сайта. Жмем на кнопку Add post type.

активация плагина кастом пост тайп

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

создание кастомного типа записей

По умолчанию плагин custom post type ui создает для каждой произвольной записи поля для вставки заголовка, редактора текста и изображения записи. Если вам нужно добавить автора, кастомные поля, ревизии и другие настройки, то активируйте соответствующие чекбоксы в настройках произвольной записи.

После сохранения у вас в админке появится новый тип записи «Услуги». Добавьте здесь свои типы записей, так же как вы добавляете посты в блог. Я для примера разместил три поста: «Копирайтинг», «SEO», «Разработка сайтов». В каждом из них есть заголовок, текст и изображение. Также для каждого поста я создал свою категорию.

кастомные типы записей wordpress

Вывод кастомных типов записей с помощью виджета Services

Чтобы вывести блок с произвольными типами записей на главной странице сайта wordpress, переключитесь со стандартного редактора в режим page builder и вставьте строку на всю ширину экрана.

настройка строки на всю ширину экрана с помощью page builder

После вставьте в этот ряд виджет services из набора Livemesh widgets и с помощью кнопки Добавить вставьте три заголовка ваших услуг. Для каждого выберите иконку из набора иконочных шрифтов font awesome icon. Вставьте короткое описание и затем выберите сами записи с помощью кнопки Выберите контент. Прикрепите к каждому типу записи соответствующий пост, который вы создали.

настройка виджета для вывода произвольных типов записей

В настройках виджета Services есть такие поля:

  • Title – заголовок записи
  • Style – 5 стилей оформления записи
  • Icon – выбор иконки записи (Font Awesome Icon и другие)
  • Description – короткое описание (параграф текста)
  • Choose Animation Type – css анимация (fade in, fade left, fade right)
  • Ссылка на запись

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

вывод произвольных типов записей с помощью виджета

Заключительные настройки виджета Services

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

виджет для вывода произвольных записей на главную страницу сайта wordpress

На задний план я поставил фоновое изображение для красоты. В настройках строки вместо картинки можно задать фоновый цвет.

виджет services

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

вывод блока услуг компании на главной странице сайта

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *