在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(){ 
//... 
}