在Wordpress中運行的Javascript需要在header.php或functions.php中運行嗎？

Question

我想在我的Wordpress網站的標題中找到一些js文件。 腳本顯示和加載，但不起作用，但它們在我們的常規HTML網站上工作正常，所以我知道代碼是正確的，只是不知道如何在Wordpress中正確實現它。 任何幫助深表感謝！

我要完成的3個主要腳本是stickypanel.js（將導航欄固定到頂部），slicknav.js（移動導航代碼）和slicknav.modernizer.js（移動導航代碼）。

它們在我們的測試網站上運行良好（即使在移動設備上）：
http://www.efficient.infraredcamerasinc.com/pages/contact-infrared-cameras-inc.html

但唉不能讓它在我們網站的博客（Wordpress）部分工作：
http://www.efficient.infraredcamerasinc.com/blog/

我也需要它來處理所有的帖子和頁面，所以我假設在標題中運行（或發送運行）的腳本是要走的路。 我已經讀過直接路徑是禁止的，所以嘗試將它們從子主題文件夾中拉出來但是我找不到正確的代碼（我知道<?php bloginfo('template_directory')轉到父主題但卻無法'找到如何從兒童主題中拉出來）。

我嘗試在functions.php實現wp_enqueue_script函數，但我認為我沒有做到這一點，因為那時我只得到一個空白頁面。 這是正確的方法嗎？

這很令人困惑，因為我在header.php中添加的樣式表工作正常。

