Как добавить скрипт jQuery?

Я хочу добавить небольшой сценарий jQuery в свой WordPress, как это сделать?

Вот сценарий 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'); } } } } }); 

Если вы собираетесь добавить встроенный скрипт, который зависит от jQuery, лучший и правильный способ – использовать wp_enqeue_scripts action hook или 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 } } 

Но у вас могут возникнуть проблемы, потому что вы неправильно управляете depdencies. Действительно правильный способ – не печатать встроенные скрипты с зависимостями . Вместо этого запишите его в файл.

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

Вы можете добавить их в файл functions.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') 

Код был протестирован. Все нормально!