WordPress е част от живота ни повече от 16 години, но методът за добавяне на скриптове към теми и плъгини остава загадка за много разработчици. В тази статия най-накрая сложихме край на объркването.

Тъй като това е една от най-широко използваните JavaScript библиотеки, днес обсъждаме как да добавите jQuery скриптове към вашите теми или WordPress плъгини.

За режима на съвместимост с jQuery

Преди да започнете да добавяте скриптове към WordPress, важно е да разберете режима на съвместимост на jQuery.

Както вероятно знаете, WordPress идва с вече включен jQuery.

Версията на jQuery в WordPress също има " режим на съвместимост Което е механизъм за избягване на конфликти с други библиотеки на javascript.

Част от този защитен механизъм означава, че вие ne pouvez pas използвайте $подписвайте директно, както бихте го направили в други проекти.

Вместо това, когато пишете jQuery код за WordPress, трябва да използвате jQuery.

Ето пример за този код:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

Проблемът е, че писането на jQuery милион пъти отнема повече време, затруднява четенето и може да претегли вашия скрипт.

Добрата новина?

С няколко модификации отново можете да използвате нашия сладък символ за малко долар.

Между другото, ако сте ново за jQuery , знакът $ е просто псевдоним на jQuery (), а след това псевдоним на функция.

Основната структура изглежда така: $(selector).action(). Знакът за долар дефинира jQuery ... „(селекторът)“ търси или намира HTML елементи ... и накрая „jQuery () действие“ е действието, което трябва да се извърши върху елементите.

Обратно към това как можем да заобиколим проблема си със съвместимостта ...

1.Влезте в jQuery стелт режим

Първият начин да заобиколите режима на съвместимост е да промъкнете кода.

Например, ако заредите скрипта си в долния колонтитул, можете да увиете кода си в анонимна функция, която ще картографира jQuery $.

Както в примера по-долу:

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

Ако искате да добавите вашия скрипт в заглавката (което трябва да избягвате, ако е възможно, повече за това по-долу), можете да обвиете всичко в функция, готова за документи, като предадете $по пътя.

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. Влезте в режим „Без конфликт“

Друг лесен начин да избегнете изписването на jQuery е да превключите в режим „Без конфликти“ и използвайте различен пряк път.

В този случай: $jвместо по подразбиране $.

Всичко, което трябва да направите, е да го декларирате в горната част на вашия скрипт:var $j = jQuery.noConflict();

Добре, сега знаете повече за писането на валиден jQuery код за WordPress, нека го добавим към нашия уеб сайт.

Как да добавите jQuery скриптове към WordPress

Един от най-лесните начини за добавяне на jQuery скриптове към WordPress е чрез процес, наречен „настройка“ чакаща линия ".

За а уеб сайт Класически HTML, бихме използвали  <link> елемент за добавяне на скриптове. В крайна сметка WordPress прави същото, но ние ще използваме специални функции на WP, за да постигнем това.

По този начин той управлява всички наши зависимости от нас (благодаря WP!).

Ако работите върху тема, можете да използвате функцията  wp_enqueue_script() във вашия  functions.php файл.

Ето как изглежда:

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Тази функция отнема пет аргумента:

  1. $ handle - уникален манипулатор, който можете да използвате за препратка към скрипта.
  2. $src – местоположението на скриптовия файл.
  3. $ deps - определя масив от зависимости.
  4. $ ver - номерът на версията на вашия скрипт.
  5. $ in_footer - позволява на WordPress да знае къде да постави скрипта.

* Едно нещо, което трябва да се отбележи  $in_footer означава, че по подразбиране скриптовете ще бъдат заредени в заглавката.

Това е лоша практика и може значително да забави вашия сайт. Следователно, ако искате да поставите вашия скрипт в долния колонтитул, уверете се, че този параметър е зададен на true.

Добавяне на скриптове към администратора на WordPress

Можете също да добавяте скриптове към администратора. Използваните функции са абсолютно еднакви, просто трябва да използвате различна кука.

Например:

функция my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__ФАЙЛ__). '/js/my-great-script.js', масив ('jquery'), '1.0.0', вярно);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Вместо да влезете, wp_enqueue_scriptsтрябва да използваме admin_enqueue_scripts.

Как да отпишете jQuery от WordPress

Но какво ще стане, ако искате да използвате различна версия на jQuery от тази, предварително заредена от WordPress?

Можете да го поставите на опашка ... но това означава, че на страницата ще има две версии на jQuery.

За да избегнем това, трябва да отменим регистрацията на версията на WP.

Ето как изглежда:

// включва персонализирана jQuery
functionSpace_include_custom_jquery () функция {

wp_deregister_script ('jquery');
wp_enqueue_script(
   'jquery', 
   'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
   array(), 
   null, 
   true);
}
 add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

Това е толкова лесно, колкото използването на  wp_deregister_script () за се отпиша jQuery от WP, след което включва jQuery скрипта, който искате да добавите.

В горния пример използвахме jQuery библиотека, хоствана от Google , но очевидно ще го замените с URL адреса на вашия собствен скрипт.

Не трябва ли да запазвате скриптове, преди да ги поставите на опашка?

Ако искате да заредите вашите скриптове, както е необходимо, вместо да ги заредите директно в страниците си - можете да запазите скрипта по-рано.

Например на  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

След като направите това, можете да поставите скриптовете на опашка, когато имате нужда от тях:

add_action ('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action ('admin_enqueue_scripts', 'enqueue_back_scripts');

Не забравяйте да използвате едни и същи имена, за да избегнете сблъсък с други скриптове.

Използване на условни тагове

Използвайте условни тагове, за да зареждате вашите скриптове само когато е необходимо.

Това се използва по-често в администратора, където искате да използвате скрипт само на конкретна страница (а не в целия администратор). Освен това спестява честотна лента и време за обработка, което означава по-бързо време за зареждане за вашия уеб сайт.

Обърнете внимание на документация за скриптове за опашки  в WordPress Codex за повече информация.

Добавете jQuery към WordPress с помощта на приставки

Директорията с плъгини на WP също съдържа много интересни плъгини, които можете да използвате за вмъкване на скриптове във вашите публикации, страници или Теми на WordPress.

Ето няколко примера за добре познати плъгини за JavaScript / jQuery: разширени персонализирани полета , Прости потребителски CSS и JS , стилове на скриптове n et почистване на ресурси.

Създайте свой собствен jQuery проект

По-доброто разбиране на jQuery само ще направи работата ви по-въздействаща. Независимо дали за вашия собствен уебсайт или за клиентски проекти.

jQuery е добре известен със своята простота и както (надявам се) научихте в тази статия, добавянето на прости jQuery скриптове към WordPress е лесно като пай, щом знаете как.

Да, има малко режийни разходи в сравнение с използването на ванилов HTML, но има и допълнителната полза от управлението на зависимостите и яснотата.

Не само това, като използвате малки трикове като заобикаляне на съвместимостта по подразбиране на jQuery WP, ще си спестите много време, усилия и подут код.

Тя ПИН на Pinterest