Инструкция к виджету «Контент замок» | Продвижение товаров и услуг для онлайн продаж

Благодарю за оплату!

Как получить виджеты:

Напишите письмо на: vs-bumerang@mail.ru сообщив, что оплатили стоимость виджета: Тема письма: Произвел оплату за виджет «Контент замок»(желательно, но не обязательно приложить чек об оплате/переводе).
После проверки платежа, в обратном письме отправим: архив с виджетом.

Еще вас могут заинтересовать калькуляторы и мини-сервисы для WordPress сайта — подробный список на этой странице.

Видео-инструкция

Здесь проигрыватель с видео-инструкцией

Текстовая инструкция по установке виджета, настройке и использованию

Что входит в комплект

Шаг 1 — Загрузи файл виджета на сайт

1. Открой FTP-клиент (FileZilla) или файловый менеджер хостинга
2. Перейди в корневую папку сайта (там где папки `wp-content`, `wp-admin`)
3. Создай папку `/calc/` если её нет
4. Загрузи файл `share01.html` в эту папку
5. Проверь: открой в браузере `https://твой-сайт.ru/calc/share01.html`
— должна появиться карточка-демо с двумя вкладками «За шеринг» и «Кодовое слово»

Шаг 2 — Установи плагин WPCode

1. В WordPress: **Плагины → Добавить новый**
2. Введи в поиск: `WPCode`
3. Нажми **Установить**, затем **Активировать**
4. В меню появится пункт **Code Snippets** (или WPCode)

Шаг 3 — Добавь PHP-сниппет (регистрация шорткодов)

1. **Code Snippets → + Add Snippet → Add Your Custom Code**
2. Название: `share01 шорткоды`
3. Тип кода (Code Type): **PHP Snippet**
4. Открой файл `share01-php-wpcode.php` — скопируй **весь** код
5. Вставь в поле редактора сниппета
6. Внизу в разделе «Insertion»: выбери **Run Everywhere**
7. Нажми **Save Changes & Activate** (переключатель должен быть зелёным)

Шаг 4 — Добавь JS-сниппет (обработчик на страницах)

1. **Code Snippets → + Add Snippet → Add Your Custom Code**
2. Название: `share01 обработчик`
3. Тип кода: **JavaScript Snippet**
4. Открой файл `share01-js-wpcode.js` — скопируй **весь** код
5. Вставь в поле редактора
6. В разделе «Insertion»: выбери **Footer** (чтобы загружался после HTML страницы)
7. Запуск: **Run Everywhere**
8. **Save Changes & Activate**

Шаг 5 — Настрой кодовые слова в файле виджета

Открой `share01.html` в любом текстовом редакторе (Notepad++, VSCode).
Найди блок **КОНСТАНТЫ** в начале JavaScript (примерно строка 200):

«`javascript
// — КОДОВЫЕ СЛОВА (5 штук, cw_id = 1..5) —
var CODEWORDS = {
1: ‘секрет1’,
2: ‘секрет2’,
3: ‘секрет3’,
4: ‘секрет4’,
5: ‘секрет5’
};
«`

Замени `’секрет1’` и т.д. на свои слова, например:

«`javascript
var CODEWORDS = {
1: ‘кошка’,
2: ‘открыть2024’,
3: ‘подарок’,
4: ‘vip’,
5: ‘bonus’
};
«`

Сохрани файл и перезагрузи его на хостинг (замени старый).

Шаг 6 — Настрой соцсети и счётчик

В том же блоке констант:

«`javascript
// — СОЦСЕТИ (убери ненужные) —
var SHOW_NETWORKS = [‘vk’, ‘tg’, ‘ok’];
// ‘vk’ = ВКонтакте
// ‘tg’ = Telegram
// ‘ok’ = Одноклассники

// — СЧЁТЧИК —
var SHOW_COUNTER = true; // false — скрыть счётчик
var COUNTER_START = 875; // стартовое число
var COUNTER_STEP = 1; // +1 каждые 10 секунд
«`

Хочешь только ВКонтакте и Telegram:
«`javascript
var SHOW_NETWORKS = [‘vk’, ‘tg’];
«`

Шаг 7 — Настрой тексты и стили

«`javascript
var SHARE_TITLE = ‘Получи доступ к закрытой части статьи’;
var SHARE_DESC = ‘Поделись статьей — и она сразу откроется’;
var CODE_TITLE = ‘Получи доступ к закрытой части статьи’;
var CODE_DESC = ‘Введи кодовое слово — и она сразу откроется’;

var TITLE_SIZE = ’18px’; // размер заголовка
var TITLE_COLOR = ‘#ffffff’; // цвет заголовка
var DESC_SIZE = ’14px’; // размер пояснительного текста
var DESC_COLOR = ‘rgba(255,255,255,0.72)’; // цвет пояснительного текста

Использование шорткодов в статьях

Шорткод 1 — Закрыть текст за шеринг

Вставь в любую статью WordPress:

[share_lock id=»1″]
Это секретный текст, который откроется после того как посетитель
поделится статьёй в соцсети.

Здесь может быть несколько абзацев, списки, ссылки — любой HTML.
[/share_lock]
«`

