Simple Tour Guide

Описание

Simple Tour Guide е лесно за използване потребителско ръководство стъпка по стъпка, което позволява бързо и лесно въвеждане на посетителите във вашия сайт с помощта на изскачащи прозорци.
Разширението предоставя един чудесен начин да запознаете потребителите с вашия продукт или услуга – като ги насочвате визуално към различните елементи на вашия уебсайт.
Интерактивното потребителско ръководство е един чудесен начин за повишаване на потребителското преживяване. Това разширение е базирано на Shepherd.js – олекотена vanilla JavaScript библиотека с отворен код.
Персонализирайте текста, броя на изскачащите прозорци (стъпките) и връзката към всеки DOM елемент като се възползвате от удобния потребителски административен интерфейс на този плъгин.

Опции на плъгина

Можете да създадете ръководство и да добавите към него толкова стъпки, колкото желаете, от раздела „Създаване на ръководство“. Можете да добавите заглавие към всяка стъпка, описание, както и да свържете стъпката с конкретен елемент от DOM дървото и да добавите допълнителен css клас към нея. Можете също така да изберете да покажете ръководствотo само веднъж или да гo покажете при всяко зареждане на страницата (тестови режим) и да поискате потвърждение, когато щракнете върху бутона за затваряне. Друга чудесна функция е възможността да изберете на кои страници да се покаже ръководството. Ако желаете, можете също така да изберете да покажете ръководството само на влезли в сайта потребители и да забраните достъпа до останалата част от сайта, докато ръководството е активна. Можете също така да добавите лента за напредък, за да покажете на потребителите колко стъпки остават до края на ръководството, както и да персонализирате цветовете на бутоните за стъпки и лентата за напредък чрез раздела „Стилове“.

Снимки на разширението

  • Страница с настройки на плъгина: добавяне на стъпки
  • Страница с настройки на плъгина: Настройки на ръководството
  • Страница с настройки на плъгина: Стилове
  • Фронт енд част на плъгина

Инсталиране

  1. Изберете лесния начин и инсталирайте чрез инсталатора на плъгини на WordPress или изтеглете .zip файла и качете разархивираната папка в директорията /wp-content/plugins/.
  2. Активирайте плъгина чрез менюто „Разширения“ в WordPress

ЧЗВ

Как да добавяте, редактирате или изтривате стъпки?

От админ панела на WordPress отидете в Настройки => Simple Tour Guide и добавете колкото стъпки искате.

Мога ли да свържа стъпка към даден елемент на страницата?

Разбира се, че можете! Инспектирайте елемента на страницата с инструмента за разработване на браузъра (щракнете с десния бутон на мишката => инспектирайте елемента) и след това добавете селектора на елемента в полето „Позиция на стъпката“ от раздела „Създаване на ръководство“. Можете да добавите селектор за клас, id или таг по следния начин: .class, #id, tag. Ако не зададете селектор, няма проблем, тогава стъпката ще се появи точно в средата на екрана.

Мога ли да покажа ръководствотo само веднъж?

Абсолютно! Всъщност по подразбиране плъгинът скрива ръководството, когато потребителят го завърши или прекрати. Въпреки това можете да изберете да показвате стъпките при всяко презареждане на страницата (тестови режим) от раздела „Настройки на ръководството“.

Как да покажа ръководството само на една страница?

Отидете в раздела „Настройки на ръководството“, махнете отметката от квадратчето „Показване на ръководството на всички страници“ и копирайте шорткода [stg_kef]. След това преминете към желаната страница или публикация, щракнете върху "редактиране" и поставете шорткода в горната част на публикацията.

Как да персонализирам стила на стъпките?

Отидете в раздела „Стилове“ и стилизирайте ръководството по подходящ начин. За допълнителни персонализации можете да използвате името на класа .stg или да добавите допълнителен css клас към всяка стъпка от раздела „Създаване на ръководство“. Отидете в Изглед=> Настройки => Допълнителен css и добавете там свои собствени стилове.

Мога ли да създам повече от една ръководство?

