Как изменить цвет адресной строки в мобильном браузере для адаптации к своей теме WordPress

Вы наверняка замечали, что многие популярные сайты вроде BBC и Facebook используют свои собственные брендовые цвета для адресной строки в мобильном браузере. Недавно один из наших пользователей спросил, могли бы мы написать о том, как изменить цвет адресной строки в мобильном браузере для адаптации к своей теме WordPress. В этой статье мы покажем вам как изменить цвет адресной строки в мобильном браузере для своей темы.

Зачем изменять цвет адресной строки в мобильном браузере

Большинство популярных тем для WordPress адаптированы под мобильные устройства. В виду этого ваш сайт замечательно выглядит на мобильных устройствах. Однако, он все равно выглядит как вебсайт.

Если же вы раскрасите адресную строку вашего WordPress сайта, то это позволит ему выглядеть похожим на родное приложение устройства. Такое поведение поможет привлечь пользователей, и как следствие, возможно, увеличить продажи и повысить конверсию.

Однако, что это сработает только в веб браузере Google Chrome на устройствах Android с версией Lollipop или выше.

Изменяем цвет адресной строки в мобильных браузерах под свою тему

Просто добавляем следующий код в свою или дочернюю тему в файл header.php сразу перед закрывающим тегом </head>.

<meta name="theme-color" content="#ff6600" />

Эта строка — HTML мета тег, используемый Google Chrome на Android, для изменения цвета адресной строки в мобильном браузере. Поле content содержит HEX код цвета, который вы используете в качестве основного в своей теме.

Не знаете как получить цвет в HEX коде?

Значение можно получить, используя программы для редактирования изображений вроде Photoshop, Gimp, Paint и т.д.

Также цвет можно выбрать с помощью онлайн инструмента HTML color picker.

Если же вы хотите взять цвет с веб страницы, тогда можно воспользоваться браузерным расширением вроде ColorZilla.

Вот и все, мы надеемся, что эта статья помогла вам научиться изменять цвет адресной строки в мобильном браузере для адаптации ее к своей теме WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.