myCred Progress Map - Плагин WordPress

Руководство по настройке и применению myCred Progress Map

myCred Progress Map нужен не для того, чтобы просто добавить на страницу красивую шкалу. Этот аддон показывает пользователю путь к бейджу: какие уровни уже закрыты, какие шаги остаются и почему следующий целевой уровень вообще достижим. В этом руководстве разберём, как подготовить WordPress-сайт, включить карту в myCred, связать её с бейджами, вывести результат через [mycred_badges] и проверить, что карта действительно отражает прогресс конкретного пользователя.

Материал рассчитан на владельца сайта, администратора сообщества, автора курса или вебмастера, который уже использует myCred как систему баллов, рангов и бейджей. Если myCred ещё не настроен, сначала придётся создать точечную экономику: за какие действия начисляются баллы, какие события попадают в журнал, какие бейджи и уровни должен видеть пользователь. Progress Map не заменяет эту логику, а делает её понятной в публичной части сайта.

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

Как карта прогресса связана с myCred, бейджами и действиями пользователя

Главная особенность Progress Map в том, что он работает поверх уже существующей модели myCred. В myCred есть баллы, журнал начислений, хуки для автоматических событий, ранги и бейджи. Официальная документация Progress Map отдельно подчёркивает зависимость от Badges add-on: без активных бейджей карта не сможет показать путь к уровню, потому что ей нечего визуализировать.

Это важно понять до установки. Если на сайте пока нет правил начисления баллов или бейджей с уровнями, карта будет выглядеть пустой или бесполезной. Пользователь должен совершать действия, myCred должен записывать эти действия в журнал, бейдж должен иметь требования, а Progress Map должен получить готовую последовательность уровней и показать её как вертикальный или горизонтальный путь.

Цепочка работы без лишней магии

Упрощённо механизм выглядит так: пользователь выполняет действие, myCred hook начисляет баллы или фиксирует событие, бейдж проверяет требования, а карта показывает, какие уровни завершены и какие остаются. Поэтому при настройке нельзя ограничиться цветом карты. Нужно проверить всю цепочку от события до визуального результата.

1. В myCred включён нужный хук, например начисление за вход, комментарий, просмотр материала, покупку или другое поддерживаемое действие.
2. В разделе бейджей создан бейдж с требованиями и, если нужно, несколькими уровнями.
3. Бейдж опубликован, а его требования связаны с теми событиями, которые реально попадают в журнал myCred.
4. Progress Map включён в Toolkit и настроен в общих настройках myCred.
5. На странице, где пользователь должен видеть путь, размещён shortcode [mycred_badges].

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

Чем Progress Map отличается от обычной полосы прогресса

У myCred есть отдельные инструменты для полосы прогресса бейджей и рангов, например shortcode [mycred_badges_progress]. Progress Map решает другую задачу: не просто показывает процент или радиальную шкалу, а раскладывает движение по уровням и делает его похожим на маршрут. Это особенно полезно там, где пользователь проходит серию достижений: уровни курса, участие в сообществе, покупательская активность, серия заданий или постепенное открытие статуса.

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

Кому подойдёт myCred Progress Map и где он будет лишним

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

Подходящие сценарии

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

• Обучающий сайт, где бейджи выдаются за завершение уроков, тестов, модулей или практических заданий.
• Сообщество, где достижения связаны с комментариями, публикациями, входами, участием в обсуждениях или вкладом в контент.
• WooCommerce-сайт, где myCred используется для программы лояльности, а бейджи отражают повторные покупки, отзывы или активность покупателя.
• Закрытый клуб или membership-проект, где участник должен видеть путь от новичка к более высокому статусу.
• Игровой или конкурсный раздел, где карта уровней помогает объяснить правила без длинной инструкции.

Когда лучше не начинать с карты

Progress Map не стоит ставить первым шагом, если сама система достижений ещё не продумана. Пользователь быстро замечает разницу между полезной картой и красивой, но пустой шкалой. Если действия начисляются хаотично, бейджи не имеют понятных названий, а уровни не связаны с реальным поведением, карта лишь подсветит слабую логику.

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