Параметр `id`** — порядковый номер блока на этой странице.
Если на одной странице несколько блоков — каждому свой номер (1, 2, 3…):

[share_lock id=»1″]Первый секретный блок[/share_lock]

Обычный текст между блоками…

[share_lock id=»2″]Второй секретный блок — требует отдельного шеринга[/share_lock]
«`

Шорткоды 2–6 — Закрыть текст кодовым словом

Параметр `cw` указывает номер кодового слова (1..5) из настроек виджета:

[code_lock id=»3″ cw=»1″]
Этот текст откроется после ввода кодового слова №1 (ты задал его в виджете).
[/code_lock]
«`

[code_lock id=»4″ cw=»2″]
Этот текст откроется после ввода кодового слова №2.
[/code_lock]
«`

Пример: два разных замка в одной статье

Обычное начало статьи…

[share_lock id=»1″]
Бонусный раздел, доступный после шеринга ВКонтакте, Telegram или ОК.
[/share_lock]

Продолжение статьи…

[code_lock id=»2″ cw=»1″]
VIP-раздел только для тех, кто знает кодовое слово.
(Слово №1 из настроек виджета — например «кошка»)
[/code_lock]
«`

Как вставить шорткод в Gutenberg (блочный редактор)

1. В статье нажми **+** → найди блок **«Шорткод»** (Shortcode)
2. Вставь код, например: `[share_lock id=»1″]твой текст[/share_lock]`
3. Опубликуй или обнови статью

Как вставить в классическом редакторе (TinyMCE)

Переключись на вкладку **«Текст»** (не «Визуально»), вставь шорткод, сохрани.

Важные правила использования id

Утилита шифрования (только для HTML-блоков без шорткодов)

Если вместо шорткода хочешь использовать чистый HTML-блок в редакторе (не желательно):

1. Открой в браузере: `https://твой-сайт.ru/calc/share01.html?tool=1`
2. Введи скрытый текст в верхнее поле
3. Нажми **Зашифровать**
4. Скопируй результат из нижнего поля
5. Вставь в HTML-блок статьи:

«`html
<!— Блок за шеринг —>
<div class=»share01-locker-wrap»
data-share01-type=»share»
data-share01-block=»1″
data-share01-content=»СЮДА_ЗАШИФРОВАННАЯ_СТРОКА»>
</div>
<div class=»share01-unlocked-content»
data-share01-reveal=»1″
style=»display:none;»>
Здесь тот же текст в открытом виде (для SEO не нужен — можно оставить пустым)
</div>
«`

Как работает защита от просмотра исходника

Скрытый текст в HTML страницы выглядит так:
«`
data-share01-content=»c2hhcmUwMXhvcmtleQ…»
«`
Это случайный набор символов — прочитать без расшифровки невозможно.
Расшифровка происходит только в браузере посетителя и только после выполнения условия (шеринг или кодовое слово).

Как работает шеринг (подробно)

1. Посетитель нажимает кнопку соцсети (например, ВКонтакте)
2. Открывается новое окно браузера с готовой формой шеринга ВКонтакте
— заголовок статьи и ссылка на неё подтягиваются автоматически
3. Посетитель нажимает «Опубликовать» в ВКонтакте и закрывает окно
4. При возврате фокуса на страницу виджет фиксирует событие и открывает контент
5. **Важно:** виджет фиксирует сам факт клика по кнопке соцсети —
это стандартный подход, используемый всеми подобными сервисами,
так как соцсети не предоставляют API-подтверждения публикации
6. При обновлении страницы контент снова закрывается (sessionStorage сбрасывается)

Проверка после установки

Открой любую статью с шорткодом. Ты должен увидеть:
— Тёмную карточку с замком, заголовком и кнопками соцсетей (или полем ввода)
— После клика по кнопке соцсети и возврата на страницу — карточка исчезает, текст появляется
— После обновления страницы — карточка снова на месте

Если карточка не появляется:
1. Проверь что PHP-сниппет активирован в WPCode (зелёный тумблер)
2. Проверь что JS-сниппет активирован в WPCode
3. Проверь что файл `share01.html` загружен в `/calc/` и открывается по прямой ссылке
4. В константах файла виджета убедись что путь `SHARE01_WIDGET_URL = ‘/calc/share01.html’` совпадает с реальным расположением файла

iframe для прямой вставки (без шорткода)

Если хочешь вставить виджет напрямую через iframe (например в конструкторе):

«`html
<iframe class=»calc-frame» src=»/calc/share01.html»
style=»width:100%;border:none;overflow:hidden;» scrolling=»no»></iframe>
«`

Памятка

— Имя файла: `share01.html` → загрузить в `/calc/` в корне сайта
— `calcId` внутри файла = `share01` = имя файла без расширения
— `postMessage` отправляет поля `calcId` + `calcHeight`
— Весь HTML, CSS и JS в одном файле ✓
— Нет внешних зависимостей и сторонних библиотек
— Все CSS-классы с префиксом `share01` или `s01-`
— Весь JS в IIFE, без глобальных переменных