在WordPress

Question

我加载jQuery和在functions.php文件我main.js文件添加jQuery函数到一个特定的模板，简码为这样：

function my_scripts() { 
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); 
    function my_jquery_enqueue() { 
     wp_deregister_script('jquery'); 
     wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js", false, null); 
     wp_enqueue_script('jquery'); 
    } 
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '12303', true); 
} 
add_action('wp_enqueue_scripts', 'ninjatrader_scripts'); 

这里所有好。我在main.js文件中有一个函数，我只想调用特定的页面模板，并试图通过shortcode来做到这一点，但它总是返回函数未定义。 这里是位于main.js功能：

function menu_sticky() { 
    var div_top = $('#hero-menu-row-anchor').offset().top; 
    var navCont = $('#hero-menu-row') 
    var nav = $('#menu-blognav'); 
    var logo = '<li id="hero-menu-logo"><a href="http://ninjatrader.com" target="_self">NinjaTrader</a></li>'; 
    var visible = false; 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > div_top) { 
      navCont.addClass("fixed"); 
      if(!visible) { 
       nav.prepend(logo); 
       visible = true; 
      } 
     } else { 
      navCont.removeClass("fixed"); 
      if(visible) { 
       $('#hero-menu-logo').remove(); 
       visible = false; 
      } 
     } 
    }); 
} 

和functions.php中

function sticky() { 
    echo '<script>jQuery(function(){ menu_sticky(); });</script>' 
} 
add_shortcode('stickynav', 'sticky'); 

短码当我把它放在一个模板，它返回“的ReferenceError：未定义menu_sticky “你如何正确加载特定模板中的函数？

Answer 1

FWIW，我想出了一个方法来完成这项工作。我相信它不是'做'的方式，我仍然非常感激任何知识。我猜想，这只是用PHP编写js的一种不同方式，但它花了我一点时间。基本上在functions.php文件中，从'main.js'中回显出js，并包含$（function（）{menu_sticky（）;}）;在里面。然后正常使用简码。

Answer 2

另一种选择是根据是否应该调用粘性导航来设置变量中的标志，然后从main.js文件调用该函数。 它应该是这样的：

1. 在functions.php中创建一个全局前缀模块变量，你可以在你的脚本中使用：

function my_print_scripts(){ 
echo '<script>var MY_MODULE = {}; </script>'; 
} 
add_action('wp_head', 'my_print_scripts', 20); 

在短码码使用：

function sticky() { 
    echo '<script>MY_MODULE.enableStickyNav = true;</script>'; 
} 
add_shortcode('stickynav', 'sticky'); 

然后在main.js文件中使用：

jQuery(function(){ 
    if(MY_MODULE.enableStickyNav){ 
     menu_sticky(); 
    } 
}); 

在此之后，你还可以重复使用MY_MODULE变量前缀您的自定义功能，让您不污染全局命名空间 - 你甚至可以前缀您menu_sticky功能：

MY_MODULE.menu_sticky = function(){ 
//... 
}