如何使用 jquery 和 wp_enqueue_script

Question

我花了很长时间试图弄清楚这一点。我试图添加一个需要外部 jquerylibrary 的脚本。我可以通过在 scripttags 之间插入我的脚本来使其工作，但是我知道这不是正确的方法，它会破坏网站上的另一个脚本。

今晚我花了相当多的时间试图弄清楚如何正确添加脚本，但我就是不明白。

我知道这样的事情是让脚本入队的正确方法：

function my_scripts_method() { wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.9.1.js'); wp_enqueue_script( 'jquery' ); }
add_action('wp_enqueue_scripts', 'my_scripts_method');

我的主要问题是，我如何编写函数以便它调用库，同时故障保护它只加载一次，并且不会与其他脚本崩溃？这是脚本：

$(document).ready(function () {


$("#menu-item-16").hover(




          function () {
                  $('body').css("background", "#ff9900");
              }, 
              function () {
                $('body').css("background", "#ccc");
             }
            );

            $("#menu-item-17”).hover(
              function () {
                  $('body').css("background", "red");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );

            $("#menu-item-18”).hover(
              function () {
                  $('body').css("background", "yellow");
              }, 
              function () {
                  $('body').css("background", "#ccc");
              }
            );
        });

编辑：

第二个问题，几个库和一个样式表。

如上所述，我有一个更复杂的脚本，你们也许可以帮助我。

我现在在标题中有这段代码，它可以工作。

   `<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script> 
 <script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>



<script>
 $(document).ready(function() {
$.fn.fullpage({
    verticalCentered: true,
     resize : true,
    slidesColor : ['#AF1700', '#359973', '#F46321', '#A6C7DB'],
    scrollingSpeed: 700,
    easing: 'easeInQuart',
    menu: false,
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    autoScrolling: true,
    scrollOverflow: true,
    css3: false,
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#element1, .element2',
    normalScrollElements: '#element1, .element2',
    keyboardScrolling: true,
    touchSensitivity: 15,
    continuousVertical: false,
    animateAnchor: false, 
    setScrollingSpeed: 1000,



});
});    

 </script>

`

根据我新发现的见解，我尝试了这个，但没有奏效：

`

function fullpage() {     wp_enqueue_script('jquery');  

    

wp_register_style( ’fullpage-css', get_template_directory_uri() . '/js/jquery.fullPage.css','','', 'screen' );   
wp_register_script( 'jquery.1.8.3', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array('jquery'),'',true  ); 
 wp_register_script( 'jquery.1.9.1', get_template_directory_uri() . 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array('jquery'),'',true  ); 

 

 wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'',true  ); 
 wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'',true  ); 
 wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', '', null,''  ); 

wp_enqueue_style( 'fullpage-css' ); // Enqueue our stylesheet

    

wp_enqueue_script( 'jquery.1.8.3' );  // Enqueue our first script

 

 wp_enqueue_script( 'jquery.1.9.1' ); // Enqueue our second script

 

 wp_enqueue_script( 'fullpage' );  // Enqueue our third  script

    

wp_enqueue_script( 'fullpagecode' ); // Enqueue fourth script

 

 wp_enqueue_script( ’slimscroll’ ); // Enqueue fifth script

  

  }add_action( 'wp_enqueue_scripts', ’fullpage’ ); `

Answer 1

不要在脚本中运行 jquery。这会破坏 wordpress 中的其他脚本。

制作一个 .js 文件（例如，example.js 并将其放在 /js 目录下的主题文件夹中）并将其“入队”到您的 functions.php 文件中，如下所示。

function theme_styles() {
    wp_register_style( 'fullpage-css', get_template_directory_uri() . '/css/jquery.fullPage.css' );   
    wp_enqueue_style( 'fullpage-css' ); 
}
add_action('wp_enqueue_scripts', 'theme_styles');

function theme_scripts() {
    wp_register_script( 'fullpage', get_template_directory_uri() . '/js/jquery.fullPage.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpage' );
    wp_register_script( 'fullpagecode', get_template_directory_uri() . '/js/fullpagecode.js', array('jquery'),'1.0.0',true  ); 
    wp_enqueue_script( 'fullpagecode' );
    wp_register_script( 'slimscroll', get_template_directory_uri() . '/js/vendors/jquery.slimscroll.min.js', array('jquery'), null, true  );
    wp_enqueue_script( 'slimscroll' );
}
add_action('wp_enqueue_scripts', 'theme_scripts');

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

$src 是 js 文件的路径。 $deps 是你定义这个脚本需要 jquery 的地方，就像这样。数组（'jquery'）

你不需要包含 jquery，因为 wordpress 已经内置了。

然后在主题文件夹中的 .js 文件中，将代码包装在无冲突包装器中。否则使用 $() 将返回 undefined。

jQuery(document).ready(function($) {

    $("#menu-item-16").hover(
          function () {
                  $('body').css("background", "#ff9900");
          }, 
          function () {
            $('body').css("background", "#ccc");
         }
    );

    $("#menu-item-17").hover(
        function () {
          $('body').css("background", "red");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

    $("#menu-item-18").hover(
        function () {
          $('body').css("background", "yellow");
        }, 
        function () {
          $('body').css("background", "#ccc");
        }
    );

});