В pro версията на плъгина можете да създавате неограничен брой ръководства за посетителите на вашия сайт. Безплатната версия поддържа само една ръководство.

Мога ли да добавя фоново покритие, за да деактивирам останалата част от сайта, докато ръководството е активно?

Да, тази функция е налична от версия 1.03. Всичко, което трябва да направите, е да поставите отметка на опцията „Показване на модално фоново покритие, когато ръководството е активно“ в раздела Опции на ръководството. Това ще ограничи взаимодействие със сайта, докато потребителят не завърши или не прекрати ръководството.

Ръководството спира, когато свържа стъпка с елемент, който не е видим. Какво мога да направя?

Това може да се случи, когато свържете стъпка към елемент на страницата, който е скрит с помощта на css при определени размери на екрана. Например елемент от менюто за мобилни устройства, който е скрит, докато потребителят не отвори менюто. Ако потребителят все още не е отворил менюто, ръководствота може да спре по средата. За щастие, има няколко решения на този проблем.

Най-лесният начин да поправите това е да не прикрепвате стъпката към елемента и тогава тя ще се появи в средата на екрана.

От версия 1.04 можете да прескочите стъпка, ако елементът, който е свързан с нея, се появи извън екрана. Всичко, което трябва да направите, е да отидете в „Настройки на ръководството“ и да добавите отметка към „Пропускане на стъпка, ако стъпката е прикрепена към елемент, но елементът не се вижда“. Моля, обърнете внимание, че пропускането на стъпка няма да работи за елементи, които не съществуват в DOM дървото (например съдържание, видимо само за регистрирани потребители). В този случай най-добрият вариант е да използвате допълнителен css, за да скриете стъпката.

Друго решение би могло да бъде „отделянето“ на стъпката от елемента, към когото е свързана, само за този размер на екрана.. По този начин стъпката ще се появи в центъра на екрана и ръководствота ще продължи да работи добре. Добавете следния css към Изглед => Настройки => Допълнителен css:

@media(max-width:62em) {
    .stg[data-popper-reference-hidden]{
        opacity: 1 !important;
        visibility: visible !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: auto !important;
    }
    .stg[data-popper-reference-hidden] > .shepherd-arrow {
        display: none;
    }
}

Горният код е насочен само към потребителите на мобилни устройства и таблети и отделя стъпката от елемента към която е била свързана.

Избрах опцията за прескачане на стъпка, но стъпката продължава да се показва. Какво се случва?

Опцията за прескачане на стъпка работи само за елементи, които са скрити или се намират извън екрана, но не и за несъществуващи елементи. Ако елементът липсва в DOM дървото, стъпката ще се появи в средата на екрана и това е стандартното поведение. Въпреки това, все пак ще можете да я скриете с помощта на допълнителен css.
Валиден случай на употреба за това е, ако имате допълнително съдържание за регистрирани потребители и искате да скриете стъпката, която е свързана с него, за нерегистрираните потребители. За да направите това, трябва да отидете на страницата с настройки на плъгина => да изберете раздел Създаване на ръководство => допълнителен css клас и да добавите допълнителния css клас към стъпката, която искате да скриете, да кажем my-hidden-step. След това отидете в Изглед => Настройки => Допълнителен css и добавете следния код:

.shepherd-enabled.my-hidden-step {    
    visibility: hidden;
}
.logged-in .my-hidden-step {
    visibility: visible;
}

Горният код ще скрие стъпката за нерегистрираните потребители, но ще я покаже на регистрираните потребители.

Мога ли да покажа ръководствотo само на регистрирани потребители?

От версия 1.02 можете! Можете да поставите отметка пред опцията „Показвай ръководството само на влезли в системата потребители“ в раздела Опции на ръководството.

Мога ли да стартирам ръководство с потребителско действие?

Да, в pro версията на плъгина можете да добавите бутон с име на класа stg-start-tour

Мога ли да стартирам ръководството в администрацията на WоrdPress?

Не, обхватът на този плъгин е само видимата за посетители част на сайта. За да покажете ръководство в админ панела, можете да опитате с плъгина Custom Welcome Guide.