Аддон также может быть лишним для лендинга, сайта-визитки, простого блога без личных кабинетов или проекта, где пользователи не входят в аккаунт. Карта показывает персональный путь, поэтому гостевой трафик без учётных записей не сможет использовать её в полную силу.

Что проверить перед установкой на WordPress

Подготовка экономит больше времени, чем сама установка. У Progress Map мало публично описанных настроек, но он зависит от нескольких соседних частей myCred. Поэтому сначала проверьте окружение, затем переходите к загрузке ZIP-архива и включению аддона.

Зависимости и состояние myCred

На сайте должен быть установлен и настроен базовый myCred. В WordPress.org-каталоге myCred описан как система для баллов, бейджей, рангов и вознаграждений. Для Progress Map особенно важны две части: Badges add-on и хуки, которые создают события для начисления. Документация myCred также рекомендует включать только те add-ons и hooks, которые реально используются, чтобы не держать лишние процессы активными.

• Проверьте, что myCred активен и доступен в админ-панели.
• Убедитесь, что в myCred создан хотя бы один рабочий тип баллов, если сайт использует несколько валют или программ.
• Включите Badges add-on через myCred - Add-ons, потому что Progress Map работает с бейджами.
• Проверьте, что нужные hooks активны в myCred - Hooks и действительно пишут события в журнал.
• Отключите add-ons и hooks, которые были включены только для теста и не участвуют в сценарии карты.

Требования бейджа

Создание бейджа - не формальность. В документации myCred для badges требования строятся вокруг references, то есть событий, которые myCred фиксирует в журнале. Если бейдж должен выдаваться за комментарии, покупки или входы, эти события должны быть активны и должны накопиться у тестового пользователя.

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

Страница для вывода

Официальная документация Progress Map указывает вывод через [mycred_badges]. Этот shortcode показывает опубликованные бейджи, а не только заработанные пользователем. Поэтому страница должна быть понятной: «Мои достижения», «Прогресс обучения», «Карта наград» или другой контекст, где пользователь ожидает увидеть бейджи и требования.

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

Установка и первичное включение аддона

Установка проходит как у обычного WordPress-плагина, но после активации работа не заканчивается. В официальной карточке продукта описан путь через загрузку ZIP-файла в Plugins - Add New - Upload Plugin. После активации нужно найти настройки внутри myCred, включить модуль карты и проверить, что он появился в нужном разделе.

Порядок установки

1. Сделайте резервную копию сайта или хотя бы базы данных, если на сайте уже есть активные пользователи и журнал myCred.
2. Откройте админ-панель WordPress и перейдите в Plugins - Add New.
3. Нажмите Upload Plugin, выберите архив mycred-progress-map.zip и запустите установку.
4. После загрузки нажмите Activate Plugin.
5. Перейдите в myCred - Toolkit и включите переключатель Progress Map, если он не активен автоматически.
6. Откройте myCred - General Settings и найдите секцию Progress Map.

На этом этапе не меняйте сразу все цвета и режимы. Сначала убедитесь, что секция доступна, Badges add-on включён, а shortcode на тестовой странице выводит бейджи. Только после этого стоит переходить к дизайну карты.

Первая проверка после включения

Создайте временную страницу, добавьте shortcode [mycred_badges] и откройте её в приватном окне или под тестовым пользователем. Если страница показывает бейджи, но карта не видна, вернитесь к настройкам Progress Map и Badges. Если не видно даже бейджей, проблема раньше в цепочке: Badges add-on, публикация бейджа, требования или сам shortcode.

Мини-итог: успешная установка означает не только активный плагин в списке WordPress, но и рабочую связку Toolkit -> Progress Map -> [mycred_badges] -> видимый результат на странице.

Настройка карты: цвета, направление, выравнивание и число уровней

Раздел Progress Map в общих настройках myCred отвечает за то, как карта будет выглядеть на странице. Официальная документация перечисляет настройки цветов, направление карты и выравнивание для вертикального режима. Для горизонтального режима дополнительно задаётся количество уровней, которые должны быть видны.

Какие параметры настраивать первыми

Начните с направления и выравнивания, а не с цветов. Direction определяет, как пользователь будет читать путь: сверху вниз или слева направо. Цвета можно подобрать позже, когда будет понятно, сколько уровней помещается в реальном макете страницы.

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

