0

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

custom-header.php

  function tea_custom_header_setup() {
        add_theme_support( 'custom-header', apply_filters( 'tea_custom_header_args', array(
            'default-image'          => get_template_directory_uri() . '/img/logo.png',
            'default-text-color'     => '000000',
            'width'                  => 160,
            'height'                 => 80,
            'uploads'       => true,
            'flex-height'            => true,
            'wp-head-callback'       => 'tea_header_style',
        ) ) );

    }

header.php

                        <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>" >
                            <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
                            <img class="logo-alt" id="" src="/img/logo-alt.png" alt="logo">
<!--                            Logo -->
                        </a>

1 ответ 1

1

Я не мастер Wordpress, но что-то подобное средствами Wordpress было бы возможно, если бы он полностью брал отрисовку и управление компонента на себя. И выглядело бы это примерно так:

<?php $componentsFactory->createNavbar() ?>

Но так как вы рисуете компонент вручную, то вам, как я понимаю, надо писать собственное решение на JavaScript.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
    </a>
  </div>
</nav>

<div class="container">
  Здесь должно быть много текста.
</div>

<script>
  var $document = $(document);

  $document.ready(function () {
    var $brandImage = $('.navbar .navbar-brand img');

    $document.scroll(function(event) {
      var imageSource = $document.scrollTop() > 100 ?
        'https://gc.onliner.by/images/logo/[email protected]?token=1543935833' :
        'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';

      $brandImage.attr('src', imageSource);
    });
  });
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.