[](https://coma.lv/wp-content/uploads/2024/11/Gemini_Generated_Image_cwzyb6cwzyb6cwzy-2000px-1030x396.webp)
# Как изменить цвет адресной строки в мобильном браузере
Nov 16, 2024/by [Vadim Pavlovich](https://coma.lv/ru/author/djcoma/)
Вы наверняка замечали, что многие популярные сайты вроде BBC и Facebook используют цвета своего бренда для адресных строк в мобильном браузере. В этой статье мы расскажем вам как вы можете добиться подобного эффекта.
## Зачем делать так, чтобы цвет адресной строки соответствовал вашему сайту в мобильном браузере?
Многие шаблоны WordPress поддерживают мобильные устройства. Однако это все равно выглядит всего лишь как сайт. Изменение цвета адресной строки создает ощущение, будто человек использует приложение. Все это приводит к более приятному опыту использования, продажам и конверсиям.
Сегодня эта возможность поддерживается в большинстве современных мобильных браузеров на базе Chromium, включая Google Chrome, Edge, Brave, Opera и Samsung Internet. Также браузеры поддерживают указание разных цветов для светлого и тёмного режима, что позволяет адресной строке автоматически подстраиваться под предпочтения пользователя.
## Как это сделать
Просто добавьте следующий код в файл header.php вашей дочерней темы прямо перед закрывающим тегом **.
**
Эта строчка — HTML мета-тег, который использует мобильный браузер для изменения цвета адресной панели.
Если вы хотите поддерживать светлый и тёмный режим, можно добавить две строки:
**
**
У поля контента есть hex код для цвета, который вы хотите использовать в качестве фонового. Не знаете как получить этот код? Вы можете его получить, используя любой графический редактор вроде Adobe Photoshop, Gimp, Paint и других.
Также вы можете выбрать цвет с помощью онлайновых сервисов по подбору цвета в HTML или расширений браузера, например ColorZilla, чтобы быстро получить нужный hex-код с любой веб-страницы.
*На iOS Safari этот метод не работает, но если вы создаёте PWA (прогрессивное веб-приложение, то есть веб-сайт, который ведёт себя как приложение на устройстве), вы можете изменить цвет строки состояния с помощью **
## WordPress
Сегодня многие современные темы и плагины WordPress позволяют выбрать цвет адресной строки через интерфейс настроек темы, так что ручное редактирование header.php может быть не обязательным. Если вы предпочитаете полный контроль, старый добрый способ через ** всё ещё работает идеально.
---
*Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [vadim@coma.lv](mailto:vadim@coma.lv), [+371 29394520](tel:+37129394520)*
---