Kuidas lisada JavaScripti ainult konkreetsele WordPressi lehele

JavaScripti rakendamine sihitud WordPressi lehel

WordPress on lihtsalt kasutatav platvorm, mis muudab veebisaitide haldamise ja kohandamise lihtsaks. Mõne muudatuse rakendamine võib aga olla keeruline, sealhulgas JavaScripti käivitamine konkreetsel lehel. Võimalik, et skript, mille lisasite oma veebisaidi jaotisesse „Head”, on nüüd igal lehel olemas. See on tüüpiline esmakordne raskus.

JavaScripti faili tingimusliku rakendamise mõistmine on selle kasutamisel konkreetse lehe sihtimiseks ülioluline. JavaScriptil võivad olla ootamatud tagajärjed ja see võib teie veebisaidi kiirust halvendada, kui seda kasutatakse kogu ulatuses. See on põhjus, miks on ülioluline piirata skript vajaliku leheküljega.

Selles artiklis juhendame teid WordPressi konfiguratsiooni muutmise protsessis, nii et JavaScript käivitub ainult vajalikel lehtedel. Vastus on arusaadav ka mittearendajatele; see juhend on mõeldud neile, kes alles alustavad.

Selle õppetunni lõpetamise ajaks peaksite tundma end mugavalt WordPressis lehepõhiste skriptide käsitlemisel. Juhendame teid läbi täpse koodi ja protseduuri, mis on vajalik tagamaks, et teie JavaScript käivitub ainult seal, kus see peaks parandama teie veebisaidi toimivust.

JavaScripti rolli mõistmine konkreetsetel WordPressi lehtedel

Skripti otse jaotisesse "Pea" asetamine võib põhjustada selle laadimise igal lehel, kui peate käivitama JavaScript faili konkreetsel WordPressi lehel. Kasutuskogemuse ja jõudluse seisukohalt pole see ideaalne. Eelnevad suvandid annavad tõhusama viisi skriptide käsitlemiseks, piirates skripti ainult määratud leheküljega. Näiteks saame kasutada WordPressi is_page() meetod, et teha kindlaks, kas kasutaja näeb teatud lehte selle ID või nälkja põhjal. See on peamine tehnika, mida kasutatakse JavaScripti faili laadimise tagamiseks ainult vajaduse korral.

Esimene meetod kasutab tingimusmärgendeid funktsioonid.php faili koos wp_enqueue_script(). See tehnika kasutab WordPressi põhifunktsiooni, mis lisab skripte viisil, mis tagab korraliku sõltuvushalduse ja laadib skripti lehe sobivasse piirkonda. Läbi wp_enqueue_scripts action hooking, lisatakse JavaScripti funktsioon ainult siis, kui WordPress töötleb lehte, mis vastab nõuetele is_page() nõue. Lisaks sellele, et see on tõhus, peatab see mõttetu skriptide täitmise tähtsusetutel saitidel.

Lühikoodide kasutamine on osa teisest strateegiast. WordPressi lühikoodid muudavad dünaamilise materjali lehele või postitusele lisamise lihtsaks. add_shortcode() saab kasutada kohandatud lühikoodi loomiseks, mis võimaldab vajadusel skripti tingimuslikult sisualasse sisestada. See annab teile rohkem valikuid, kui soovite kasutada skripti konkreetsetes jaotistes, mitte veebisaidi või postituse täisleheküljel. Lisaks on see juurdepääsetavam valik inimestele, kellel on ebamugav PHP-failides otsemuudatusi teha.

Teine meetod sobib suurepäraselt skriptide dünaamiliseks laadimiseks lehtedel, mille URL-is on konkreetsed parameetrid, kuna see kasutab jQueryt, et otsida URL-idest teatud mustreid. window.location.href ja $.getScript() kasutatakse selles lähenemisviisis, et teha kindlaks, kas konkreetne string on URL-is kaasatud, ja laadida JavaScripti fail õigesti. See lähenemisviis toimib hästi sellistes olukordades nagu e-kaubanduse saidid või unikaalsete jälgimiskoodidega sihtlehed, kus URL-i struktuur nõuab skripti kasutamist. Need tehnikad on kõik modulaarsed, korduvkasutatavad ja tagavad, et skriptid laaditakse ainult vajaduse korral, mis parandab kasutajakogemust ja jõudlust.

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

JavaScripti laadimise optimeerimine WordPressi lehtedel

Skripti laadimise koht on JavaScripti kasutamisel teatud WordPressi lehtedel ülioluline. WordPress lubab vaikimisi skripte lehele laadida jalus või päis. Jõudluse huvides on tavaliselt soovitatav laadida skript jalusesse, eriti kui kasutate väliseid ressursse. See on mõeldud selleks, et kasutajad saaksid nautida lehe kiiremat laadimist, lükates JavaScripti täitmise edasi kuni lehe laadimise lõpuni.

Saate muuta wp_enqueue_script() meetod skripti laadimiseks jalusesse läbimise teel tõsi viimase parameetrina. Seda tehes saate veenduda, et skript laaditakse enne viimast kehamärgendit ja ülejäänud lehe sisu. Kuna vähem olulised skriptid viibivad ja olulisemad ressursid on eelistatud, aitab see tehnika näilist laadimisaega lühendada. Kuigi see optimeerimine ei pruugi algajatele tunduda kuigi suur, on sellel suur mõju WordPressi saidi kiirusele ja funktsionaalsusele.

Vahemälu lõhkumine ja versioonikontroll on veel kaks olulist elementi. WordPress pakub lihtsat meetodit selle kasutamiseks wp_enqueue_script() funktsioon skriptidele versiooninumbri lisamiseks. Versiooniargumendi lisamisega saate tagada, et kasutajad ei saaks oma vahemälust aegunud JavaScripti. See tagab skripti uusima versiooni pideva laadimise, mis on skripti arendamisel või täiendamisel väga kasulik. See protseduur vähendab skriptide kokkupõrgete võimalust ja suurendab veebisaidi funktsionaalsust.