Добавяне на Javascript към WordPress теми Правилният начин

Има специфичен начин за добавяне на Javascript към вашата WordPress тема, за да се предотвратят конфликти с плъгини или родителски WordPress теми. Проблемът е, че много „разработчици“ извикват своите JavaScript файлове директно във файла header.php или footer.php, което е неправилният начин да го направите.


В това ръководство ще ви покажа как правилно да извикате вашите файлове с javascript, използвайки вашия function.php файл, така че те да се заредят право в етикета на главата или долния край на вашия сайт. По този начин, ако разработвате тема за разпространение и вашият краен потребител иска да модифицира скриптовете чрез дъщерна тема, която те могат, или ако използват минимизиране / кеширане или други приставки за оптимизиране, те ще работят правилно. И ако работите с детска тема, вашите скриптове се добавят по правилния начин, без да копирате файловете header.php или footer.php в вашата детска тема, които никога не биха били необходими (когато работите с добре кодирана тема)

Грешен начин за добавяне на Javascript към WordPress теми

Извикването на javascript във файла header.php или footer.php, както е показано по-долу, НЕ е правилният начин и горещо препоръчвам срещу него, често пъти предизвиква конфликти с други плъгини и правите нещата ръчно при работа с CMS никога не е добра идея.

Правилният начин за добавяне на Javascript към WordPress теми

По-доброто за добавяне на javascript към вашата WordPress тема е да го направите чрез файла function.php, като използвате wp_enqueue_script. Използването на wp_enqueue_scripts действието за зареждане на вашия JavaScript ще ви помогне да запазите темата си от проблеми.

пример

wp_enqueue_script ('моят скрипт', get_template_directory_uri (). '/js/my-script.js', array (), true);

Кодът по-горе ще зареди файла my-script.js на вашия сайт. Както можете да видите, включих само дръжката $, но можете също да добавите зависимости за вашия скрипт, номер на версията и дали да го заредите в заглавката или долния колонтитул (по подразбиране е заглавието).

Функцията wp_enqueue_script () може технически да се използва във всяка тема на шаблон или файл с плъгини, но ако зареждате глобални скриптове, ще искате да го поставите или във файла на function.php на вашата тема, или в отделен файл, специално предназначен за зареждане на скриптове в сайт. Но ако търсите само да заредите скрипт в конкретен файл с шаблон (например в публикации в галерията), можете да поставите функцията точно във файла с шаблони, но лично аз препоръчвам да запазите всички скриптове на едно място и да използвате условни условия за зареждане скриптове според нуждите.

WordPress хоствани скриптове

Едно готино нещо за WordPress е, че вече има куп скриптове, хоствани и регистрирани, които можете да използвате при разработването на вашите теми. Например jQuery, който се използва в почти всеки проект, ВИНАГИ трябва да се зарежда от WordPress и никога да не се хоства на сайт на трети страни, като Google. Така че преди да добавите персонализиран скрипт към проекта си, проверете списъка с регистрирани скриптове за да сте сигурни, че той вече не е включен в WordPress и ако е, трябва да заредите този, вместо да регистрирате свой собствен.

Използване на WordPress Enqueue Hook

По-рано споменахме функцията, необходима за зареждане на скрипт на вашия сайт, но когато работите с файлове, които не са шаблони, като например вашия файл function.php, трябва да добавяте тази функция вътре в друга функция, закачена в правилните куки на WordPress, по този начин вашите скриптове получават регистрирани с всички останали скриптове, регистрирани от WordPress, плъгини на трети страни и темата на вашия родител, когато използвате детска тема.

WordPress има две различни куки за действие, които можете да използвате за повикване на вашите скриптове.

  1. wp_enqueue_scripts – действие, използвано за зареждане на скриптове в предния край
  2. admin_enqueue_scripts – действие, използвано за зареждане на скриптове в администратора на WP

Ето един пример (който ще бъде добавен към файла function.php) как да създадете функция и след това да използвате куката на WordPress, за да извикате скриптите си.

/ **
* Enqueue скрипт
* /
функция myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
добавяне на управление ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Забележка: Вижте как използваме функцията „get_template_directory_uri“, когато определяме местоположението на вашия скрипт? Тази функция създава URL адрес на вашата папка с теми. Ако работите с детска тема, вместо това ще искате да използвате „get_stylesheet_directory_uri“, така че да сочи към темата на вашето дете, а не към родителската тема.

Добавяне на вграден Javascript код

Въпреки че можете лесно да поставите вграден JavaScript в който и да е шаблон на файл чрез скрипта, може да е добра идея да използвате и куки за WordPress за добавяне на вграден код, особено когато това е основен плъгин или код на тема. По-долу е даден пример за добавяне на вградени скриптове към вашия сайт:

функция myprefix_add_inline_script () {
wp_add_inline_script ('моят скрипт', 'сигнал ("здравей свят");', 'след');
}
добавяне ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Това ще направи, е да добавите вградения си JavaScript след предварително регистрирания скрипт „my-script“. Когато използвате wp_add_inline_script, можете да добавяте вграден код преди или след вече регистриран скрипт, така че ако се опитвате да промените кода на определен скрипт, уверете се, че е зареден след него, или ако просто трябва да добавите някакъв персонализиран код, можете да закачите го до jquery скрипта, който обикновено се зарежда от повечето теми на WordPress и ако не, можете да използвате wp_enqueue_script, за да заредите хостираната версия на WordPress на jQuery.

Използвайки този метод, хората могат лесно да премахват вашите вградени скриптове чрез детска тема или добавка за добавки, той поддържа всички ваши персонализирани JavaScript добре подредени и се анализира от WordPress, което може да бъде по-безопасно. И ако използвате детска тема, можете да заредите скриптите си чрез файла function.php, вместо да копирате файлове header.php или footer.php в темата на детето си.

В този случай, ако работите в детска тема, не е необходимо да правите това, можете просто да зарежете кода в заглавката си или с помощта на wp_head или wp_footer куки, като например примера по-долу:

добавяне ('wp_footer', функция () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map