在Wordpress中运行的Javascript需要在header.php或functions.php中运行吗？

Question

I'm trying to get a few js files to work inside my Wordpress site's header. The scripts are showing up and loading, but aren't working, however they work just fine on our regular html site so I know the code is right, just don't know how to correctly implement it in Wordpress. Any help is much appreciated!

The 3 main scripts I'm after to get working are the stickypanel.js (sticks the nav to the top), slicknav.js (mobile nav code), and slicknav.modernizer.js (mobile nav code).

They work fine on our test site (even on mobile):
http://www.efficient.infraredcamerasinc.com/pages/contact-infrared-cameras-inc.html

but alas can't get it working on the blog (Wordpress) part of our site:
http://www.efficient.infraredcamerasinc.com/blog/

I'm also needing it to work on all the posts and pages as well, so I'm assuming that the scripts running (or sent to run) in the header are the way to go. I had read that direct paths were a no-no so tried getting them pulled from the child theme folder but I couldn't find the correct code (I know <?php bloginfo('template_directory') goes to the parent theme but couldn't find how to pull from the child theme).

I tried implementing wp_enqueue_script function in functions.php but I don't think I'm doing that right at all because then I get just a blank page. Is that the correct way to go about it?

It's confusing because the stylesheets I've added in the header.php are working correctly.

I know that the slicknav scripts run this code for the mobile nav: (I didn't write the original scripts so going off what I see)

 <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> 

And here is my header.php file:

 <?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"> 

Thank you in advance!

Answer 1

wp_enqueue_scripts() is definitely the way to go, as it ensures that the paths to the scripts are correct, and that scripts and dependacies are loaded in the correct order. You need something like the following in your theme functions.php file:

/**
 * 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);

Read the full documentation on both wp_register_script() and wp_enqueue_script() for the full breakdown, but the general gist is to first register them, then enqueue them. When you register the arguments are:

1. $handle: This is a name used to refer to the script later on.
2. $src: The URL to the script. Avoid hardcoding a path directly to the script; use either get_stylesheet_directory_uri() or get_template_directory_uri() as these will figure out the correct URL for you.
3. $depenandcies: This is an array of script handles that this script requires; the most common one to use is jQuery. Note that WP includes it's own copy of jQuery, you don't need to add your own, just add it as a dependacy.
4. $version: Specifies a particular version of a script to load by adding it to the end of the path as a query. This is optional, so you probably won't need it.
5. $in_footer: True or false; whether to load this script in the footer, or otherwise load it in the header. Modernizr typically needs to get loaded in the header, you might be able to get away with loading the other two in the footer.