Как добавить номер телефона в шапку мобильной версии сайта

Как правило, в шаблонах Вордпресс (WordPress) меню в мобильной версии сайта верстается гамбургером. Иногда возникает необходимость добавить в шапку на свободное место (рядом со значком) номер телефона или другой информативный элемент. И полезно, и место не пустует :)))

Как добавить номер телефона в шапку рядом со значком меню (гамбургером) профессионально и технично - не могу подсказать... Но мой способ мне понравился и работает без проблем. Поэтому, если кто-то предложит более грамотный вариант - буду очень признательна!

Добавить номер телефона в шапку мобильной версии сайта

Открываем корневую папку сайта с вашей темой через FTP-клиента или через файловый менеджер на хостинге. Ищем файл, который отвечает за вёрстку шапки вашего сайта (header) в мобильной версии: header-mobile.php. Практически во всех новых темах путь к этому файлу вот такой: public_html/wp-content/themes/название темы/template-parts/header.

Далее, в этом файле прописываем функцию:

<div class="parent">
   <p><span class="line"><a href="tel:+7995ХХХХХХХ">+7 995-ХХХ-ХХ-ХХ</a></span></p>
</div>

Расшифрую символ parent - это класс, который мы присваиваем, чтобы потом с помощью CSS прописать стиль для номера телефона или другого элемента (задаём отступы, цвет и пр.). Можете назвать его как угодно, главное латиницей.

Как найти место в файле, в которое вставлять функцию?

Это проблема, но не печальная. Просто внимательно просматриваем весь файл и находим функцию, отвечающую за тот самый "гамбургер". Что-то похожее на это: display_special_menu. Ну или ищите подходящее место ещё более "тупым" способом. В районе символа menu ставьте звёздочки ***, обновляйтесь и смотрите, куда они встали на сайте. Короче, методом тыка и такой-то матери русские люди дома строят...

Следующий шаг - прописываем те самые стили для класса parent

Это можно сделать в файле css вашей темы через тот же FTP или файловый менеджер. А можно в настройках темы в консоли сайта: ВНЕШНИЙ ВИД - ДОПОЛНИТЕЛЬНЫЕ СТИЛИ.

.parent { 
  margin: 18px;
  color: #ffffff;
}

Вот как это выглядит: Добавить номер телефона в меню мобильной версии

Мне достаточно было задать отступы и цвет. Может быть потребуется что-то ещё. Открываем любой сайт со стилями CSS и находим то, что нам нужно.

За конструктивные подсказки в комментах большой гешефт!

Добавить комментарий