Question

我花了很多时间试图解决这个问题。我试图添加一个需要外部jquerylibrary的脚本。我可以通过在脚本标签之间插入我的脚本来使其工作，但我知道这不是正确的方法，它打破了网站上的另一个脚本。

我今晚花了相当多的时间试图找出如何正确添加脚本，我只是无法得到它。

我理解这样的事情是将脚本排队的正确方法：

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文件中将代码包装在No Conflict包装器中。使用$（）将返回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");
        }
    );

});

如何使用jquery和wp_enqueue_script

1 个答案: