javascript - 无法在 Wordpress 中运行的 Javascript 需要在 header.php 或 functions.php 中运行？

Question

我试图让一些 js 文件在我的 Wordpress 网站的标题中工作。脚本正在显示和加载，但无法正常工作，但是它们在我们的常规 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')转到父主题，但找不到如何从子主题中拉出）。

我尝试在其中实现wp_enqueue_script功能，functions.php但我认为我完全没有这样做，因为那时我得到的只是一个空白页。这是正确的方法吗？

这很令人困惑，因为我在其中添加的样式表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">►&lt;/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">►&lt;/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">►&lt;/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">►&lt;/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">►&lt;/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">►&lt;/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">

先感谢您！

score 3 · Accepted Answer

wp_enqueue_scripts()绝对是要走的路，因为它确保脚本的路径是正确的，并且脚本和依赖项以正确的顺序加载。您的主题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()的完整文档以了解完整的分类，但一般要点是首先注册它们，然后将它们排入队列。当您注册参数时：

$handle：这是一个用于稍后引用脚本的名称。
$src：脚本的 URL。避免将路径直接硬编码到脚本；使用其中一个get_stylesheet_directory_uri()或get_template_directory_uri()因为这些将为您找出正确的 URL。
$depenandcies：这是该脚本所需的脚本句柄数组；最常用的是jQuery。请注意，WP 包含它自己的 jQuery 副本，您不需要添加自己的，只需将其添加为依赖项即可。
$version：指定要加载的脚本的特定版本，方法是将其作为查询添加到路径的末尾。这是可选的，因此您可能不需要它。
$in_footer：真假；是否将此脚本加载到页脚中，或者以其他方式将其加载到页眉中。Modernizr 通常需要在页眉中加载，您也许可以在页脚中加载其他两个。

javascript - 无法在 Wordpress 中运行的 Javascript 需要在 header.php 或 functions.php 中运行？

1 回答 1

Related

Reference