WordPress 仅在主页上加载脚本，否则添加类答案

【问题标题】：WordPress load script only on homepage, else add classWordPress 仅在主页上加载脚本，否则添加类
【发布时间】：2015-02-04 05:00:44
【问题描述】：

不太确定如何实现我在这里尝试做的事情，希望你们能提供帮助。我的 function.js 文件中有一个脚本，当页面向下滚动到某个点时，它会使我的固定标题淡入视图。

我希望此脚本在主页上正常工作，但我希望页眉在所有内部页面上永久可见。

我确信这需要将这个脚本分解成它自己的文件并稍微改变一下，但我愿意接受建议。

我最初的想法是让脚本在主页上按预期运行，但创建某种 else/if php 语句：

"如果这是首页，什么都不做，否则，给元素添加一个不透明类#navbar"

HTML：

    <div id="navbar" class="navbar bg transition">
        <div class="row">
            <img src="<?php bloginfo('template_directory'); ?>/images/logo-small.png" alt="Jot logo" class="navlogo">
            <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                <div class="menu" id="mobilemenu">
                  <span class="menu-global menu-top"></span>
                  <span class="menu-global menu-middle"></span>
                  <span class="menu-global menu-bottom"></span>
                </div>
            <div id="menuexpand">
                <div>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                </div>
            </div>
            </nav><!-- #site-navigation -->
        </div><!-- row -->
    </div><!-- #navbar -->

CSS：

.bg {
  background: #525454;
  opacity: 0;
}

.show {
  opacity: 1;
}

.transition {    
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.navbar {
  background: none;
  position: fixed;
  z-index: 999;
  padding-top: 15px;
  top: 0;
  opacity:0.3;
}

JS：

$(window).scroll(function() {
  // 100 = The point you would like to fade the nav in.

    if ($(window).scrollTop() > 100 ){

      $('.bg').addClass('show');

    } else {

      $('.bg').removeClass('show');

    };    
  });

  $('.scroll').on('click', function(e){   
      e.preventDefault()

    $('html, body').animate({
        scrollTop : $(this.hash).offset().top
      }, 1500);
  });

这里有什么想法吗？就像我说的，我愿意接受建议。

【问题讨论】：

标签： jquery html css wordpress

【解决方案1】：

您可以在主页的正文中添加一个类。并根据需要为其他页面布置具有固定位置的 .bg：

<body class="home">

:not(.home) .bg{position:fixed;}

【讨论】：

不太确定这会实现什么。我试过了，但没有运气。这是 WP，因此 body 上的 home 类被应用到站点中的每个页面。我还尝试了使用 opacity:1 而不是 position:fixed 的这种方法，但这使我在主页上的滚动淡入淡出效果无效。
你不能为不同的页面分配不同的类吗？
嗯，页面是通过 WP 循环生成的，所以开始的 body 标签在 header.php 文件中，该文件添加到网站上的每个页面。
看看可能对你有帮助的adeneo答案。我不知道wordpress，所以我不能说做，如何..？

【解决方案2】：

if ( is_home() || is_front_page() ) { 
    wp_enqueue_script($scriptUrl);
} else { 
    add_filter("body_class" , function($classes){
        $classes[] = "added-class";
        return $classes;
    }); 
}

如果它在家里，则将一些脚本排入队列（应该在wp_enqueue_scripts 操作之前完成。否则它将向正文添加一些类。请记住，您需要制作正确的正文标签

<body <php body_class(); ?>>

【讨论】：

我可以这样做 // add_filter(#navbar .... // 并让它向导航栏 ID 元素添加一个类吗？
所以，这会正确加载我的脚本，但在内部页面上，它不会将“显示”类添加到我的#navbar 元素
<?php if ( is_home() || is_front_page() ) { wp_enqueue_script('header-fade', get_template_directory_uri() . '/js/header-fade.js'); } else { add_filter('#navbar' , function($classes){ $classes[] = '.show'; return $classes; }); } ?>

【解决方案3】：

好的，这是我的解决方案：

我创建了一个 JS 脚本：

(function ($) {
  $('#navbar').addClass('show');
}(jQuery));

然后我调整了之前发布的 if/else：

<?php if ( is_home() || is_front_page() ) { wp_enqueue_script('header-fade', get_template_directory_uri() . '/js/header-fade.js'); } else { wp_enqueue_script('opaque', get_template_directory_uri() . '/js/opaque.js'); }; ?>

因此，如果它是首页（主页），则会触发滚动脚本的淡入淡出。如果它是任何其他页面，则会触发不透明脚本，从而使导航栏在页面加载时可见。

完成并完成。 :)

【讨论】：