How to add jQuery script?

时间:2015-02-13 作者:user3098728

我想在我的WordPress中添加小jQuery脚本,怎么做?

下面是我要添加的JQuery脚本:

  ( function( window ) {
   \'use strict\';

  function classReg( className ) {
   return new RegExp("(^|\\\\s+)" + className + "(\\\\s+|$)");
  }
   var hasClass, addClass, removeClass;

   if ( \'classList\' in document.documentElement ) {
    hasClass = function( elem, c ) {
     return elem.classList.contains( c );
   };
   addClass = function( elem, c ) {
   elem.classList.add( c );
  };
   removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
 }
   else {
   hasClass = function( elem, c ) {
   return classReg( c ).test( elem.className );
 };
 addClass = function( elem, c ) {
   if ( !hasClass( elem, c ) ) {
   elem.className = elem.className + \' \' + c;
  }
 };
  removeClass = function( elem, c ) {
 elem.className = elem.className.replace( classReg( c ), \' \' );
 };
}

function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
 fn( elem, c );
}

var classie = {
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

if ( typeof define === \'function\' && define.amd ) {
  define( classie );
} else {
 window.classie = classie;
 }

})( window );

var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $(\'.accordion\');

accordion.addEventListener("click",function(e) {
 e.stopPropagation();
 e.preventDefault();
 if(e.target && e.target.nodeName == "A") {
  var classes = e.target.className.split(" ");
   if(classes) {
  for(var x = 0; x < classes.length; x++) {
    if(classes[x] == "accordionTitle") {
      var title = e.target;

      var content = e.target.parentNode.nextElementSibling;

      classie.toggle(title, \'accordionTitleActive\');

      if(classie.has(content, \'accordionItemCollapsed\')) {
        if(classie.has(content, \'animateOut\')){
          classie.remove(content, \'animateOut\');
        }
        classie.add(content, \'animateIn\');

      }else{
         classie.remove(content, \'animateIn\');
         classie.add(content, \'animateOut\');
      }

      classie.toggle(content, \'accordionItemCollapsed\');

      }
     }
    }
   }
  });

2 个回复
最合适的回答,由SO网友:cybmeta 整理而成

如果要添加依赖于jQuery的内联脚本,最好且正确的方法是使用wp_enqeue_scripts 行动挂钩,或wp_footer, 视情况而定,结合wp_script_is() 功能:

add_action( \'wp_footer\', \'cyb_print_inline_script\' );
function cyb_print_inline_script() {
  //Check that jQuery has been printed
  if ( wp_script_is( \'jquery\', \'done\' ) ) {
    ?>
    <script>
        // js code goes here
    </script>
    <?php
  }
}
但最终可能会出现问题,因为您没有正确管理部门。真正正确的方法是not print inline scripts that has dependencies. 相反,将其放入文件队列中。

add_action( \'wp_enqueue_scripts\', \'cyb_enqueue_scripts\' );
function cyb_enqueue_scripts() {

    wp_enqueue_script(
        //Name to handle your script
        \'my-script-handle\',
         //URL to the script file
         get_stylesheet_directory_uri() . \'/my-script.js\',
         //Set the dependencies
         array( \'jquery\' ),
         //Version
         \'1.0\',
         //In footer: true to print the script in footer, false to print it on head
         true
    );

}
如果需要将变量传递给脚本,请使用wp_localize_script 具体如下:

add_action( \'wp_enqeue_scripts\', \'cyb_enqueue_scripts\' );
function cyb_enqueue_scripts() {

   //Register the js file
    wp_register_script(
        //Name to handle your script
        \'my-script-handle\',
         //URL to the script file
         get_stylesheet_directory_uri() . \'/my-script.js\',
         //Set the dependencies
         array( \'jquery\' ),
         //Version
         \'1.0\',
         //In footer: true to print the script in footer, false to print it on head
         true
    );


    //Localize the needed variables
    $script_vars = array(
        \'some_var\' => \'some value\',
        \'another_var\' => \'another value\'
    );
    wp_localize_script( \'my-script-handle\', \'object_name_passed_to_script\', $script_vars );

    //Enqueue the script
    wp_enqueue_script(\'my-script-handle\');

}

SO网友:Vincent Wong

您可以将它们添加到函数中。php文件,代码如下:

    //load js

    function load_js(){
        if(is_page(Page ID, Page Title or Page Slug)){
        //put your js code here
        }
    }

    add_action(\'wp_footer\', \'load_js\', 20); //for footer   
    add_action(\'wp_head\', \'load_js\', 8); //for head
或:

function load_js(){
  if(is_page(19)){
     wp_enqueue_script(\'UniqueName\', \'jsfilepath\', false, \'version number\', true ); // the last parameter true for footer false for head
  }
}

add_action( \'wp_enqueue_scripts\', \'load_js\')
代码已经过测试。没关系!

结束

相关推荐

是否将核心jQuery放入页脚?

我有这个functions.php 文件,我无法将jQuery加载到页脚中。这个includes 不过,文件在页脚中加载很好。我还需要做什么?function starter_scripts() { wp_enqueue_style( \'starter-style\', get_stylesheet_uri() ); wp_enqueue_script( \'jquery\', \'\', \'\', \'\', true ); wp_