Question

我正在使用下装儿童主题建立一个网站。我想实现的是我的导航栏徽标（通过外观->自定义添加），在滚动页面时可以更改为另一个徽标。

在functions.php中，我已经添加了一个部分，以便能够添加第二个徽标，我已经在外观->自定义部分中成功添加了该徽标。这是functions.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' );

现在我已经设置了两个徽标，我想知道在滚动页面时如何用第二个徽标替换第一个徽标。

这是我的带有导航栏的header.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);

我真的希望您能帮助我解决我的问题！非常感谢！

滚动时如何更改Wordpress徽标（下子主题）

0 个答案: