Простые отзывы пользователей с гравитационными формами и пользовательским типом сообщения

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

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

В этом процессе есть несколько шагов:

• Создайте пользовательский тип сообщения.
• Создайте форму в Gravity Forms, чтобы пользователи могли отправлять черновики сообщений, используя ваш собственный тип сообщений.
• Добавьте форму на страницу.
• Показать сообщения на вашем сайте.

Давайте начнем.

1. Создайте пользовательский тип сообщения

Это идеальная ситуация для нестандартного типа поста — например, пост в блоге, только специальный. Пользовательские типы сообщений отделены от обычных сообщений в блоге; они могут помочь вам превратить ваш сайт в базу данных фильмов или сайт рецептов со своими собственными таксономиями (вместо категорий блогов, например, режиссеры фильмов, актеры и жанры).

Хотя вы можете вручную создать пользовательский тип записи (CPT), используя кодирование, давайте сделаем это простым способом. Установите пользовательский интерфейс типа сообщения и активируйте его. Это очень полезный и стабильный плагин, который существует уже много лет.

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

Вы можете оставить раздел « Метки » в покое. Но в настройках вы захотите внести несколько изменений.

Я оставил большинство настроек по умолчанию только в разделе « Настройки» , но установил флажок « Исключить из поиска», так как я не хочу просматривать сообщения в результатах поиска. А в разделе « Поддержки» я установил флажки только для тех элементов, которые нужно отображать на странице редактирования поста отзыва: « Заголовок» , « Редактор» и « Пользовательские поля» .

Если навести курсор мыши на красные вопросительные знаки на панели «Настройки», вы увидите, что делает каждый элемент; Вы всегда можете вернуться и внести изменения.

2. Создать форму в Gravity Forms

Gravity Forms — отличный плагин, но он не будет обрабатывать собственные сообщения самостоятельно. Для этого вам нужно установить и активировать другой плагин, Gravity Forms + Custom Post Types . Идите и сделайте это, и мы начнем с формы.

В Gravity Forms создайте новую форму; давайте назовем это Отправить отзыв. Сохраните его, а затем откройте поля сообщений в правом столбце. Использование этих полей вместо обычных полей формы создаст новое сообщение, когда пользователь отправит форму.

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

Назовите свое поле (здесь ваше имя, так что это ярлык, который увидит пользователь). Для статуса сообщения вы, вероятно, хотите черновик ; это означает, что новое сообщение будет в черновом формате и не будет опубликовано на вашем сайте, пока вы не одобрите его.

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

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

Затем нажмите « Обновить», чтобы сохранить изменения.

Затем мы добавим поле электронной почты (из раздела « Расширенные поля »), как и для любой формы, сделав его обязательным .

Далее мы добавим еще одно поле сообщения, тело . Это работает так же, как поле текста абзаца в нормальной форме. Вам не нужно изменять какие-либо настройки для этого поля, кроме метки поля и отметки флажка « Обязательно» .

Почти сделано! Теперь, поскольку у моего клиента есть несколько продуктов, мы хотим спросить пользователя, какой продукт он купил. Для этого мы собираемся добавить пользовательское поле из области Post Fields (перетащите его вверх, чтобы оно появилось перед полем Body, чтобы поток имел смысл).

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

Затем заполните поля переключателей, как обычно, убедившись, что вы вводите как метку (то, что видит пользователь), так и значение (которое можно использовать для разделения отзывов по названию продукта).

Сделайте это поле обязательным (и не забудьте добавить собственную метку поля вверху для пользователя) и обновите форму. Мы все закончили с частью 2.

3. Добавление формы на страницу

Я надеюсь, что вы уже знаете, как это сделать, но если нет, то это очень просто. Перейдите на страницу, где вы хотите разместить свою форму и редактировать страницу.

Поместите курсор туда, куда вы хотите добавить форму. Нажмите « Добавить форму» вверху, выберите новую форму, снимите флажки « Заголовок и описание» и нажмите « Вставить форму» . Это добавит шорткод на страницу.

Вот и все. И так выглядит форма на странице.

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

4. Показать сообщения на вашем сайте

Теперь мы переходим к той части, которая имеет много возможностей. Если вы посмотрите в меню администратора с левой стороны, у вас появится новый пункт меню, в моем случае он называется « Отзывы» . Если вы посмотрите на это, вы увидите отправленные вами тестовые обзоры (если их нет, вы пропустили последнюю часть шага 3 — перейдите к форме и отправьте тестовые обзоры, по крайней мере, для нескольких продуктов, так как мы нужен материал для работы на этом этапе).

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

