Правилно свързване на скриптове и стилове в WordPress с помощта на опашка, всичко за WordPress
Много от нас използват стилове, за да променят външния вид на нашите уебсайтове, както и скриптове, за да подобрят функционалността. Струва си да се отбележи, че начинът, по който включвате скриптове в WordPress, е също толкова важен, колкото и съдържанието на тези файлове. Вместо просто да ги хвърляте в горния или долния колонтитул, трябва да използвате функцията за опашка в WordPress.
В тази статия ще ви покажа как да добавяте интелигентно скриптове и стилове към вашите теми и плъгини, независимо дали проектирате в предния или задния край.
Какво означава "на опашка"?
Чрез поставяне на скриптове на опашка вие казвате на WordPress кои файлове искате да включите и системата ще се погрижи да ги включи в горния или долния колонтитул. Можете дори да дефинирате зависимости за вашите скриптове и стилове и WordPress ще ги добави в правилния ред.
Системата взема от тях цялата необходима информация, от която се нуждае ядрото, темата или плъгина, създава списък с необходимите скриптове и стилове и след това ги извежда на подходящото място.
Същността на метода
Без значение как включвате вашите скриптове, крайният резултат винаги ще бъде под формата на скрипт или етикети за връзки някъде в HTML кода на вашия сайт. Примерът по-долу показва три скрипта и два листа със стилове, които са заредени на сайта:
По отношение на функционалността това е добре, но нека си припомним, че WordPress прави много повече от това, което е показано по-горе. Един сайт може да има много повече различни скриптове и таблици със стилове. Тъй като редът, в който са включени скриптовете и стиловете, е важен, ръчното им включване в горния или долния колонтитул бързо ще доведе дозащото просто се объркваш.
Също така си струва да споменем, че повечето от тези скриптове не се появяват в PHP кода на вашата тема. Всички скриптове, от които се нуждаят WordPress и плъгините, трябва да бъдат включени чрез функциите wp_head() и wp_footer().
Интелигентно опашка
Опашката е начин да кажете на WordPress за вашите скриптове и техните зависимости. Въз основа на това WordPress определя местоположението на скрипта вместо вас. Всичко това се прави в код, така че не е нужно да се притеснявате за промяна на реда на скриптовете, когато добавяте нов към тях. Нека вземем скриптовете от предишния раздел и ги подредим на опашка:
Кодът трябва да бъде поставен във файла functions.php на вашата тема, дъщерна тема или файл с плъгин. Имайте предвид, че както скриптовете, така и стиловете се поставят в опашката чрез закачане на функция към куката wp_enqueue_scripts.
Първото нещо, което направих, беше да подредя нашите стилове. Първо дефинирах стиловете на темата, въпреки че те зависят от стиловете за нулиране. Това не е проблем, тъй като съм дефинирал тази зависимост в третия параметър. Първият параметър е уникално име на файл, вторият е неговото местоположение.
След това добавих скрипта Owl Carousel. В третия параметър дефинирах jQuery като зависимост. Не е необходимо сам да включвам библиотеката jQuery, тъй като тя вече е вградена в WordPress. Разгледайте кодекса на WordPress, за да видите списък с вградени скриптове.
Накрая добавих скрипта на темата. Нашият скрипт зависи от jQuery и Owl Carousel. Всъщност можете просто да дефинирате Owl Carousel като зависимост. Тъй като jQuery е зависимост за Owl Carousel, той така или иначе ще бъде добавен преди скрипта на темата. Въпреки това обичам да изброявам всички зависимости изцяло, тъй като това ми позволява да разбера повече когапреглед на кода.
Последната задача за нас е да се уверим, че нашият тематичен скрипт се зарежда в долния колонтитул. Можете да направите това, като посочите петия параметър като true. Четвъртият параметър (незадължителен) е номерът на версията на скрипта, който зададох на 1.0.
Опашка в детайли
Сега, след като разгледахте примера, е време да си изцапате ръцете и да влезете под капака. Нека да разгледаме всички функции и опции, с които разполагаме.
Използвахме две функции: wp_enqueue_script() и wp_enqueue_style(). И двете приемат пет параметъра, първите четири от които са еднакви:
- handle: Името на скрипта или листа със стилове. По-добре е да използвате само малки букви и тирета. Не забравяйте да зададете уникално име.
- източник: URL адресът на вашия скрипт или стилов лист. Уверете се, че използвате функции като get_template_directory_uri() или plugins_uri().
- Зависимости: масив от дескриптори и файлове, от които зависи вашият стилов лист или скрипт. Те ще бъдат заредени преди вашия скрипт в опашка.
- Версия: Номерът на версията, който ще бъде добавен към заявката. Това гарантира, че потребителят получава правилната версия, независимо от кеша.
- in_footer: Този параметър е достъпен само за скриптове. Ако е зададено на true, скриптът ще се зареди с помощта на wp_footer() в най-долната част на вашата страница.
- Медия: Опция за таблици със стилове, която ви позволява да посочите типа медия, за която стиловете трябва да бъдат изобразени. Например: екран, печат, ръчен и др.
Надяваме се, че обяснението на параметрите направи нашия пример в предишния раздел по-ясен. Сега можете да играете със собствените си скриптове и стилове.
Регистрацияфайлове
Има две стъпки за добавяне на файл (библиотека, скрипт, стилов лист и т.н.), но функцията за поставяне на опашка може да го направи сама и незабавно. Технически, скриптовете и стиловете първо се регистрират и след това се поставят на опашка. Регистрирането позволява на WordPress да знае за вашите файлове, докато опашката всъщност ги добавя към страницата. Ето алтернативен начин за добавяне на нашата въртележка на сови:
Така че защо се прави на две стъпки, когато само една е достатъчна? Отговорът е, че в някои случаи не е необходимо да регистрирате скрипта на същото място, където го извиквате. Добър пример са шорткодовете. Да приемем, че краткият код, който създавате, изисква да бъде включен някакъв JS скрипт. Ако поставите скрипт в опашката чрез закачане на куката wp_enqueue_scripts, той ще се зарежда при всяка заявка, дори ако краткият код не се използва.
Решението е следното: регистрирайте скрипта с помощта на wp_enqueue_scripts, но го поставете вече във функцията за кратък код. Съответно, той ще се зареди само ако краткият код действително се използва. Дори ако краткият код се използва многократно, скриптът ще бъде свързан само веднъж.
Функциите wp_register_scripts() и wp_register_styles() имат същите параметри като техните аналогове за поставяне в опашка. Единствената разлика между двете е, че функциите за опашка ви позволяват да посочите манипулатор само ако този манипулатор е регистриран.
Премахване на скриптове и стилове
В WordPress стиловете и скриптовете могат да бъдат извадени от опашката и отписани с помощта на следните функции:
- wp_deregister_script()
- wp_deregister_style()
- wp_dequeue_script()
- wp_dequeue_style()
Тези функции ви позволяват да изтривате файлове по модулен начин. Следващият пример показва колко лесно е да премахнете jQuery и да замените тази библиотека с по-нова версия.
Въпреки това, обикновено не е добра идея да променяте jQuery на по-нова версия, тъй като WordPress е проектиран да работи възможно най-гладко с версията по подразбиране, добавена към системата.
Заключение
Надяваме се, че сега разбирате защо опашката е много важен процес. Той премахва тежестта на управлението на зависимостите от плещите ви, дава ви възможността да добавяте вашите скриптове по модулен и много удобен начин. Опашката се препоръчва за всички WordPress плъгини и теми. Вашият продукт (безплатен или платен) няма да бъде приет от хранилището на WordPress и много премиум пазари без него. Опашката формира правилата за „добра игра“ и следователно трябва да се използва от всички разработчици.