Нет большей муки, чем воспоминание в несчастье о счастливом времени (А. Данте).

Изменение логотипа в мобильной версии WordPress

30.09.2020
Изменение логотипа в мобильной версии WordPress

Мобильные устройства все чаще используются для серфинга в Интернете, одно из улучшений, которые мы можем внести в наш веб-сайт, заключается в том, что используемые нами темы 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, когда хотим ограничить наши изменения определенными размерами экрана.

Читать  Что такое: GPL

Например, следующий код 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, а также изменить путь к изображению логотипа на мобильной версии сайта.

Читать  Как устранить ошибку 'Failed to Open Stream' в WordPress

 

Вывод

Как мы показали, на мобильных устройствах может быть другая версия вашего логотипа WordPress.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Если статья понравилась, то поделитесь ей в социальных сетях:

Один комментарий

Аркадий 14.11.2021 от 16:35

Заказать сувенирную продукцию с логотипом на prestige-z.ru. Рекламно — производственная компания «Престиж-Z» изготавливает сувенирную продукцию и корпоративные сувениры с логотипом.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Это может быть вам интересно


Загрузка...

Спасибо!

Теперь редакторы в курсе.

Scroll to Top