Question

我想知道是否有人可以帮助我。我目前正在使用Smoothstate.js插件在我的Wordpress网站上的页面之间进行转换。到目前为止，插件工作得很好，并且完成了我想要的大部分工作。

但是，当我尝试通过Wordpress中的functions.php文件为单个页面加载单独的文件时，当我在页面之间导航时，某些脚本不起作用。

我确保脚本已加载到容器中，因此Smoothstate.js知道添加了哪些文件，并且我还使用onAfter函数重新启动了这些函数。

这很奇怪，因为当我在导航页面后检查DOM时，我可以看到正在加载的脚本但是如果我检查开发工具中的源选项卡它们不会出现？

我需要能够专门加载单独的文件，具体取决于您出于性能原因所依赖的页面，因此我希望有一种方法可以在不与Smoothstate.js冲突的情况下执行此操作。有没有人有这方面的经验或知道答案？

我的设置是这样的：

的functions.php

如您所见，我只想在联系页面上加载Google地图。

  wp_enqueue_script( 'anime-script', get_stylesheet_directory_uri() . '/js/anime.min.js', array(), $the_theme->get( 'Version' ), true);
    wp_enqueue_script( 'scrollMonitor-script', get_stylesheet_directory_uri() . '/js/scrollMonitor.js', array(), $the_theme->get( 'Version' ), true);
    wp_enqueue_script( 'scroll-scripts', get_stylesheet_directory_uri() . '/js/scrollreveal.js', array(), $the_theme->get( 'Version' ), true );
    wp_enqueue_script( 'type-script', get_stylesheet_directory_uri() . '/js/typed.min.js', array(), $the_theme->get( 'Version' ), true);

    if(is_page('contact-us')) {
        wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyC5_sL4wf3GIEgwI7bUXWD4pqkkc8er7tQ', array(), $the_theme->get('Version'), true);
        wp_enqueue_script( 'google-maps-settings', get_stylesheet_directory_uri() . '/js/google-maps.js', array(), $the_theme->get( 'Version' ), true);
        wp_enqueue_script( 'contact-slider', get_stylesheet_directory_uri() . '/js/contact-slider.js', array(), $the_theme->get( 'Version' ), true);
    }

Smoothstate js

$(document).ready(function() {
  init();
});

    function init() {
      ImageSliders();
      navbarColour();
      typedBanners();
      scrollingAnimations();
      navBarHide();
      animateOnLoadPosition();
      openSubscribePanel();
    };

    $(document).ready(function() {
      'use strict';

      addBlacklistClass();

      // Init here.
           var $body = $('body'),
               $main = $('#page'),
               $site = $('html, body'),
               transition = 'fade'


      var options = {
        prefetch: true,
        cacheLength: 2,
        debug: true,
        blacklist: '.wp-link, .open-panel-link',

        onBefore: function($anchor, $container) {
                    var current = $('[data-viewport]').first().data('viewport'),
                        target = $anchor.data('target');
                    current = current ? current : 0;
                    target = target ? target : 0;
                    if (current === target) {
                        transition = 'fade';
                    } else if (current < target) {
                        transition = 'grow';
                    } else {
                        transition = 'moveleft';
                    }

                  var highResImageUrl = $anchor.find('.thumbnail-holder').data('src');
                  var thumbnailholder = $anchor.find('.thumbnail-holder');
                  var newImage = $anchor.closest('.thumbnail-wrapper').append('<img class="imageGrow" src="' + highResImageUrl + '">');
      },

        onStart: {
          duration: 1200, // Duration of our animation
          render: function (url, $container) {
            // Add your CSS animation reversing class
            $main.attr('data-transition', transition);
            $main.addClass('is-exiting');

            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');

            // Inject the new content
            $container.html($newContent);
          }
        },
        onAfter: function() {

            init();
            addBlacklistClass();

              if (typeof contactSliderUI == 'function') {
                contactSliderUI();
              }

              $('.acf-map').each(function() {
                    // create map
                    map = new_map( $(this) );
                });


            var $hash = $( window.location.hash );

                    if ( $hash.length !== 0 ) {

                        var offsetTop = $hash.offset().top;

                        $( 'body, html' ).animate( {
                                scrollTop: ( offsetTop - 60 ),
                            }, {
                                duration: 280
                        } );
                    }
                }
      },
      smoothState = $('#page').smoothState(options).data('smoothState');
    });

Answer 1

您需要将<?php body_class ?>添加到容器或容器内的另一个元素（m场景）。 Smoothstate仅处理容器中的内容，除非您在{m-scene“容器中，否则<body>元素上的类不会更改。

Smoothstate.js - 通过functions.php无法正常加载特定的样式表和脚本

1 个答案: