Kā pievienot JavaScript tikai noteiktai WordPress lapai

JavaScript ieviešana mērķtiecīgā WordPress lapā

WordPress ir ērti lietojama platforma, kas padara vietņu pārvaldību un pielāgošanu vienkāršu. Tomēr dažu izmaiņu ieviešana var būt sarežģīta, tostarp JavaScript izpilde konkrētā lapā. Iespējams, ka skripts, ko pievienojāt savas vietnes sadaļai “Head”, tagad ir katrā lapā. Tā ir tipiska pirmreizēja grūtība.

Izpratne par JavaScript faila nosacītu lietošanu ir ļoti svarīga, ja to izmantojat, lai atlasītu konkrētu lapu. JavaScript var radīt neparedzētas sekas un samazināt jūsu vietnes ātrumu, ja tas tiek izmantots visā pasaulē. Šī iemesla dēļ ir svarīgi ierobežot skriptu līdz vajadzīgajai lapai.

Šajā rakstā mēs jums pastāstīsim, kā mainīt WordPress konfigurāciju, lai JavaScript tiktu palaists tikai jums nepieciešamajās lapās. Atbilde ir saprotama arī ne-izstrādātājiem; šī rokasgrāmata ir paredzēta tiem, kas tikai sāk darbu.

Pabeidzot šo nodarbību, jums vajadzētu justies ērti, strādājot ar lapām raksturīgiem skriptiem pakalpojumā WordPress. Mēs palīdzēsim jums veikt precīzu kodu un procedūru, kas nepieciešama, lai pārliecinātos, ka jūsu JavaScript tiek izpildīts tikai tur, kur tai vajadzētu, tādējādi uzlabojot jūsu vietnes veiktspēju.

Komanda	Lietošanas piemērs
is_page()	Funkcija, kas pazīstama kā pārbauda, ​​vai pašreizējā WordPress lapa atbilst noteiktajam lapas ID, nosaukumam vai slug. Lai garantētu, ka skripti tiek ielādēti tikai noteiktā lapā, šī funkcija ir būtiska. Piemēram, if (is_page(42)) {... }
wp_enqueue_script()	WordPress izmanto JavaScript failu ielādes metode. Tas garantē, ka skripti tiek ielādēti vietnes galvenē vai kājenē un ir pareizi iekļauti to atkarībā. Piemērs tam ir wp_enqueue_script('custom-js', 'https://example.com/code.js').
add_action()	Lai pielāgotas funkcijas piesaistītu iepriekš definētiem WordPress notikumiem, piemēram, ielādes skriptiem, izmantojiet metodi. Tas ļauj dinamiski ievietot skriptus, kad nepieciešams. 'wp_enqueue_scripts', 'load_custom_js_on_specific_page' ir divi pievienošanas darbību piemēri.');
add_shortcode()	WordPress ļauj reģistrēt jaunu īskodu, izmantojot funkciju. Tādējādi varat pievienot dinamisku materiālu, piemēram, JavaScript, tieši ziņu redaktorā. Piemērs ir Add_shortcode('custom_js', 'add_js_via_shortcode').
$.getScript()	Kad lapa ir ielādēta, varat izmantot jQuery metodi lai dinamiski ielādētu ārēju JavaScript failu. Nosacītās loģikas izmantošana skriptu ielādei, pamatojoties uz URL vai citiem kritērijiem, ir vērtīgs lietojums. $.getScript('https://example.com/code.js'), piemēram
window.location.href	The 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') > rekvizīts atgriež pilnu pašreizējās lapas URL. To var izmantot, lai pārbaudītu konkrētus URL modeļus, padarot to noderīgu, lai nosacīti ielādētu JavaScript noteiktās lapās. Piemērs: if (window.location.href.indexOf('specific-page-slug') > -1) { ... }
get_header()	Galvenes veidnes failu ielādē WordPress, izmantojot funkciju. Pirms JavaScript koda pievienošanas tas tiek izmantots pielāgotajās lapu veidnēs, lai pārliecinātos, ka struktūra ir pareiza. Piemēram,
get_footer()	WordPress kājenes veidni ielādē funkcija, kas nodrošina, ka JavaScript tiek ielādēts, pirms tas tiek atbilstoši ievietots lapas izvadē. Piemēram,

Izpratne par JavaScript lomu noteiktās WordPress lapās

Veids, kā skriptu ievietot tieši sadaļā “Head” var izraisīt tā ielādi katrā lapā, kad nepieciešams palaist failu noteiktā WordPress lapā. Lietotāja pieredzes un veiktspējas ziņā tas nav ideāli. Iepriekšējās opcijas nodrošina efektīvāku veidu, kā rīkoties ar skriptiem, ierobežojot skriptu tikai norādītajā lapā. Piemēram, mēs varam izmantot WordPress metode, lai noteiktu, vai lietotājs redz noteiktu lapu, pamatojoties uz tās ID vai sliedēm. Šī ir galvenā metode, ko izmanto, lai pārliecinātos, ka JavaScript fails tiek ielādēts tikai nepieciešamības gadījumā.

Pirmajā metodē tiek izmantoti nosacījuma tagi failu kopā ar . Šajā paņēmienā tiek izmantota WordPress pamata funkcija, kas pievieno skriptus tādā veidā, kas nodrošina pareizu atkarības pārvaldību, un ielādē skriptu attiecīgajā lapas apgabalā. Caur darbības piesaiste, JavaScript funkcija tiks pievienota tikai tad, kad WordPress apstrādās lapu, kas atbilst prasībām ir_lapa() prasība. Papildus tam, ka tas ir efektīvs, tas aptur bezjēdzīgu skriptu izpildi nenozīmīgās vietnēs.