Вертикальная карта

Вертикальная карта хорошо подходит для длинного пути с несколькими уровнями. Она читается как лестница достижений и проще помещается в боковой колонке, личном кабинете или обучающем модуле. В настройках можно выбрать выравнивание Left, Center или Right. Обычно Center выглядит аккуратно на отдельной странице, а Left лучше работает рядом с текстовым объяснением.

Не выбирайте выравнивание только по вкусу администратора. Смотрите на реальную страницу: где заголовок бейджа, где изображение, где требования, где кнопки или ссылки рядом. Если карта находится слишком далеко от названия бейджа, пользователь перестаёт понимать, к чему относится прогресс.

Горизонтальная карта

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

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

Бейджи, уровни и hooks: что должно быть настроено до вывода карты

Самая частая ошибка при работе с картой прогресса - считать её отдельным визуальным виджетом. На практике она зависит от структуры бейджей. Документация myCred объясняет, что бейджи могут выдаваться автоматически по событиям в журнале, вручную администратором или через уровни. Progress Map становится полезным именно там, где уровни отражают последовательность требований.

Как выбрать событие для бейджа

Перед созданием бейджа решите, какое событие будет доказательством прогресса. myCred называет такие события references. Это может быть вход на сайт, публикация комментария, просмотр контента, покупка, выполнение действия в поддерживаемом расширении или другое событие, которое реально фиксируется hook-ом.

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

Уровни бейджа

Уровни особенно важны для Progress Map. В документации по созданию бейджей указано, что разные уровни могут использовать те же references, но иметь разные значения требований. Для карты это означает понятную шкалу: например, один комментарий, десять комментариев, пятьдесят комментариев; один урок, пять уроков, завершение курса; первая покупка, несколько покупок, активный участник программы.

Названия уровней лучше делать короткими и человеческими. Пользователь должен понимать не внутренний ключ события, а смысл достижения. Вместо «Level 1» и «Level 2» можно использовать «Первый шаг», «Уверенный участник», «Завершил маршрут», если такие названия соответствуют правилам сайта.

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

Если hook не активен, бейдж может никогда не обновиться. Если hook активен, но пишет не тот reference, бейдж не увидит событие. Если hook имеет лимит, пользователь может выполнить действие, но не получить новое начисление, потому что лимит уже исчерпан. Все три ситуации выглядят для пользователя одинаково: карта не меняется.

1. Выполните действие под тестовым пользователем.
2. Откройте журнал myCred и проверьте, появилась ли запись.
3. Сравните reference записи с требованием бейджа.
4. Проверьте, достиг ли пользователь нужного количества или суммы по требованию.
5. Обновите страницу с [mycred_badges] и сравните состояние карты.

Хорошая настройка карты начинается не с дизайна, а с проверенного журнала событий. Если журнал пустой или reference не совпадает, цвет и направление карты не исправят проблему.

Практический сценарий: карта достижений для обучающего сайта

Разберём предметный пример. Допустим, на WordPress-сайте есть небольшой курс, и владелец хочет показывать участнику путь к бейджу «Завершил обучение». В myCred уже начисляются баллы за завершение уроков или другой подтверждённый учебный шаг. Задача - сделать страницу, где пользователь видит не только бейдж, но и карту уровней.

Цель сценария

Пользователь должен открыть страницу «Мой прогресс» и увидеть, какие уровни бейджа уже закрыты. Администратор должен понимать, что карта обновляется не вручную, а через требования бейджа и события myCred. Это снижает количество вопросов от участников и делает путь к награде прозрачным.

Подготовка

Перед настройкой нужны четыре элемента: активный myCred, включённый Badges add-on, событие начисления, которое попадает в журнал, и бейдж с несколькими уровнями. Если сайт использует LMS-плагин или WooCommerce, не придумывайте связь на глаз. Проверьте, поддерживает ли ваш сценарий нужное событие в myCred или через интеграцию.

• Создайте тестового пользователя без административных прав.
• Убедитесь, что тестовый пользователь может выполнить действие, которое должно вести к бейджу.
• Создайте или проверьте бейдж с уровнями, привязанными к этому событию.
• Опубликуйте отдельную страницу с shortcode [mycred_badges].

