Как использовать контекстную справку WordPress для улучшения UX (5 шагов)

Что такое контекстная справка WordPress?

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

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

Это экран контекстной справки WordPress по умолчанию:

Как и ожидалось, он дает краткое описание того, что пользователи видят на экране администратора и как его использовать.

Теперь посмотрите на экран контекстной справки пользователя:

Вся информация на вкладке справки WordPress теперь напрямую соответствует меню и функциям пользователей.

Обновление контента

Бесплатная электронная книга по безопасности

21-ступенчатый контрольный список для
Защищайте сайт WordPress на 99,9%

(4 страницы)

скачать

Нужно ли беспокоиться о контекстной помощи? 🤔

Есть несколько способов помочь пользователям WordPress.

Для разработчиков тем и плагинов WordPress вы можете предоставить:

Снимок экрана с инструментом, подобным iThemes, или полная демонстрация, подобная тем, которые можно найти на рынке Envato:

Список часто задаваемых вопросов, которые ожидают от пользователей вопросов или формальной документации:

Вебинары в реальном времени и предварительно записанные учебные пособия:

Поддержка с тикетами на WordPress.org или поддержка в режиме реального времени (ссылка на публикацию чата в реальном времени) через его веб-сайт в качестве провайдера, такого как Pressable

Для разработчиков WordPress, групп поддержки и других прямых поставщиков вы можете предоставить:

Помощь через портал поддержки или специальные каналы электронной почты, такие как Story Agency, оказала:

White-label доски WordPress с поддерживающими материалами. В отличие от многих других видов помощи, которые мы можем предоставить, она находится в WordPress. Такие инструменты, как руководства пользователя по видео и плагин WP 101, позволяют вставлять видеоуроки и другие руководства непосредственно в панель управления WordPress.

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

Контекстная справка WordPress предоставляет еще один способ познакомить людей с CMS и ее возможностями. Это дает вам возможность заполнить пробелы, в которых надстройки, темы и пользовательские типы сообщений оставляют вас открытыми для интерпретации.

Почему WordPress контекстная помощь?

Nielsen Norman Group утверждает, что все системы контекстной помощи имеют одинаковые характеристики и, следовательно, приносят пользу конечному пользователю:

1. Они обеспечивают постоянную поддержку, не мешая опыту, так как пользователь должен сначала выполнить его.
2. Они кратко написаны, чтобы не перегружать вас слишком большим количеством информации.
3. Они написаны описательно и простым языком, чтобы чрезмерно технический жаргон не мешал пониманию.
4. Они содержат минимальное пространство, что делает их менее отвлекающим.
5. Поскольку они относятся непосредственно к задачам на экране администратора перед ними, легко сосредоточить внимание обученных пользователей на том, что они делают.

Все еще не уверены, почему контекстная помощь для WordPress является разумным выбором?

В Manualise есть хорошее описание того, зачем это нужно разработчикам тем и плагинов WordPress:

И Torque выступает в пользу разработчиков WordPress и специалистов по обслуживанию:

Если вы хотите начать предоставлять правильную контекстную помощь пользователям WordPress, давайте посмотрим, как именно вы можете это сделать.

Как добавить контекстные справочные экраны в WordPress

Этот тип контекстной справки будет доступен для меню WordPress по умолчанию. Это означает две вещи, когда дело доходит до вас:

1. WordPress уже заложил основу для вас. Контекстно-зависимые справочные экраны просты и точны, охватывая основные основы. Это еще одна вещь, о которой стоит беспокоиться.

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

Если вы несете ответственность за установку и обслуживание плагинов и тем на веб-сайте клиента, отсутствие помощи со стороны разработчика плагинов или тем может быть неудовлетворительным.

Например, вот экран меню плагина Yoast:

Как вы можете видеть, Yoast не добавил здесь контекстную справку. Тем не менее, он добавил экраны справки в других частях WordPress для разработки функций SEO, которые включены для пользователей:

Этот конкретный пример существует на экране Stripe Products. Это совершенно другой продукт, и все же экран справки имеет смысл в этом контексте.

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

Вот что вам нужно сделать:

Шаг 1: Установите цель 🥅

Решите, для чего вам нужно контекстное меню помощи.

