Поиск по сайту:
Полезнее пройти путь жизни, чем всю вселенную (К. Прутков).

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

Например, следующий код CSS будет действовать только для устройств с шириной меньше или равной 768 пикселей.

@media only screen and (max-width: 768px) {
    body {
 	  background-color: blue;
 	  }
}

 

Читать  Как избавиться от другого обновления при ошибки в WordPress

В приведенном выше коде:

  • Мы использовали синтаксис медиа-запроса, чтобы воздействовать только на экраны с шириной меньше или равной 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.

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

Читать  Как использовать FTP для загрузки файлов в WordPress для новичков

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

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


0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Аркадий

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

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


Рекомендуемое
Страхование в сфере автомобильного транспорта имеет разное направление. Здесь можно…

Спасибо!

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