Имплементација ЈаваСцрипт-а на циљану ВордПресс страницу
ВордПресс је платформа лака за коришћење која чини управљање и прилагођавање веб локација једноставним. Међутим, неке промене могу бити изазовне за имплементацију, укључујући извршавање ЈаваСцрипт-а на одређеној страници. Могуће је да је скрипта коју сте додали у одељак „Хеад“ на вашој веб локацији сада присутна на свакој страници. Ово је типична потешкоћа за први пут.
Разумевање како да условно примените ЈаваСцрипт датотеку је кључно када се користи за циљање одређене странице. ЈаваСцрипт може имати неочекиване последице и смањити брзину ваше веб локације ако се користи у целости. То је разлог зашто је кључно ограничити скрипту на потребну страницу.
У овом чланку ћемо вас провести кроз процес промене ваше ВордПресс конфигурације тако да се ЈаваСцрипт покреће само на страницама које су вам потребне. Одговор је разумљив и онима који нису програмери; овај водич је намењен онима који тек почињу.
Требало би да се осећате пријатно да рукујете скриптама специфичним за страницу у ВордПресс-у док завршите ову лекцију. Провешћемо вас кроз прецизан код и процедуру која је потребна да бисмо били сигурни да се ваш ЈаваСцрипт извршава само тамо где би требало, побољшавајући перформансе ваше веб локације.
| Цомманд | Пример употребе |
|---|---|
| is_page() | Функција позната као ис_паге() проверава да ли тренутна ВордПресс страница одговара датом ИД-у странице, наслову или ознаци. Да би се гарантовало да се скрипте учитавају само на одређеној страници, ова функција је неопходна. На пример, ако (ис_паге(42)) {... } |
| wp_enqueue_script() | ВордПресс користи вп_енкуеуе_сцрипт() метод за учитавање ЈаваСцрипт датотека. Гарантује да се скрипте учитавају у главу или подножје сајта и да су исправно укључене у њихове зависности. вп_енкуеуе_сцрипт('цустом-јс', 'хттпс://екампле.цом/цоде.јс') је пример овога. |
| add_action() | Да бисте повезали прилагођене функције у унапред дефинисане ВордПресс догађаје, као што су скрипте за учитавање, користите адд_ацтион() методом. Ово омогућава динамичко уметање скрипти када је то потребно. 'вп_енкуеуе_сцриптс', 'лоад_цустом_јс_он_специфиц_паге' су два примера акција додавања.'); |
| add_shortcode() | ВордПресс вам омогућава да региструјете нови кратки код користећи адд_схортцоде() функција. Ово вам омогућава да додате динамички материјал, као што је ЈаваСцрипт, директно у уређивач постова. Адд_схортцоде('цустом_јс', 'адд_јс_виа_схортцоде') је пример. |
| $.getScript() | Када се страница учита, можете користити јКуери метод $.гетСцрипт() за динамичко учитавање спољне ЈаваСцрипт датотеке. Примена условне логике на учитавање скрипте на основу УРЛ-а или других критеријума је вредна употреба. $.гетСцрипт('хттпс://екампле.цом/цоде.јс'), на пример |
| window.location.href | Тхе виндов.лоцатион.хреф property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > својство враћа пуну УРЛ адресу тренутне странице. Може се користити за проверу одређених УРЛ образаца, што га чини корисним за условно учитавање ЈаваСцрипт-а на одређеним страницама. Пример: иф (виндов.лоцатион.хреф.индекОф('специфиц-паге-слуг') > -1) { ... } |
| get_header() | Датотеку шаблона заглавља учитава ВордПресс помоћу гет_хеадер() функција. Пре додавања ЈаваСцрипт кода, он се користи у прилагођеним шаблонима страница како би се осигурало да је структура исправна. на пример, |
| get_footer() | Предложак подножја ВордПресс-а се учитава помоћу гет_фоотер() функција, која осигурава да се ЈаваСцрипт учита пре него што се на одговарајући начин убаци у излаз странице. на пример, |
Разумевање улоге ЈаваСцрипт-а на одређеним ВордПресс страницама
Начин постављања скрипте директно у одељак „Хеад“ може довести до њеног учитавања на свакој страници када треба да покренете ЈаваСцрипт датотеку на одређеној ВордПресс страници. Што се тиче корисничког искуства и перформанси, ово није идеално. Претходне опције дају ефикаснији начин руковања скриптама ограничавањем скрипте само на наведену страницу. На пример, можемо да користимо ВордПресс-ове ис_паге() метод за одређивање да ли корисник види одређену страницу на основу њеног ИД-а или пужа. Ово је главна техника која се користи да би се осигурало да се ЈаваСцрипт датотека учитава само када је то неопходно.
Први метод користи условне ознаке у функције.пхп фајл заједно са вп_енкуеуе_сцрипт(). Ова техника користи основну ВордПресс функцију која додаје скрипте на начин који обезбеђује правилно управљање зависношћу и учитава скрипту у одговарајућем делу странице. Кроз вп_енкуеуе_сцриптс акционог хоокинга, ЈаваСцрипт функција ће бити додата само када ВордПресс обради страницу која задовољава ис_паге() захтев. Осим што је ефикасан, ово зауставља бесмислено извршавање скрипте на безначајним сајтовима.
Коришћење кратких кодова је део друге стратегије. ВордПресс кратки кодови олакшавају додавање динамичког материјала на страницу или пост. адд_схортцоде() може се користити за креирање прилагођеног кратког кода, који ће вам омогућити да условно убаците скрипту у област садржаја по потреби. Ово вам пружа више опција ако желите да користите скрипту на одређеним одељцима уместо на целој страници веб локације или објаве. Поред тога, то је приступачнија опција за људе којима је непријатно да праве директне промене у ПХП датотекама.
Други метод је савршен за динамичко учитавање скрипти на страницама које имају специфичне параметре у УРЛ-у јер користи јКуери за тражење одређених образаца у УРЛ-овима. виндов.лоцатион.хреф и $.гетСцрипт() се користе у овом приступу да идентификују да ли је одређени стринг укључен у УРЛ и на одговарајући начин учитају ЈаваСцрипт датотеку. Овај приступ добро функционише у ситуацијама као што су сајтови за е-трговину или одредишне странице са јединственим кодовима за праћење где структура УРЛ-а захтева употребу скрипте. Све ове технике су модуларне, за вишекратну употребу и осигуравају да се скрипте учитавају само када је потребно, што побољшава корисничко искуство и перформансе.
Додавање ЈаваСцрипт-а на одређену ВордПресс страницу помоћу условних ознака
Овај приступ учитава ЈаваСцрипт датотеку само на изабрану страницу коришћењем ПХП-ових уграђених условних ознака у ВордПресс-у. Ова техника је веома оптимизована за ВордПресс.
// functions.php - Adding JavaScript to a specific WordPress pagefunction load_custom_js_on_specific_page() {// Check if we are on a specific page by page IDif (is_page(42)) { // Replace 42 with the specific page ID// Enqueue the external JavaScript filewp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);}}// Hook the function to wp_enqueue_scriptsadd_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');
Покретање ЈаваСцрипт-а на одређеној ВордПресс страници помоћу кратких кодова
Овај метод вам даје слободу у погледу тога где се скрипта користи условним додавањем ЈаваСцрипт-а на одређену страницу помоћу ВордПресс кратких кодова.
// functions.php - Using shortcodes to add JavaScript to a specific pagefunction add_js_via_shortcode() {// Return the script tag to be added via shortcodereturn '<script src="https://example.com/code.js" type="text/javascript"></script>';}// Register the shortcode [custom_js]add_shortcode('custom_js', 'add_js_via_shortcode');// Now, use [custom_js] in the page editor where the script should run
Учитавање ЈаваСцрипт-а на основу параметара УРЛ-а помоћу јКуери-ја
Ова техника условно учитава ЈаваСцрипт и користи јКуери да идентификује одређени УРЛ образац. За странице са динамичким циљањем, идеалан је.
<script type="text/javascript">jQuery(document).ready(function($) {// Check if the URL contains a specific query string or slugif (window.location.href.indexOf('specific-page-slug') > -1) {// Dynamically load the JavaScript file$.getScript('https://example.com/code.js');}});</script>
Додавање ЈаваСцрипт-а на одређене странице помоћу датотека шаблона
Додавањем ЈаваСцрипт-а директно у датотеку шаблона ВордПресс странице, овај метод омогућава да се скрипта учитава само на тој одређеној страници.
// Inside page-specific template file (e.g., page-custom.php)<?php get_header(); ?><!-- Page Content --><script src="https://example.com/code.js" type="text/javascript"></script><?php get_footer(); ?>
Оптимизација ЈаваСцрипт учитавања на ВордПресс страницама
Где се скрипта учитава је кључна пажња када користите ЈаваСцрипт на одређеним ВордПресс страницама. ВордПресс подразумевано дозвољава учитавање скрипти на страници фоотер или заглавље. Из разлога перформанси, обично се препоручује учитавање скрипте у подножје, посебно када се користе спољни ресурси. Ово је тако да корисници могу да уживају у бржем учитавању странице одлагањем извршавања ЈаваСцрипт-а док се страница не заврши учитавањем.
Можете променити вп_енкуеуе_сцрипт() метод за учитавање скрипте у подножје преношењем истина као крајњи параметар. На тај начин можете бити сигурни да се скрипта учитава пре последње ознаке тела и остатка садржаја странице. Пошто мање кључне скрипте касне, а важнијим ресурсима се даје приоритет, ова техника помаже да се скрати очигледно време учитавања. Иако ова оптимизација можда неће изгледати много за почетнике, она има велики утицај на брзину и функционалност ВордПресс сајта.
Уклањање кеша и контрола верзија су још два кључна елемента. ВордПресс пружа једноставан метод за коришћење вп_енкуеуе_сцрипт() функција за додавање броја верзије скриптама. Можете да се уверите да корисници не добију застарео ЈаваСцрипт из свог кеша додавањем аргумента верзије. Ово осигурава да се најновија верзија скрипте стално учитава, што је од велике помоћи приликом развоја или надоградње скрипте. Ова процедура смањује могућност сукоба скрипти и побољшава функционалност веб странице.
Уобичајена питања о додавању ЈаваСцрипт-а на ВордПресс странице
- Како могу да се уверим да се скрипта отвара само на одређеној страници?
- Да бисте условно учитали скрипту на основу ИД-а странице или заглавља, користите is_page() функција у functions.php фајл ваше теме.
- Који је најбољи начин да додате ЈаваСцрипт у ВордПресс?
- За додавање ЈаваСцрипт-а у ВордПресс, wp_enqueue_script() функција је препоручена техника. Гарантује одговарајуће управљање зависностима и обраду скрипта.
- Могу ли да учитам ЈаваСцрипт у подножје?
- Да, да бисте учитали скрипту у подножје ради бољег учинка, прођите true као пети аргумент од wp_enqueue_script().
- Како да се носим са уклањањем кеша за ЈаваСцрипт датотеке?
- Да бисте се уверили да је најновија верзија учитана, додајте број верзије у УРЛ скрипте користећи опцију за подешавање верзија у wp_enqueue_script().
- Могу ли да користим кратки код за додавање ЈаваСцрипт-а?
- Да, можете користити add_shortcode() да направите кратки код који ће вам омогућити да додате ЈаваСцрипт у одређене области странице или поста.
Завршна размишљања о оптимизацији ЈаваСцрипт-а за ВордПресс странице
Ваш ЈаваСцрипт код ће се боље извршавати и побољшати корисничко искуство на вашој веб локацији ако је циљано на одређену страницу. Ваша скрипта ће се учитавати само тамо где је то потребно коришћењем функција као што су ис_паге() и вп_енкуеуе_сцрипт(), што ће убрзати време учитавања за друге области ваше веб странице.
Ако сте нови у ВордПресс-у и желите да ефикасно управљате скриптама без познавања много кода, ово су најбоље методе за вас. Подсетимо се да ограничавањем обима извршавања кода, правилна примена ЈаваСцрипт-а на одређеним страницама побољшава безбедност поред ефикасности.
Референце и извори за ЈаваСцрипт на ВордПресс страницама
- Детаљи о томе како ставити скрипте у ред у ВордПресс-у наведени су из званичне ВордПресс документације. Сазнајте више на Референца за програмере ВордПресс-а .
- Информације о коришћењу условних ознака за циљање одређених страница потичу из ВордПресс кодекса. Погледајте званични водич на ВордПресс условне ознаке .
- Додатне најбоље праксе за учитавање ЈаваСцрипт-а у подножје су добијене из овог чланка: Савети за ЈаваСцрипт оптимизацију за Смасхинг Магазине .