Как сменить логотип и его класс для мобильной версии сайта?

Question

[Руслан Дасаев]

Здравствуйте.Имея вот такую статичную верстку логотипа:

<div class="logo">
						<a href="/">
							<img src="images/logo-xs.png" alt="logo" class="visible-xs visible-sm" />
							<img src="images/logo.png" alt="logo" class="hidden-xs hidden-sm" />
						</a>
					</div>

Как сделать ее динамической?
В functions.php прописал:

function fin_setup() {
   add_theme_support( 'custom-logo', array(
			'height'      => 68,
			'width'       => 138,
			'flex-width'  => true,
			'flex-height' => true,
		) );
}
add_action( 'after_setup_theme', 'fin_setup' );

Для добавления классов пробовал прописать фильтр:

add_filter( 'after_setup_theme', 'change_logo_class' );


function change_logo_class( $html ) {

    $html = str_replace( 'custom-logo', 'visible-xs visible-sm', $html );

    return $html;
}

но он не сработал.Где я допустил ошибку?И что отвечает за смену src и класса логотипа при переходе на мобильную версию?

Comments

[yarovikov]

wp_is_mobile

[Rustam Bainazarov]

А почему через CSS нельзя?

[Руслан Дасаев]

SmthTo, сменить src и класс через него?

[Rustam Bainazarov]

Руслан Дасаев, можете скрывать один img и показывать другой на разных разрешениях. Можете сделать логотип фоновым рисунком и менять путь до него через медиа-запросы. Не совсем понимаю, зачем делать именно вашим путём. Типично, когда есть адаптивность и два разных логотипа — либо два блока делают и показывают нужный, либо просто пути меняют.

Можете сделать с помощью srcset тегов picture или img, они поддерживают медиа-запросы на уровне тега.

[Rustam Bainazarov]

Руслан Дасаев, вот так:
https://developer.mozilla.org/ru/docs/Learn/HTML/M...

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

[Руслан Дасаев]

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

[Rustam Bainazarov]

Руслан Дасаев, ну а в чём проблема сделать два блока и два поля до картинок в панели? Я сам делал 4 кастомных логотипа для разных разрешений и скина отдельных страниц. И каждый можно было задать отдельно в панели. Это же всего лишь пути до картинок.

[Руслан Дасаев]

Попробуем таким способом, спасибо.

[Rustam Bainazarov]

Руслан Дасаев, если боитесь лишних запросов, то можно быть спокойным касательно этого. Элементы с display: none в 99% браузеров не грузят внутреннее содержимое, пути до картинок и т. п. Только совсем старые (IE10, Firefox 3) не умеют делать это.

[Руслан Дасаев]

Вы под какие версии браузеров верстаете?

[Rustam Bainazarov]

Руслан Дасаев, нажимайте кнопку «Ответить», иначе я не вижу уведомления.

IE11+, EDGE 12+, Safari 10+, Chrome 40+, Firefox 40+.

Список может меняться.

[Руслан Дасаев]

SmthTo, can i use или чем-то подобным пользуетесь?

[Rustam Bainazarov]

Руслан Дасаев, конечно. А в чём, собственно, вопрос?

[Руслан Дасаев]

SmthTo, Т.к. сам верстаю, поэтому и спрашиваю

[Rustam Bainazarov]

Руслан Дасаев, а-а-а.

Answer 1

[Exploding]

Медиа-запросы придумали для этого... Логотип можно сделать фоном блока или 2 логотипа и отображать нужный, но лучше наверно все-таки фоном блока сделать.

Comments

[Руслан Дасаев]

Нужно сделать средствами wordpress

[Exploding]

Руслан Дасаев, это как это так?

Answer 2

[FoxAlliance]

Пропишите просто условие

if(screen.width <= 600) {
Выполнять если размер меньше или равен 600
};
if(screen.width >= 601) {
Выполнять если размер больше или равен 601
};

+

$('.filter-items:first-child').addClass('active').removeClass('');