Īskodu izmantošana ir daļa no otrās stratēģijas. WordPress īskodi atvieglo dinamiska materiāla pievienošanu lapai vai ziņai. var izmantot, lai izveidotu pielāgotu īskodu, kas ļaus jums nosacīti ievietot skriptu satura apgabalā pēc vajadzības. Tas nodrošina vairāk iespēju, ja vēlaties izmantot skriptu noteiktās sadaļās, nevis visā vietnes vai ziņas lapā. Turklāt tā ir pieejamāka iespēja cilvēkiem, kuriem ir neērti veikt tiešas izmaiņas PHP failos.

Cita metode ir lieliski piemērota, lai dinamiski ielādētu skriptus lapās, kuru vietrādī URL ir noteikti parametri, jo tā izmanto jQuery, lai meklētu konkrētus šablonus URL. un tiek izmantoti šajā pieejā, lai noteiktu, vai vietrādī URL ir iekļauta konkrēta virkne, un atbilstoši ielādētu JavaScript failu. Šī pieeja labi darbojas tādās situācijās kā e-komercijas vietnes vai galvenās lapas ar unikāliem izsekošanas kodiem, kur URL struktūrai ir nepieciešams skripts. Visas šīs metodes ir modulāras, atkārtoti lietojamas, un tās nodrošina, ka skripti tiek ielādēti tikai tad, kad tie ir nepieciešami, tādējādi uzlabojot lietotāja pieredzi un veiktspēju.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<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 slug
    if (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(); //

JavaScript ielādes optimizēšana WordPress lapās

Skripta ielādes vieta ir izšķirošs apsvērums, lietojot JavaScript noteiktās WordPress lapās. WordPress pēc noklusējuma ļauj ielādēt skriptus lapā vai . Veiktspējas apsvērumu dēļ parasti ir ieteicams ielādēt skriptu kājenē, īpaši, ja tiek izmantoti ārējie resursi. Tas ir paredzēts, lai lietotāji varētu baudīt ātrāku lapu ielādi, atliekot JavaScript izpildi, līdz lapas ielāde ir pabeigta.

Jūs varat mainīt metode, lai ielādētu skriptu kājenē, nododot garām kā pēdējais parametrs. To darot, varat pārliecināties, ka skripts tiek ielādēts pirms pēdējā pamatteksta taga un pārējā lapas satura. Tā kā mazāk svarīgi skripti tiek aizkavēti un svarīgākiem resursiem tiek piešķirta prioritāte, šī metode palīdz saīsināt šķietamo ielādes laiku. Lai gan iesācējiem šī optimizācija var šķist nenozīmīga, tai ir liela ietekme uz WordPress vietnes ātrumu un funkcionalitāti.

Kešatmiņas izslēgšana un versiju kontrole ir divi citi būtiski elementi. WordPress nodrošina vienkāršu metodi, kā izmantot funkcija, lai skriptiem pievienotu versijas numuru. Varat nodrošināt, ka lietotāji no savas kešatmiņas neiegūst novecojušu JavaScript, pievienojot versijas argumentu. Tas nodrošina, ka tiek pastāvīgi ielādēta jaunākā skripta versija, kas ir ļoti noderīgi, izstrādājot vai jauninot skriptu. Šī procedūra samazina skriptu sadursmju iespējamību un uzlabo vietnes funkcionalitāti.

1. Kā es varu pārliecināties, ka skripts tiek atvērts tikai noteiktā lapā?
2. Lai nosacīti ielādētu skriptu, pamatojoties uz lapas ID vai sliedi, izmantojiet funkcija motīva failu.
3. Kāds ir labākais veids, kā WordPress pievienot JavaScript?
4. Lai WordPress pievienotu JavaScript, funkcija ir ieteicamā tehnika. Tas garantē atbilstošu atkarību pārvaldību un skriptu apstrādi.
5. Vai es varu ielādēt JavaScript kājenē?
6. Jā, lai skriptu ielādētu kājenē, lai nodrošinātu labāku veiktspēju, nokārtojiet kā piektais arguments .
7. Kā rīkoties ar JavaScript failu kešatmiņas izņemšanu?
8. Lai pārliecinātos, ka ir ielādēta jaunākā versija, pievienojiet versijas numuru skripta vietrādim URL, izmantojot versiju noteikšanas opciju sadaļā .
9. Vai es varu izmantot īskodu, lai pievienotu JavaScript?
10. Jā, jūs varat izmantot lai izveidotu īskodu, kas ļaus jums pievienot JavaScript noteiktiem lapas vai ziņas apgabaliem.

Jūsu JavaScript kods darbosies labāk un uzlabos lietotāja pieredzi jūsu vietnē, ja tas ir mērķēts uz noteiktu lapu. Jūsu skripts tiks ielādēts tikai tur, kur tas ir nepieciešams, izmantojot tādas funkcijas kā un , kas paātrinās citu vietnes apgabalu ielādes laiku.

Ja esat iesācējs WordPress un vēlaties efektīvi pārvaldīt skriptus, nezinot daudz koda, šīs ir jums piemērotākās metodes. Atgādiniet, ka, ierobežojot koda izpildes apjomu, pareizi ieviešot JavaScript noteiktās lapās, papildus efektivitātei tiek uzlabota arī drošība.