Делаю поиск под Вордпресс, остальное не тестировал, плагин создал для себя.
✨ ВОЗМОЖНОСТИ ПЛАГИНА
✅ Визуальный конструктор на сайте
✅ Живой предпросмотр в реальном времени
✅ Генерация кода для вставки на любой сайт
✅ Сохранение настроек в БД WordPress
✅ Автосохранение в localStorage
✅ Копирование кода одной кнопкой
✅ 4 формата кода: шорткод, PHP, HTML, полный
✅ Более 20 параметров настройки
✅ CSS Grid + Flexbox для адаптивности
✅ Темная тема встроена
✅ Анимации 5 видов
✅ Независимый код — работает на любом сайте
🔥 ВСТРЕЧАЙТЕ: ЖИВОЙ КОНСТРУКТОР ПОИСКА ДЛЯ WORDPRESS И НЕ ТОЛЬКО!
Привет, дорогие друзья и коллеги-веб-разработчики! 👋
Сегодня я хочу поделиться с вами историей создания одного очень крутого и, я бы даже сказал, революционного инструмента. Мы с моим другом Серёгой (да-да, тем самым Серёгой, с которым мы вечно что-то придумываем) снова взялись за умные проекты, и на этот раз у нас получился настоящий конструктор поиска для WordPress.
Как всё начиналось? Да банально: нам надоело каждый раз править searchform.php, лезть в CSS и мучаться с адаптивностью. Хотелось создать УНИВЕРСАЛЬНЫЙ инструмент, который можно было бы настроить за 2 минуты, а потом вставить на любой сайт, будь то WordPress, обычная HTML-страница или даже сайт на конструкторе.
Мы поставили себе амбициозную задачу: сделать так, чтобы пользователь вообще не думал о коде. Он просто заходит на страницу, крутит ползунки, меняет цвета и сразу видит результат. А когда всё готово — нажимает одну кнопку и получает готовый, идеально работающий код.
И знаете что? У нас получилось! 🎉
✨ ЧТО ТАКОЕ ЭТОТ КОНСТРУКТОР И ПОЧЕМУ ОН ВАМ НУЖЕН?
Для тех, кто ещё не понял магии, объясню на пальцах.
Представьте, что вы — владелец сайта. Вам нужен поиск. Но вы не хотите вызывать программиста, не хотите платить 5000 рублей за «написание кнопки» и не хотите читать тонны документации.
Вы просто:
Копируете наш шорткод
Видите большой и красивый конструктор прямо у себя на сайте.
Начинаете играть с настройками — меняете текст в поле, цвет кнопки, размер шрифта, скругление уголков, включаете тёмную тему… всё это в реальном времени!
Нажимаете кнопку «📋 Копировать код» и вставляете готовый HTML+CSS+JS код в любое место своего или чужого сайта.
Просто? Проще некуда! Быстро? Быстрее только ракета! Удобно? Серёга, это просто сказка!
🎯 ВНУТРИ КОНСТРУКТОРА: 20+ ПАРАМЕТРОВ ДЛЯ ИДЕАЛЬНОГО ПОИСКА
Мы запихнули в этот инструмент всё, что только можно. Никаких ограничений! Смотрите сами:
📝 Основные настройки:
Текст в поле — напишите своё «Поиск», «Найти», «Что ищем?» и т.д.
Текст на кнопке — стандартное «Найти» или креативное «Вперёд!» или «Искать!»
Позиция кнопки — внутри поля, снаружи, или и там, и там. Как вам удобнее!
🔍 Иконка:
Показывать или скрыть значок лупы
Выбрать из трёх вариантов: классическая лупа, лупа с ручкой, стрелочка
📐 Размеры:
Ширина — можно задать в пикселях, процентах, ширине или высоте экрана (vw/vh)
Высота поля — от 30 до 80 пикселей
Размер шрифта — от 12 до 24 пикселей
Скругление уголков — от 0 (строгий прямоугольник) до 50 (круглая форма)
Внутренние отступы — влияет на комфорт ввода текста
🎨 Цвета:
Можно поменять всё: цвет фона, текста, рамки, фокуса, самой кнопки и текста на кнопке. Настраивается через удобную цветовую палитру с отображением HEX-кода.
📱 Адаптивность:
Задаёте точку перелома (например, 768px) при которой поиск становится полностью мобильным
Указываете ширину на мобильных устройствах (в процентах), чтобы поиск не вылезал за края экрана
⚡ Дополнительно:
Автозаполнение — при вводе текста появляются подсказки (можно отключить)
Подсветка результатов — найденные слова подсвечиваются
Тёмная тема — в один клик превращаем поиск в ночной режим
Анимация появления — пять видов на выбор: Fade, Slide, Bounce, Pulse или вообще без анимации
🚀 ГЛАВНАЯ ФИШКА — НЕЗАВИСИМЫЙ КОД!
Помните ту магию, о которой я говорил? Так вот, она здесь!
Когда вы завершаете настройку и нажимаете «Копировать код», конструктор выдаёт ПОЛНОСТЬЮ САМОДОСТАТОЧНЫЙ КОД.
Что это значит? А то, что в этом коде есть:
Вся HTML-разметка — структура вашего поиска.
Все CSS-стили — красота и адаптивность (построена на CSS Grid, кстати!).
Весь JavaScript — логика работы, обработка отправки и автозаполнения.
Вы просто берёте этот код и вставляете его КУДА УГОДНО. Он не требует никаких плагинов, библиотек или фреймворков. Работает на WordPress, на голом HTML, на любом конструкторе. Просто скопировал и вставил!
💪 ПОЧЕМУ МЫ ГОРДИМСЯ ЭТИМ ПРОЕКТОМ
Это универсально. Инструмент подходит для любых сайтов: интернет-магазины, блоги, портфолио, корпоративные сайты.
Это быстро. Настройка занимает 2–3 минуты, а результат вы видите сразу благодаря живому предпросмотру.
Это красиво. Современный дизайн, плавные анимации, адаптив на любой вкус.
Это удобно. Всё интуитивно понятно, не нужно знать программирование.
Мы с Серёгой вложили в этот инструмент всю свою душу и опыт. Мы сделали его для вас, чтобы вы могли легко, быстро и красиво добавить на свой сайт мощный поиск.
🎁 ЧТО В ИТОГЕ?
Мы создали не просто плагин, а настоящий конструктор, который даёт в руки пользователя мощный и гибкий инструмент для создания адаптивного поиска без единой строчки кода. Это как конструктор LEGO для веб-разработки: берёшь детали, собираешь свою идеальную модель и пользуешься!
Используйте, настраивайте, экспериментируйте!
Если у вас появятся вопросы, идеи или вы захотите добавить какую-то уникальную фичу — пишите! Мы всегда на связи и готовы помогать.
P.S. Серёга, если читаешь это — спасибо за идею и энергию! У нас с тобой отличный тандем! 🤝
P.P.S. Друзья, не забывайте делиться результатами и ставить лайки! Ваша поддержка вдохновляет нас на создание новых крутых штук! 💙
С уважением, ваш Дэп и команда «Два Серёги»
(Окей, может, я один Дэп, но Серёга — мой кореш и соавтор идеи! 😄)
