Kako dodati JavaScript samo na določeno stran WordPress

Implementacija JavaScripta na ciljni strani WordPress

WordPress je platforma, ki je enostavna za uporabo in omogoča preprosto upravljanje in prilagajanje spletnega mesta. Vendar pa je uvedba nekaterih sprememb lahko zahtevna, vključno z izvajanjem JavaScripta na določeni strani. Možno je, da je skript, ki ste ga dodali v razdelek »Glava« vašega spletnega mesta, zdaj prisoten na vsaki strani. To je tipična težava pri začetniku.

Razumevanje, kako pogojno uporabiti datoteko JavaScript, je ključnega pomena, ko jo uporabljate za ciljanje na določeno stran. JavaScript ima lahko nepričakovane posledice in zmanjša hitrost vašega spletnega mesta, če se uporablja ves čas. To je razlog, da je ključnega pomena, da skript omejite na potrebno stran.

V tem članku vas bomo vodili skozi postopek spreminjanja konfiguracije WordPressa, tako da se bo JavaScript zagnal samo na straneh, ki jih potrebujete. Odgovor je razumljiv tudi nerazvijalcem; ta vodnik je namenjen tistim, ki šele začenjajo.

Ko končate to lekcijo, bi se morali počutiti udobno pri rokovanju s skripti za posamezne strani v WordPressu. Vodili vas bomo skozi natančno kodo in postopek, ki je potreben za zagotovitev, da se vaš JavaScript izvaja samo tam, kjer bi se moral, ter tako izboljša učinkovitost vašega spletnega mesta.

Razumevanje vloge JavaScripta na določenih straneh WordPress

Način postavitve skripta neposredno v razdelek "Head" lahko povzroči, da se naloži na vsaki strani, ko morate zagnati JavaScript datoteko na določeni strani WordPress. Z vidika uporabniške izkušnje in zmogljivosti to ni idealno. Prejšnje možnosti nudijo učinkovitejši način za obravnavanje skriptov z omejitvijo skripta samo na določeno stran. Na primer, lahko uporabimo WordPress je_stran() metoda za ugotavljanje, ali uporabnik vidi določeno stran na podlagi njenega ID-ja ali polža. To je glavna tehnika, ki se uporablja za zagotovitev, da se datoteka JavaScript naloži le, ko je to potrebno.

Prva metoda uporablja pogojne oznake v functions.php datoteko skupaj z wp_enqueue_script(). Ta tehnika uporablja osnovno funkcijo WordPress, ki dodaja skripte na način, ki zagotavlja pravilno upravljanje odvisnosti in naloži skript v ustrezno področje strani. Skozi wp_enqueue_scripts dejanje hooking, bo funkcija JavaScript dodana le, ko WordPress obdela stran, ki izpolnjuje zahteve je_stran() zahteva. Poleg tega, da je učinkovito, to ustavi nesmiselno izvajanje skripta na nepomembnih mestih.

Uporaba kratkih kod je del druge strategije. Kratke kode WordPress olajšajo dodajanje dinamičnega gradiva na stran ali objavo. add_shortcode() lahko uporabite za ustvarjanje kratke kode po meri, ki vam bo omogočila pogojno vstavljanje skripta v področje vsebine, kot je potrebno. To vam nudi več možnosti, če želite skript uporabiti na določenih razdelkih in ne na celotni strani spletnega mesta ali objave. Poleg tega je to bolj dostopna možnost za ljudi, ki jim je neprijetno neposredno spreminjati datoteke PHP.

Druga metoda je popolna za dinamično nalaganje skriptov na straneh, ki imajo določene parametre v URL-ju, saj uporablja jQuery za iskanje določenih vzorcev v URL-jih. okno.lokacija.href in $.getScript() se uporabljajo pri tem pristopu za ugotavljanje, ali je določen niz vključen v URL, in ustrezno nalaganje datoteke JavaScript. Ta pristop dobro deluje v primerih, kot so spletna mesta e-trgovine ali ciljne strani z edinstvenimi kodami za sledenje, kjer struktura URL-ja zahteva uporabo skripta. Vse te tehnike so modularne, jih je mogoče ponovno uporabiti in zagotavljajo, da se skripti naložijo le, ko so potrebni, kar izboljša uporabniško izkušnjo in zmogljivost.

// 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(); ?>

Optimizacija nalaganja JavaScripta na strani WordPress

Kje je naložen skript, je ključnega pomena pri uporabi JavaScripta na določenih straneh WordPress. WordPress privzeto dovoljuje nalaganje skriptov na strani noga oz glava. Zaradi zmogljivosti se običajno priporoča nalaganje skripta v nogo, zlasti pri uporabi zunanjih virov. To je zato, da lahko uporabniki uživajo v hitrejšem nalaganju strani, tako da odložijo izvajanje JavaScripta, dokler se stran ne naloži.

Lahko spremenite wp_enqueue_script() metoda za nalaganje skripta v nogo s posredovanjem res kot končni parameter. S tem se lahko prepričate, da se skript naloži pred zadnjo oznako telesa in preostankom vsebine strani. Ker so manj pomembni skripti zakasnjeni in imajo pomembnejši viri prednost, ta tehnika pomaga skrajšati navidezni čas nalaganja. Čeprav se novincem ta optimizacija morda ne zdi pretirana, ima velik vpliv na hitrost in funkcionalnost spletnega mesta WordPress.

Prekinitev predpomnilnika in nadzor različic sta še dva ključna elementa. WordPress ponuja enostaven način za uporabo wp_enqueue_script() funkcijo za dodajanje številke različice skriptom. Z dodajanjem argumenta različice lahko zagotovite, da uporabniki iz predpomnilnika ne dobijo zastarelega JavaScripta. To zagotavlja, da se najnovejša različica skripta nenehno nalaga, kar je izjemno koristno pri razvoju ali nadgradnji skripta. Ta postopek zmanjša možnost navzkrižij skriptov in izboljša funkcionalnost spletne strani.