Има ли повече възможности?

Проверете премиум версията на плъгина. Ако надградите, ще получите допълнителни опции, както и достъп до приоритетна поддръжка и актуализации.

Отзиви

02.02.2025
Very useful and easy to set up. Works for complex tours as well. Allows you to customize colors, logos and more. Overall a great plugin that simply does the job!
30.08.2024
Works super well. The only feedback I have is: It would be great if you could select wether the tour view is being saved as a cookie or on the user account. I have logged in users, and when they see clear their cookies, they will see the tour again, which is kind of annoying for them.
16.04.2023
The plugin is free and simple to use. However, I need to show a different set of tour steps for different pages.For example, the „Welcome to the site“ message should only be visible on the home page. It should not pop up again when a user navigates to the Shop or the About page.To solve this problem, I tried to use the „Skip a step if the step is attached to an element that is not visible.“ option in the settings. Unfortunately, instead of skipping the step when it cannot find the class or id in the html, it floats the step in the center of the page.And thats not what I want.So for now, I’ll have to build the tour only on the home page, which is frustrating. Multipage tours would be much appreciated.Thank you for the plugin however. It’s actually pretty handy.
13.01.2022
Cool But, It doesn’t like going down and then back up the page. It prefers one direction. (down) The popup is working, but you have to scroll up to see it. Doesn’t work on :before :after tags An alternative is: Intro Tour Tutorial DeepPresentation and goes up and down anytime and has a front end editor, but its interface is not clean. BUT I’m using both on 2 different sites. They serve their purpose on each.
28.12.2021
A must have for anyone who actually strives to deliver a great end-user experience. The support is great…very timely and flexible. [removed link]
Прочетете всички 12 отзива

Сътрудници и разработчици

“Simple Tour Guide” е софтуер с отворен код. Към разширението са допринесли следните хора:

Сътрудници

“Simple Tour Guide” е преведено на 4 езика. Благодарности на преводачите за техния принос.

Превеждане на “Simple Tour Guide” на вашия език.

Имате интерес към разработване?

Преглеждане на кода, разглеждане на SVN хранилище, или абонамент към програмната история (log) чрез RSS.

Списък с промени

1.1.6 – March 2025

  • Актуализиране на документацията.

1.1.5 – February 2025

  • Актуализиране на логото и раздела с въпроси.

1.1.4 – February 2025

  • Актуализиране на логото и документацията.

1.1.3

  • Добавяне на опция за показване на ръководството само на десктопа.

1.1.2

  • Поправяне на грешки при премахване на стъпки в режим TinyMCE. Добавяне на проверка за потвърждение при изтриване на стъпка.

1.1.1

  • Оптимизиране на кода и деактивиране премахването на първата стъпка. Подобряване на потребителския интерфейс. Премахване на ненужните инициализации на стъпки преди запазване.

1.1.0

  • Добавяне на опция за писане на html към стъпките.

1.0.9

  • Възможност да бъде прекратено ръководството и валидиране на имената на класовете

1.0.8

  • Прекратяване на ръководството, ако последната стъпка е пропусната; показване на пропуснатите стъпки, когато са видими

1.0.7

  • Използване на един js файл за всички поддържани версии на wp. Актуализиране на функциите за превод.

1.0.6

  • Премахване на Freemius SDK. Актуализиране документацията. Минифициране на shepherd js.

1.0.5

  • Интегриране на Freemius SDK

1.0.4

  • Добавяне на опция за прескачане на стъпка за по-добър потребителски интерфейс и пренаписване на функцията за обратна съвместимост. Актуализиране на документацията.

1.0.3

  • Добавяне на опция за показване на тъмен фон, който да покрива сайта, докато потребителят не завърши ръководствота.

1.0.2

  • Добавяне на опция за показване на ръководството само на влезли в системата потребители.

1.0.1

  • Преработване и оптимизиране на функцията за намаляване на броя стъпки. Скриване на ръководствоо, след като потребителят го завърши или отхвърли. Актуализиране на css.

1.0.0

  • Първа публично достъпна версия на плъгина. Актуализиране на css.