• Нужно познакомить пользователей с функциями плагина?
• Нужно объяснить уникальные настройки и функции вашей темы пользователям, которые хотят ее настроить?
• Нужно объяснить, что такое недавно добавленный пользовательский тип записи и как его должны использовать ваши клиенты?
• Вы хотите предоставить ссылки на дополнительные справочные материалы или учебные пособия, которые развивают расширенные функции или функциональность в WordPress?

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

Шаг 2: создать каркас 🖼️

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

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

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

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

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

Шаг 3: Откройте редактор ✍️

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

По сути, мы собираемся использовать функцию get_current_screen (), чтобы подключиться непосредственно к плагину или меню темы. Функция add_help_tab позволит нам вставлять наши персонализированные сообщения туда, куда мы хотим, чтобы они отправлялись.

Чтобы добавить контекстную помощь к плагинуПерейти к Плагины> Редактор экран.

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

Убедитесь, что вы нажали на файл PHP основного плагина. Это тот, который мы будем редактировать.

Добавить контекстную помощь в темуПерейти к Внешний вид> Редактор экран.

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

Это файл, который мы будем редактировать.

Шаг 4. Добавьте вкладку «Справка» на экран администрирования 📑

Теперь давайте добавим код в конец выбранного файла.

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

add_context_menu_help () function {
// получить текущий экранный объект
$ current_screen = get_current_screen ();
// содержимое для вкладки справки
$ content = '

Нам нужно поговорить о том, что здесь происходит. Я не хочу утомлять вас деталями, но это серьезно.

«;
$ filler = '

Обратите пристальное внимание!

Обновление следующих настроек может повлиять на производительность вашего сайта. Прежде чем вносить какие-либо изменения, уточните у своего разработчика. Джейсон в 555-555-4321.

«;
// зарегистрируем главную вкладку справки
$ current_screen-> add_help_tab (массив (
'id' => 'sp_basic_help_tab',
'title' => __ ('Помоги мне, помоги мне'),
'content' => $ content
)
);
// зарегистрируем вкладку вторичной помощи
$ current_screen-> add_help_tab (массив (
'id' => 'sp_advanced_help_tab',
'title' => __ ('More information'),
'content' => $ padding
)
);
}
add_action ('admin_head', 'add_context_menu_help');

В приведенном выше фрагменте вы должны отредактировать:

• Строка "id"
• Тег "Заголовок"
• Функция «Контент»
• $ содержание сообщения

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

Говоря об этом, я должен упомянуть, что, как код написан выше, это сообщение справки теперь будет отображаться на каждой странице меню вашего плагина или темы. Например, я добавил этот код в PHP-файл плагина Yoast SEO. Вот как выглядит главная страница сейчас:

Мои новые вкладки даже были добавлены на экраны, где в Yoast уже был экран справки:

Если вы предпочитаете создавать отдельные экраны справки для отдельных плагинов или тематических страниц, внесите следующие изменения:

add_help_screen_to_yourpagename () function {
// получить текущий экранный объект
$ current_screen = get_current_screen ();
// показать только на социальной странице
if ($ current_screen-> post_type == social && $ current_screen-> base == 'edit') {
$ content = '';
$ content = '

Нам нужно поговорить о том, что здесь происходит. Я не хочу утомлять вас деталями, но это серьезно.

«;
$ filler = '

Обратите пристальное внимание!

Обновление следующих настроек может повлиять на производительность вашего сайта. Прежде чем вносить какие-либо изменения, уточните у своего разработчика. Джейсон в 555-555-4321.

«;
// зарегистрируем главную вкладку справки
$ current_screen-> add_help_tab (массив (
'id' => 'sp_basic_help_tab',
'title' => __ ('Помоги мне, помоги мне'),
'content' => $ content
)
);
// зарегистрируем вкладку вторичной помощи
$ current_screen-> add_help_tab (массив (
'id' => 'sp_advanced_help_tab',
'title' => __ ('More information'),
'content' => $ padding
)
);
}
}
add_action ('admin_head', 'add_help_screen_to_yourpagename');

Обратите внимание на моменты, когда мы говорим WordPress только добавить экран справки на определенную страницу.

Шаг 5: Добавьте боковую панель на экран справки 📊

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

Чтобы добавить это в меню, вот код, который нужно вставить в тот же файл PHP:

// добавить боковую панель в меню справки
add_help_sidebar () function {
// получить текущий экранный объект
$ current_screen = get_current_screen ();
// добавляем боковую панель
$ current_screen-> set_help_sidebar (
'