В классическом редакторе блоки Expert Review выводятся с помощью шорткодов. С помощью плагина для tinymce для них реализована визуализация, но технически это все те же шорткоды. Переключив редактор в режим текста, можно увидеть исходный текст шорткода, часто это бывает полезно, например, если требуется скопировать его и вставить в блок элементора или другого конструктора страниц.
Полный список шорткодов
- [expert_review] – шорткод блоков эксперта, в него могут быть включены сам блок эксперта, блок вопросов и ответов, блок рейтинга и блок плюсов и минусов. Каждый такой блок может выводиться отдельно.
- [expert_review_likes] – шорткод кнопок лайков и дизлайков.
- [expert_review_likes_rate] – шорткод таблицы рейтинга, составленной на основе кнопок лайков. Как это работает, подробнее описано ниже.
- [expert_review_faq] – шорткод блока FAQ (часто задаваемые вопросы).
- [expert_review_poll] – шорткод блока опросов.
Как вставить/добавить блок
Если на вашем сайте нет старого редактора, в Gutenberg добавьте блок Классический.
- Создайте запись/страницу или откройте на редактирование уже существующую.
- На панели инструментов нажмите кнопку Expert Review.
- Выберите из списка раздел с блоками.
- Выберите и настройте блок.
- Нажмите кнопку ОК. В контенте появится блок.
Блок эксперта
Блок эксперта состоит из нескольких блоков, которые могут выводиться как по отдельности, так и все вместе:
Эксперт
Будет полезен, если, например, в статье описывается какой-то продукт или услуга. Если у посетителя возникли какие-либо дополнительные вопросы, он может задать их эксперту (автору) через контактную форму.
Можно выбрать следующие настройки:
1) Эксперт
Выводит в блоке карточку эксперта. Тут нужно выбрать, откуда будут браться данные эксперта.
Если выбрать Указать вручную, то нужно будет вручную ввести информацию об эксперте. Для этого есть поля URL аватарки, Имя, Ссылка и Описание.
Если выбрано значение Выбрать из пользователей, то вся информация будет загружена из профиля указанного ниже зарегистрированного на сайте пользователя.
Если указано значение Выбрать из экспертов, то в блоке будут показаны данные выбранного эксперта.
Заранее нужно добавить одного или нескольких экспертов. Для этого перейдите в раздел Expert Review > Настройки и откройте вкладку Эксперты
Нажмите “Создать нового эксперта”. Введите имя, email, полный URL-адрес аватарки (иконки) эксперта (или выберите из медиа библотеки), URL-ссылку на его сайт и описание
Не забудьте поочередно нажать кнопки Ok и Сохранить, чтобы эксперты сохранились в системе.
2) Задать вопрос, Задать вопрос – текст, Задать вопрос – действие
Вывод/сокрытие и настройка кнопки Задать вопрос. При клике откроется всплывающее окно с полями Имя, Email и Вопрос.
Письма будут приходить на Email, указанный в настройках сайта (админ-раздел Настройки > Общие).
3) Показать заголовок и Заголовок
Тут можно указать заголовок блока и выбрать, показывать его или нет.
4) Текст
Текст, который будет показан под данными эксперта.
Вопросы и ответы
Блок будет уместным, если нужно вывести раздел часто задаваемых вопросов (FAQ) в описании продукта, услуги, рецепта или решении какой-либо проблемы.
Среди опций можно выбрать:
1) Вопрос-Ответ
В тестовом поле слева впишите вопрос, а в правом – ответ на него. Вопросов и ответов можно добавить несколько. Чтобы добавить новый, нажмите кнопку Добавить.
2) Показать заголовок и Заголовок
Показать/скрыть заголовок блока.
На сайте:
Рейтинг
Блок рейтинга обычно выводят, если в публикации сравниваются несколько продуктов, услуг, компаний или отдельных специалистов.
Из опций доступны:
1) Наименование-балл
Сразу под названием блока введите нужное количество наименований (слева) и укажите их балл рейтинга (справа).
2) Итоговый текст
Текстовый блок, который появится под рейтингом.
3) Итоговая оценка
Показать/скрыть итоговую оценку (среднее число).
4) Максимум баллов
Укажите максимальное количество баллов, участвующих в оценке.
На сайте:
Плюсы и минусы
Важный для наглядности раздел публикации, в котором подчеркиваются ключевые преимущества и недостатки описанного продукта, услуги, компании или отдельного специалиста.
Опции:
1) Список преимуществ/недостатков
Добавьте нужное количество плюсов (слева) и минусов (справа). Для добавление нового используйте кнопки Добавить.
2) Показать заголовок и Заголовок
Показать/скрыть заголовок блока.
На сайте:
Лайки и дизлайки
Примеры лайков и дизлайков Вы можете посмотреть здесь.
Чтобы добавить лайки перед/после контента перейдите в раздел Expert Review > Настройки и откройте вкладку Лайки
Отметьте нужные пункты
И заполните поле Контент лайка. Для этого в визуальном редакторе нажмите Добавить лайк
Лайки для комментариев настраиваются аналогичным образом
В окне визуальной настройки лайков можно выбрать Стиль, Размер, Иконки, задать Выравнивание и свой Текст нравится/не нравится.
В версии 1.2.0 лайки и дизлайки можно добавить с помощью шорткода:
[expert_review_likes]
У шорткода есть несколько параметров:
- style — задает внешний вид кнопок, по умолчанию simple-1
simple-1, button-1, button-1-color, button-2, button-2-color, button-3, button-3-color, button-4, color-1, color-2 - size — размер кнопок, по умолчанию m
xs, s, m, l, xl, xxl - icons — иконка, по умолчанию thumbs
thumbs, chevron, chevron-bold, plusminus, plusminus-circle, arrow-1 - show_icon — показать иконку, по умолчанию 1, может быть 0
- show_label — показать текст, по умолчанию 1, может быть 0
- show_count — показать счетчик, по умолчанию 1, может быть 0
- label_like — текст на кнопке лайка, по умолчанию Like (Мне нравится)
- label_dislike — текст на кнопке дизлайка, по умолчанию Dislike (Не нравится)
Пример шорткода со стилем button-3 и размером l:
[expert_review_likes style="button-3" size="l"]
Пример шорткода с иконкой arrow-1 и без текста:
[expert_review_likes icons="arrow-1" show_label="0"]
FAQ
Блок часто задаваемых вопросов.
В настройках можно задать:
- фон блока;
- вывод сразу в развернутом виде;
- заголовок (скрыть/показать);
- стиль оформления;
- список вопросов и ответом;
Для каждого нового вопроса и ответа используйте кнопку Добавить.
Опрос
Блок будет полезным, если нужно узнать мнение посетителей сайта о новом продукте, компании, специалисте.
В настройках можно задать:
- фон блока;
- заголовок (скрыть/показать);
- стиль оформления;
- количество голосовавших.
Для каждого нового ответа используйте кнопку Добавить.
Один и тот же вопрос можно использовать несколько раз в контенте записи или страницы. Если он уже был создан, выберите его в опции Существующие опросы. Все настройки опроса сохраняются. Остается только нажать кнопку ОК.
Чтобы посмотреть список всех созданных опросов, в админке перейдите Expert Review > Опросы
В колонке Действия вы можете скрыть вывод конкретного опроса или приостановить голосование.
Колонка В постах указывает, в каких записях добавлен выбранный опрос.
Графа Инфо показывает список вопросов и количество проголосовавших.
Дополнительные настройки
Настройка отдельных элементов блоков.
Цвета элементов блоков
Если в цветовой схеме нет нужного цвета, Вы можете изменить цвет элементов блоков с помощью стилей.
Чтобы изменить основной цвет элементов всех блоков “Эксперт”, нажмите Внешний вид > Настроить > Дополнительные стили и добавьте код
.expert-review-expert-header, .expert-review-expert-bio-name {
color: #5c0a93!important;
}
.expert-review-expert-bio__avatar, .expert-review-button {
background-color: #5c0a93!important;
}Чтобы изменить основной цвет элементов всех блоков “Вопросы и ответы”, нажмите Внешний вид > Настроить > Дополнительные стили и добавьте код
.expert-review-qa-header {
color: #5c0a93!important;
}
.expert-review-qa__avatar {
background-color: #5c0a93!important;
}Чтобы изменить основной цвет элементов всех блоков “Рейтинг”, нажмите Внешний вид > Настроить > Дополнительные стили и добавьте код
.expert-review-score-line__progress-fill {
background: #5c0a93!important;
}
.expert-review-score-line__score {
color: #5c0a93!important;
}
.expert-review-score-summary__average {
background-color: #5c0a93!important;
}Чтобы изменить основной цвет элементов всех блоков “Плюсы и минусы”, нажмите Внешний вид > Настроить > Дополнительные стили и добавьте код
.expert-review-pluses-minuses-header {
color: #5c0a93!important;
}Вместо #5c0a93 можете указать другой цвет.