Home • WEB мастеру • Мои плагины • Статьи • RGB ⇄ HEX + EyeDropper. Плагин-конвертер цветов для WordPress
RGB ⇄ HEX + EyeDropper. Плагин-конвертер цветов для WordPress Делаем работу в редакторе WordPress легче!
Продолжая улучшать функционал классического редактора WordPress и отказываться от «тяжелых» плагинов, меня возникла идея — создать минималистичный плагин/конвертер RGB в HEX и обратно. Почему эта идея появилась? Все просто.
Когда работаешь в редакторе на вкладке «Код», часто приходится использовать вставку кода цвета. И вот тут возникает заминка… Или бежать гуглить, чтобы найти онлайн конвертер, или пользоваться windows прогой или… В общем все эти «или» — задолбали! Решил сделать свой вариант конвертера…
Задача была такой: Минимальный размер, адаптированность с сайдбаром редактора, универсальность и, конечно же — малый вес скрипта. Пришлось немного поломать над этим вариантом голову, но в итоге, через некоторое время код «причесал» и вот что получилось:
- Кнопка переключения (⇄): Поместилась справа от полей ввода. При нажатии скрывает поля RGB и показывает одно поле для HEX (и наоборот).
- Умный HEX-ввод: В режиме «HEX to RGB» можно вводить код как с решеткой #, так и без неё. Он также понимает сокращенные коды (например, FFF превратит в 255, 255, 255).
- Динамическая метка: В строке результата надпись меняется с HEX: на RGB:, чтобы не запутаться, что именно копируешь.
- Компактность: Высота метабокса не меняется. Всё переключается внутри.
- Иконка пипетки 🎨: Теперь при клике на неё курсор превращается в увеличительное стекло (в Chome и Safari), и теперь можно просто «ткнуть» в любое место на экране, чтобы получить цвет.
- Умная синхронизация: Когда выбираешь цвет пипеткой, он автоматически обновляет и поля RGB, и поле HEX, независимо от того, какой режим сейчас включен.
- Авто-проверка: Если браузер (например, старый Safari или Firefox) не поддерживает EyeDropper API, кнопка просто не будет отображаться, чтобы не смущать пользователя.
- Устранена проблема: Пипетка работает только в браузерах на базе Chromium (Chrome, Edge, Brave, Opera). В Firefox она пока не поддерживается на уровне системы. Однако для Firefox есть хитрость, которую пришлось добавить! Теперь можно использовать стандартный HTML-элемент input type=»color». В Firefox он открывает окно (без перезагрузки страницы) с системной палитрой, в которой уже есть встроенная иконка пипетки внутри окна. Это большой плюс для приверженцев Firefox!
Как это работает в Firefox:
Ты нажимаешь на кнопку 🎨.
- — Открывается стандартное окно выбора цвета Windows/macOS/Linux.
- — В этом окне (в нижнем углу или рядом с палитрой) есть иконка пипетки.
- — Кликаешь на неё, берешь цвет, нажимаешь «ОК» — и цвет попадает в конвертер.
Это на один клик больше, чем в Chrome, но зато функция пипетки становится доступной везде! На этом и остановился. Теперь плагин работает с точностью швейцарских часиков!
- ✔️ Двусторонний конвертер (RGB ⇄ HEX) в компактном блоке.
- ✔️ Универсальная пипетка, работающая во всех современных браузерах.
- ✔️ Интеграция в WordPress (метабокс).
- ✔️ Удобный UX с быстрой копией и визуальным откликом.
Смотрите работу плагина:
Контент заблокирован
Доступ только для подписчиков
Ваши данные в полной безопасности. Мы не рассылаем спам.
Поставьте свой лайк. Мне важно ваше мнение о статье…
ВНИМАНИЕ!
Отправить заявку на плагин можно по этой ссылке!
Отправить заявку на плагин можно по этой ссылке!
Удачи и до новых встреч!
С уважением, MasterPRO
Рекомендую ознакомиться...
Подпишитесь на новости блога и получайте сообщения в числе первых!
На сегодня в блоге вашему вниманию представлено уже 263 публикаций!
Ваши данные в полной безопасности. Мы не рассылаем спам.
| ◄ Добавляем кнопку «Произвольный символ» на вкладку «Код» в редактор WordPress | Добавляем информер посетителей онлайн в админ бар ► |
|
Просмотров страницы: 226 Метки: rgb-hex | Web мастеру | wordpress | Новости блога | плагины | Последнее обновление статьи: 10.05.2026 Короткая ссылка: https://master-sv.com/blog/?p=15773 |
 |  |
Наберитесь терпения - новые публикации в процессе осмысления...
Подписаться
авторизуйтесь
0 комментариев