Откройте одну из этих публикаций, и вы увидите только те элементы, которые вы отметили в разделе Поддержки на шаге 1, когда настраиваете свой тип записи. В данном случае это заголовок, редактор и пользовательские поля. Нам нравится делать это как можно проще. Посмотрите на настраиваемое поле, и вы увидите, что у него есть как имя (введенная вами метка), так и значение (которое вы также ввели). Это значение можно использовать для контроля того, какие обзоры отображаются в пользовательском шаблоне.

Отображение сообщений на вашем сайте может быть сделано с помощью кодирования в файлах вашей темы или с помощью плагинов; Есть много, много способов сделать это. Для этого урока мы добавим отзывы в виджет боковой панели. Я покажу вам два способа сделать это с помощью плагина: простой и лучший.

Отображение пользовательских сообщений в виджете: легкий путь

Для этого примера мы будем использовать плагин Special Recent Posts . Установите и активируйте его, а затем перейдите в Настройки> Виджеты . Перетащите виджет на боковую панель.

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

1. Я изменил заголовок виджета на « Недавние обзоры», а лимит поста на 2 .
2. Нет миниатюр, так как нет никаких связанных с отзывами.
3. Под опциями публикации я решил использовать полную длину для длины содержимого публикации . Установите флажок Включить фильтры WordPress , потому что мы будем использовать это позже.
4. Никаких изменений в Advanced Post Options 1 или 2.
5. В разделе « Параметры фильтрации» введите свое пользовательское имя сообщения в последнем поле (если оно не работает, попробуйте единственную версию — обзор или рецензии).
6. Сохранить виджет

Вот как это выглядит на моей боковой панели:

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

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

Custom Content Shortcode — удивительно полезный плагин, который позволит вам отображать любой тип контента в любом месте на вашем сайте, включая виджеты. Он имеет некоторую кривую обучения, но у него также есть отличная документация, которая включена в справочный раздел прямо на панели администратора. Он обеспечивает большой контроль над тем, что отображается, и не разочарует, если вы потратите немного времени на изучение того, как его использовать. Это инструмент, который вы можете использовать снова и снова на вашем сайте или в блоге.

Вам нужно немного освоиться с HTML и CSS, чтобы стилизовать отображение этого виджета — просто дайте вам знать. Это не выглядит так много прямо из коробки. Вы можете добавить стили в файл style.css вашей темы.

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

В меню «Настройки»> «Виджеты» перетащите текстовый виджет на боковую панель и добавьте заголовок.

Я покажу вам, как настроить шорткод для этого примера, но я настоятельно рекомендую вам просмотреть раздел « Справочник » для плагина, который вы найдете на странице плагинов (вы увидите ссылку на него под название плагина). Это очень мощный инструмент!

Вот шорткод, который я использую. Я пойду через это строка за строкой.

Для loop type введите имя своего настраиваемого поля, возможно единственного числа (если это не работает, попробуйте множественное число).

Field — это имя настраиваемого поля, которое вы использовали в Gravity Forms. Value — это значение, связанное с переключателем в Gravity Forms.

Эти элементы управляют циклом, что означает, что он будет проходить каждую запись ‘обзора’ один за другим, отображая элементы со значением ‘boulder_case’, пока не будет просмотрен их все.

Таким образом, внутри вашего цикла будут отображаться три вещи: содержание сообщения (из поля «Тело» в Gravity Forms), заголовок (имя пользователя) и дата публикации.

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

Вероятно, это выглядит как беспорядок, но все содержимое там, и вы заметите, что отображаются только сообщения с определенным значением, которое вы ввели. Это мощно; это означает, что вы можете создать виджет обзора для каждого продукта   вместо того, чтобы смешивать все отзывы.

Так что теперь вам нужно сделать некоторое форматирование, чтобы все выглядело лучше — нужно немного HTML.

Это делает вещи намного проще для чтения, но теперь для их оформления нужен CSS. Я добавлю несколько классов в этот код для стилизации.

А вот и готовый продукт, полностью стилизованный и готовый для большего количества контента.

Завершение

Итак, теперь вы знаете:

• как и когда создать пользовательский тип записи
• как создать форму для сбора пользовательского контента для вашего пользовательского типа сообщения
• как отобразить эту форму на странице или посте
• как отображать ваши собственные сообщения в виджете с помощью простого плагина
• как отображать ваши собственные сообщения с большим контролем

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