Как изменить Wordpress lo go при прокрутке (тема understrap-child) - PullRequest
Новая
       7

Как изменить Wordpress lo go при прокрутке (тема understrap-child)

1 голос
/ 23 марта 2020

Я создаю сайт, используя тему understrap-child. Чего я хотел бы добиться, так это чтобы моя навигационная панель lo go (добавленная через Appearance -> Customize) сменила на другую при прокрутке страницы.

В функциях. php Я уже добавил раздел чтобы можно было добавить второй lo go, который я успешно добавил в разделе Внешний вид -> Настройка. Вот код в функциях. php: 

//ADDING NEW LOGO FIELD


function your_theme_customizer_setting($wp_customize) {
    // add a setting 
        $wp_customize->add_setting('your_theme_hover_logo');
    // Add a control to upload the hover logo
        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
            'label' => 'Upload Hover Logo',
            'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
            'settings' => 'your_theme_hover_logo',
            'priority' => 8 // show it just below the custom-logo

        )));
    }

    add_action('customize_register', 'your_theme_customizer_setting');
    get_theme_mod( 'your_theme_hover_logo' );

Теперь, когда у меня установлено два логотипа, я хотел бы знать, как заменить первый lo go на второй при прокрутке моей страницы.

Вот мой заголовок. php раздел с панелью навигации: 

<!-- ******************* The Navbar Area ******************* -->
    <div id="wrapper-navbar">

        <a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>

        <nav id="main-nav" class="navbar navbar-expand-md navbar-dark fixed-top" aria-labelledby="main-nav-label">

            <h2 id="main-nav-label" class="sr-only">
                <?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
            </h2>

        <?php if ( 'container' === $container ) : ?>
            <div class="container">
        <?php endif; ?>

                    <!-- Your site title as branding in the menu -->
                    <?php if ( ! has_custom_logo() ) { ?>

                        <?php if ( is_front_page() && is_home() ) : ?>

                            <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>

                        <?php else : ?>

                            <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>

                        <?php endif; ?>

                    <?php } else {
                        the_custom_logo();
                    } ?><!-- end custom logo -->

Обратите внимание, что я уже добавил запрос, чтобы изменить цвет фона панели навигации при прокрутке ... и это работает! 

</script>

<script>jQuery(window).scroll(function(){
    jQuery('nav').toggleClass('scrolled', jQuery(this).scrollTop() > 80);


});</script>

с его CSS правилами: 

@media (min-width: 992px) {
    .navbar.scrolled {
        background-color: $secondary;
        border-bottom: solid rgba(37, 36, 36, 0.055);

Я действительно надеюсь, что вы поможете мне решить мою проблему! СПАСИБО ТАКОЕ !!

...