Мобильные устройства все чаще используются для серфинга в Интернете, одно из улучшений, которые мы можем внести в наш веб-сайт, заключается в том, что используемые нами темы WordPress являются адаптивными шаблонами.
Однако мы можем оценить еще одну особенность: логотип также является адаптивным, либо путем адаптации размера, что обычно делается по умолчанию, либо путем отображения совершенно другого логотипа в адаптивной версии нашего сайта.
Сегодня мы научимся менять логотип в мобильной версии вашего сайта на WordPress.
HTML-структура логотипа
На данный момент при создании веб-сайта на WordPress по умолчанию в большинстве тем в WordPress мы можем использовать только один логотип, и он будет адаптироваться к устройствам, просто изменив свой размер.
Базовая структура HTML в большинстве случаев выглядит следующим образом:
<div class="site-logo">
<a href="URL_SITE" title="TITLE_SITE">
<img class="header-image" src="URL_LOGO" >
</a> </div>
В приведенном выше коде:
- У нас есть контейнер div с классом CSS под названием site-logo
- Внутри у нас есть ссылка с URL-адресом начала сайта
- Внутри ссылки у нас есть HTML-тег изображения, где прописан путь к изображению.
Наличие HTML-тега изображения внутри тега ссылки сделает изображение интерактивным.
Медиа-запросы
Когда нам нужно внести изменения в дизайн нашего веб-сайта, мы будем использовать CSS. Мы также используем CSS и, в частности, CSS Media Queries, когда хотим ограничить наши изменения определенными размерами экрана.
Например, следующий код CSS будет действовать только для устройств с шириной меньше или равной 768 пикселей.
@media only screen and (max-width: 768px) {
body {
background-color: blue;
}
}
В приведенном выше коде:
- Мы использовали синтаксис медиа-запроса, чтобы воздействовать только на экраны с шириной меньше или равной 768 пикселей.
- Внутри медиа-запроса мы можем добавить код CSS, в нашем примере мы меняем цвет фона на синий.
Код для смены логотипа в мобильной версии
Принимая во внимание структуру HTML и использование Media Queries для изменения дизайна при определенном размере экрана, мы можем внести изменения в наш логотип:
Основная идея:
- Скрыть текущее отображаемое изображение, т.е. скрыть HTML-тег img.
- Придать фиксированные размеры переплетному контейнеру.
- Разместите фоновое изображение для ссылки.
Код, использующий приведенную выше структуру, будет примерно таким:
@media only screen and (max-width: 600px) {
.site-logo a{
background-image:url(/wp-content/uploads/2019/10/logo-movil.png);
display: block;
background-size:contain;
background-repeat: no-repeat;
background-poSITEn: center;
width:100px;
height:100px;
}
.site-logo img{
display:none;
} }
Чтобы добавить этот код, вы можете проверить нашу статью о том, как добавить код CSS в WordPress.
Имейте в виду, что вам может потребоваться адаптировать приведенный выше код в соответствии со структурой HTML, которая есть в вашей теме, например, вам обычно придется изменить имя класса .site-logo, а также изменить путь к изображению логотипа на мобильной версии сайта.
Вывод
Как мы показали, на мобильных устройствах может быть другая версия вашего логотипа WordPress.
Это особенно полезно, если логотип вашего сайта очень широкий или содержит много деталей, в мобильной версии вы можете показать уменьшенную версию своего логотипа.