如何使用 jquery 和 wp_enqueue_script

Question

我\xc2\xb4已经花了很长时间试图解决这个问题。我正在尝试添加一个需要外部 jquery 库的脚本。我可以通过在脚本标签之间插入我的脚本来使其工作，但是我知道这不是正确的方法，并且它会破坏网站上的另一个脚本。

\n\n

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

\n\n

我知道这样的方法是对脚本进行排队的正确方法：

\n\n

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

\n\n

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

\n\n

$(document).ready(function () {\n\n\n$("#menu-item-16").hover(\n\n\n\n\n          function () {\n                  $(\'body\').css("background", "#ff9900");\n              }, \n              function () {\n                $(\'body\').css("background", "#ccc");\n             }\n            );\n\n            $("#menu-item-17\xe2\x80\x9d).hover(\n              function () {\n                  $(\'body\').css("background", "red");\n              }, \n              function () {\n                  $(\'body\').css("background", "#ccc");\n              }\n            );\n\n            $("#menu-item-18\xe2\x80\x9d).hover(\n              function () {\n                  $(\'body\').css("background", "yellow");\n              }, \n              function () {\n                  $(\'body\').css("background", "#ccc");\n              }\n            );\n        });\n

\n\n

编辑：

\n\n

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

\n\n

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

\n\n

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

\n\n

   `<link rel="stylesheet" type="text/css" href="/wp-content/themes/neighborhood/js/jquery.fullPage.css" />\n\n    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>\n\n<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script> \n <script type="text/javascript" src="/wp-content/themes/neighborhood/js/vendors/jquery.slimscroll.min.js"></script>\n\n<script type="text/javascript" src="/wp-content/themes/neighborhood/js/jquery.fullPage.js"></script>\n\n\n\n<script>\n $(document).ready(function() {\n$.fn.fullpage({\n    verticalCentered: true,\n     resize : true,\n    slidesColor : [\'#AF1700\', \'#359973\', \'#F46321\', \'#A6C7DB\'],\n    scrollingSpeed: 700,\n    easing: \'easeInQuart\',\n    menu: false,\n    navigation: false,\n    navigationPosition: \'right\',\n    navigationTooltips: [\'firstSlide\', \'secondSlide\'],\n    slidesNavigation: true,\n    slidesNavPosition: \'bottom\',\n    loopBottom: false,\n    loopTop: false,\n    loopHorizontal: true,\n    autoScrolling: true,\n    scrollOverflow: true,\n    css3: false,\n    paddingTop: \'3em\',\n    paddingBottom: \'10px\',\n    fixedElements: \'#element1, .element2\',\n    normalScrollElements: \'#element1, .element2\',\n    keyboardScrolling: true,\n    touchSensitivity: 15,\n    continuousVertical: false,\n    animateAnchor: false, \n    setScrollingSpeed: 1000,\n\n\n\n});\n});    \n\n </script>\n

\n\n

`

\n\n

根据我新发现的见解，我尝试了这个，但它不起作用：

\n\n

`

\n\n

function fullpage() { \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0wp_enqueue_script(\'jquery\');\xc2\xa0 \n

\n\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n\n

wp_register_style( \xe2\x80\x99fullpage-css\', get_template_directory_uri() . \'/js/jquery.fullPage.css\',\'\',\'\', \'screen\' ); \xc2\xa0\xc2\xa0\nwp_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\xc2\xa0 ); \n\xc2\xa0wp_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\xc2\xa0 ); \n

\n\n

\xc2\xa0

\n\n

 wp_register_script( \'fullpage\', get_template_directory_uri() . \'/js/jquery.fullPage.js\', array(\'jquery\'),\'\',true\xc2\xa0 ); \n\xc2\xa0wp_register_script( \'fullpagecode\', get_template_directory_uri() . \'/js/fullpagecode.js\', array(\'jquery\'),\'\',true\xc2\xa0 ); \n wp_register_script( \'slimscroll\', get_template_directory_uri() . \'/js/vendors/jquery.slimscroll.min.js\', \'\', null,\'\'\xc2\xa0 ); \n\nwp_enqueue_style( \'fullpage-css\' ); // Enqueue our stylesheet\n

\n\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n\n

wp_enqueue_script( \'jquery.1.8.3\' );\xc2\xa0 // Enqueue our first script\n

\n\n

\xc2\xa0

\n\n

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

\n\n

\xc2\xa0

\n\n

 wp_enqueue_script( \'fullpage\' );\xc2\xa0 // Enqueue our third  script\n

\n\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n\n

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

\n\n

\xc2\xa0

\n\n

 wp_enqueue_script( \xe2\x80\x99slimscroll\xe2\x80\x99 ); // Enqueue fifth script\n

\n\n

\xc2\xa0\xc2\xa0

\n\n

  }add_action( \'wp_enqueue_scripts\', \xe2\x80\x99fullpage\xe2\x80\x99 ); `\n

\n

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 文件中将代码包装在无冲突包装器中。否则使用 $() 将返回未定义。

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");
        }
    );

});