Шаги настройки

1. Включите Progress Map в myCred - Toolkit.
2. Откройте myCred - General Settings - Progress Map.
3. Выберите вертикальное направление, если уровней больше трёх и страница работает как личный кабинет.
4. Подберите цвет завершённых уровней так, чтобы он отличался от незавершённых, но не конфликтовал с темой.
5. Сохраните настройки через Update Settings.
6. Откройте страницу с [mycred_badges] под тестовым пользователем.
7. Выполните учебное действие, которое должно приблизить пользователя к уровню, и проверьте журнал myCred.
8. Вернитесь на страницу прогресса и проверьте, изменился ли статус уровня.

Ожидаемый результат и нюанс

Ожидаемый результат - на странице появляется список бейджей, а Progress Map визуально показывает путь по уровням. Завершённые элементы отличаются цветом, незавершённые остаются видимыми, а пользователь понимает, что именно он продвигается к награде.

Нюанс в том, что Progress Map не обязан обновиться в ту же секунду, если сайт агрессивно кеширует страницу для авторизованных пользователей или если событие ещё не записалось в журнал. Поэтому проверяйте результат в правильном порядке: действие, запись в журнале, выполнение требования бейджа, обновление страницы с картой.

Проверка результата на странице с [mycred_badges]

Проверка результата нужна не только перед публикацией. Её стоит повторять после обновления темы, myCred, Progress Map, кеш-плагина или настроек бейджей. Карта находится на стыке админ-панели и публичной части сайта, поэтому проблема может проявиться не там, где вы её ищете.

Что должен увидеть администратор

Под администратором обычно видно больше контекста, но это не лучший тест. Администратор может иметь доступ к настройкам, не совпадать с обычным участником по роли и уже иметь другие начисления. Используйте админ-аккаунт только для проверки, что shortcode вообще вставлен, страница опубликована, а стили не сломали вывод.

Что должен увидеть обычный пользователь

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

• Страница не должна быть пустой для авторизованного пользователя.
• Бейджи должны соответствовать опубликованным бейджам myCred.
• Завершённые уровни должны отличаться от незавершённых.
• Текст уровней должен читаться на фактическом фоне темы.
• Горизонтальная карта не должна ломать ширину страницы.
• Вертикальная карта должна быть визуально привязана к соответствующему бейджу.

Проверка на мобильной ширине

Даже если пользовательская аудитория в основном приходит с десктопа, страницу достижений стоит проверить на узкой ширине. Горизонтальный режим может стать тесным, длинные названия уровней могут переноситься некрасиво, а тема может менять отступы вокруг shortcode. Если карта выглядит перегруженной, не пытайтесь решить всё CSS-ом. Иногда проще выбрать вертикальный режим или сократить названия уровней.

Проверка результата: если пользователь за 5 секунд не понимает, какой уровень завершён и какой следующий, карта настроена недостаточно ясно, даже если технически она выводится.

Безопасное улучшение внешнего вида без правки плагина

Кодовые доработки для Progress Map стоит делать осторожно. В открытой документации не описаны стабильные публичные hooks именно для карты, поэтому не нужно придумывать PHP-фильтры или править файлы аддона. Зато документация shortcode [mycred_badges] показывает CSS-селекторы для списка бейджей. Это даёт безопасный путь: улучшить контейнер бейджей и читаемость карточек через Appearance - Customize - Additional CSS или через дочернюю тему.

CSS для аккуратной страницы достижений

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

/* Страница достижений myCred: выравнивание карточек бейджей */
ul.mycred-users-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-left: 0;
  padding-left: 0;
}

ul.mycred-users-badges div.the-badge {
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

ul.mycred-users-badges div.the-badge h3 {
  margin-top: 10px;
  line-height: 1.3;
}

После вставки CSS очистите кеш страницы и откройте раздел достижений под обычным пользователем. Если вид стал хуже, удалите фрагмент из Additional CSS или отключите его в дочерней теме. Не редактируйте файлы myCred или Progress Map напрямую: при обновлении такие правки легко потерять, а диагностика станет сложнее.

Почему карта прогресса не отображается или показывает неверный статус

Диагностику лучше вести по цепочке, а не случайно переключать настройки. Progress Map зависит от Badges add-on, опубликованных бейджей, hooks, журнала myCred, shortcode и темы. Если начать с CSS или кеша, можно пропустить главное: у пользователя просто нет события, которое закрывает уровень.

Карта не появляется на странице

Симптом

Страница с [mycred_badges] открывается, но карта прогресса не видна. Иногда при этом видны обычные бейджи, иногда блок пустой полностью.

Что проверить

• Включён ли Progress Map в myCred - Toolkit.
• Активен ли Badges add-on в myCred - Add-ons.
• Есть ли опубликованные бейджи и уровни, которые можно показать.
• Размещён ли shortcode [mycred_badges] на нужной странице без лишних символов вокруг него.

Как исправить

Сначала включите Badges add-on и Progress Map, затем проверьте бейджи. Если shortcode вставлен в блок редактора, используйте обычный shortcode-блок или текстовый блок без форматирования. Если карта появилась на чистой тестовой странице, проблема в окружении исходной страницы: тема, конструктор, кеш или лишняя обёртка.

Уровни не меняются после действия пользователя

Симптом

Пользователь выполнил действие, но карта всё равно показывает незавершённый уровень.

Что проверить

Откройте журнал myCred и найдите запись тестового действия. Если записи нет, проблема в hook-е или в самом действии. Если запись есть, сравните reference, количество и сумму с требованием бейджа. Проверьте лимиты hooks: они могут ограничивать частоту начислений, и повторное тестовое действие не даст нового результата.

Как исправить

Активируйте нужный hook, настройте reference в бейдже и выполните действие заново под тестовым пользователем. Если требование бейджа слишком сложное, временно создайте простой тестовый бейдж с одним уровнем и понятным событием. Так вы отделите проблему карты от проблемы логики достижения.

Горизонтальная карта ломает макет

Симптом

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

Что проверить

Проверьте параметр видимых уровней для горизонтального режима. Затем протестируйте страницу без кеша и без минификации CSS, если на сайте есть оптимизационный плагин. Слишком длинные названия уровней также могут растягивать блок.

Как исправить

Уменьшите количество видимых уровней, сократите названия уровней или переключитесь на вертикальный режим. Если проблема только в конкретной теме, используйте аккуратный CSS на странице достижений, но не меняйте файлы аддона.

Цвета карты плохо читаются

Симптом

Завершённые и незавершённые уровни формально отличаются, но пользователь не видит разницу или текст сливается с фоном.

Что проверить

Сравните цвета линии, завершённых уровней, незавершённого текста и завершённого текста. Проверьте страницу в реальной теме, а не только в админ-панели. Учитывайте фон контейнера: белая карточка, цветная секция и тёмная тема требуют разных контрастов.

Как исправить

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

После обновления или кеширования вид стал другим

Симптом

Карта работала, но после обновления плагинов, темы или настроек кеша отображение изменилось.

Что проверить

Очистите кеш сайта и браузера, проверьте страницу под тестовым пользователем, затем временно отключите минификацию CSS или объединение файлов, если оно включено. Если недавно менялись настройки бейджей, проверьте, не исчезли ли уровни или references.

Как исправить

Верните последнюю спорную настройку, затем включайте изменения по одному. Если проблема появилась после CSS-правки, удалите её. Если после обновления изменились настройки myCred, сравните Progress Map, Badges и Hooks, а не только внешний вид страницы.

Когда myCred Progress Map будет удачным выбором

myCred Progress Map стоит использовать, если у вас уже есть осмысленная система myCred: активные hooks, понятные бейджи, уровни и страница, где пользователь должен видеть свой путь. В таком случае карта делает достижения прозрачнее: не просто «у вас есть бейдж», а «вы прошли эти уровни и движетесь к следующему».

Если же на сайте нет продуманной логики баллов или бейджи создаются вручную без ясных требований, начните не с карты, а с модели достижений. Сначала настройте myCred, проверьте журнал, создайте один рабочий бейдж с уровнями и протестируйте его под обычным пользователем. После этого можно скачать последнюю версию myCred Progress Map, включить аддон и аккуратно вывести карту на странице достижений.

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