我知道slicknav腳本運行這個代碼用於移動導航:(我沒有寫原始腳本，所以我看到了）

 <div class="slicknav_menu"> <a href="#" aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt">MENU</span><span class="slicknav_icon"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a> <ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;"> <li><a href="../index.html" role="menuitem" tabindex="-1">Home</a></li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">Products <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="handheld-infrared-cameras.html" role="menuitem" tabindex="-1">Handheld</a></li> <li><a href="fixed-mount-infrared-cameras.html" role="menuitem" tabindex="-1">Fixed Mount</a></li> <li><a href="usb-infrared-cameras.html" role="menuitem" tabindex="-1">USB</a></li> <li><a href="analog-infrared-cameras.html" role="menuitem" tabindex="-1">Analog</a></li> <li><a href="infrared-camera-software.html" role="menuitem" tabindex="-1">Software</a></li> <li><a href="infrared-camera-systems.html" role="menuitem" tabindex="-1">Systems</a></li> </ul> </li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">Applications <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="infrared-camera-industrial-applications.html" role="menuitem" tabindex="-1">Industrial</a></li> <li><a href="infrared-camera-scientific-applications.html" role="menuitem" tabindex="-1">Scientific</a></li> <li><a href="infrared-camera-medical-applications.html" role="menuitem" tabindex="-1">Medical</a></li> <li><a href="infrared-camera-aerial-applications.html" role="menuitem" tabindex="-1">Aerial</a></li> <li><a href="infrared-camera-electrical-applications.html" role="menuitem" tabindex="-1">Electrical</a></li> <li><a href="infrared-camera-security-applications.html" role="menuitem" tabindex="-1">Security</a></li> </ul> </li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">Services <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="infrared-training-institute-training-services.html" role="menuitem" tabindex="-1">Training</a></li> <li><a href="infrared-camera-calibration-services.html" role="menuitem" tabindex="-1">Calibration</a></li> <li><a href="infrared-camera-repair-services.html" role="menuitem" tabindex="-1">Repair</a></li> <li><a href="infrared-camera-rental-services.html" role="menuitem" tabindex="-1">Rental</a></li> <li><a href="infrared-camera-inspection-services.html" role="menuitem" tabindex="-1">Inspection</a></li> <li><a href="custom-designed-infrared-cameras.html" role="menuitem" tabindex="-1">Custom Design</a></li> </ul> </li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">Resources <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="infrared-cameras-buyers-guide.html" role="menuitem" tabindex="-1">Buyer's Guide</a></li> <li><a href="infrared-camera-export-restrictions.html" role="menuitem" tabindex="-1">Export Restrictions</a></li> <li><a href="infrared-measurements-thermodynamics-defined.html" role="menuitem" tabindex="-1">Infrared 101</a></li> <li><a href="infrared-academic-informational-white-pages.html" role="menuitem" tabindex="-1">White Pages</a></li> <li><a href="infrared-terminology.html" role="menuitem" tabindex="-1">Terminology</a></li> <li><a href="infrared-image-gallery.html" role="menuitem" tabindex="-1">Gallery</a></li> <li><a href="infrared-camera-news.html" role="menuitem" tabindex="-1">News</a></li> </ul> </li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">Support <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="faq-frequently-asked-infrared-camera-questions.html" role="menuitem" tabindex="-1">FAQ</a></li> <li><a href="infrared-camera-lens-calculator.html" role="menuitem" tabindex="-1">Lens Calculator</a></li> <li><a href="contact-infrared-cameras-inc.html" role="menuitem" tabindex="-1">Contact Support</a></li> </ul> </li> <li class="slicknav_collapsed slicknav_parent"><a href="#" role="menuitem" aria-haspopup="true" tabindex="-1" class="slicknav_item slicknav_row" style="outline: none;">About <span class="slicknav_arrow">►</span></a> <ul role="menu" class="slicknav_hidden" aria-hidden="true" style="display: none;"> <li><a href="about-infrared-cameras-inc.html" role="menuitem" tabindex="-1">ICI</a></li> <li><a href="about-infrared-cameras-inc-customers.html" role="menuitem" tabindex="-1">Customers</a></li> <li><a href="about-infrared-cameras-inc-staff.html" role="menuitem" tabindex="-1">Staff</a></li> <li><a href="infrared-cameras-inc-calendar-events.html" role="menuitem" tabindex="-1">Calendar</a></li> <li><a href="contact-infrared-cameras-inc.html" role="menuitem" tabindex="-1">Contact Us</a></li> </ul> </li> </ul> </div> 

這是我的header.php文件：

 <?php /** * @package Make */ ?><!DOCTYPE html> <!--[if lte IE 9]><html class="no-js IE9 IE" <?php language_attributes(); ?>><![endif]--> <!--[if gt IE 9]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]--> <head> <?php wp_head(); ?> <!-- SCRIPTS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script> <script type="text/javascript" src="/js/jquery.stickypanel.js"></script> <script type="text/javascript" src="/js/jquery.slicknav.js"></script><!-- SLICKNAV .jS FILE --> <script type="text/javascript" src="/js/slicknav.modernizer.js"></script><!-- SLICKNAV .js FILE --> <!-- GOOGLE ADWORDS CONVERSION TRACKING PHONE NUMBER --> <script type="text/javascript"> (function(a,e,c,f,g,b,d){var h={ak:"946404688",cl:"SIdkCKOh-V4Q0PqjwwM"};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src="//www.gstatic.com/wcm/loader.js";d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a[c](2,b,h,d,null,new Date,e)}})(window,document,"_googWcmImpl","_googWcmAk","script"); </script> <!-- GOOGLE ADWORDS CONVERSION TRACKING PHONE NUMBER CALLBACK FUNCTION --> <script type="text/javascript"> var callback = function(formatted_number, mobile_number) { // formatted_number: number to display, in the same format as // the number passed to _googWcmGet(). // (in this case, '1-800-123-4567') // mobile_number: number formatted for use in a clickable link // with tel:-URI (in this case, '+18001234567') var e = document.getElementById("phone"); e.href = "tel:" + mobile_number; e.innerHTML = "" e.appendChild(document.createTextNode(formatted_number)); }; </script> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- STYLESHEETS --> <link rel="shortcut icon" href="/images/favicon.ico?172158521"/><!-- FAVICON --> <link rel="stylesheet" href="/css/layout.css"> <link rel="stylesheet" href="/css/footer.css"> <link rel="stylesheet" href="/css/header.css"> <link rel="stylesheet" href="/css/slicknav.css"><!-- SLICKNAV .CSS FILE --> </head> <body onload="init()"; "_googWcmGet(callback, '1-409-861-0788)"> <!-- HEADER END --> <!-- CONTENT --> <!-- PAGE BANNER --> <div id="indexbanner"> <img class="flex" src="/images/1960_banners/news.jpg" alt="thermal infrared imager support"> </div> <!-- PAGE BANNER END --> <div id="site-content" class="site-content"> <div class="container"> 

先感謝您！

Answer 1

wp_enqueue_scripts()絕對是要走的路，因為它確保腳本的路徑是正確的，並且腳本和dependacies以正確的順序加載。 您需要在主題functions.php文件中使用以下內容：

/**
 * Registers and enqueues theme scripts
 * @args void
 * @returns void
 */
function lma_scripts_and_styles() {

    // Register scripts. Args are $handle, $src, $dependancies, $version, $in_footer:
    wp_register_script( 'stickypanel', get_stylesheet_directory_uri() . '/js/jquery.stickypanel.js', array( 'jquery' ), '', false );
    wp_register_script( 'slicknav', get_stylesheet_directory_uri() . '/js/jquery.slicknav.js', array( 'jquery' ), '', false );
    wp_register_script( 'modernizr', get_stylesheet_directory_uri() . '/js/jquery.slicknav.js', array(), '', false );

    // Now that they're registered you can enqueue them using the handles specified above:
    wp_enqueue_script( 'stickypanel' );
    wp_enqueue_script( 'slicknav' );
    wp_enqueue_script( 'modernizr' );
}
// Hook into the enqueue scripts action
add_action('wp_enqueue_scripts', 'lma_scripts_and_styles', 999);

閱讀有關wp_register_script（）和wp_enqueue_script（）的完整文檔以獲取完整的細分，但一般要點是首先注冊它們，然后將它們排隊。 注冊參數時：

1. $ handle：這是稍后用於引用腳本的名稱。
2. $ src：腳本的URL。 避免直接將路徑硬編碼到腳本中; 使用get_stylesheet_directory_uri()或get_template_directory_uri()因為這些將為您找出正確的URL。
3. $ depenandcies：這是此腳本所需的腳本句柄數組; 最常用的是jQuery。 請注意，WP包含它自己的jQuery副本，您不需要添加自己的副本，只需將其添加為依賴項。
4. $ version：指定要加載的腳本的特定版本，方法是將其作為查詢添加到路徑末尾。 這是可選的，因此您可能不需要它。
5. $ in_footer：對或錯; 是否在頁腳中加載此腳本，或以其他方式將其加載到頁眉中。 Modernizr通常需要加載到標題中，您可能可以在頁腳中加載其他兩個。