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.

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 JavaScript 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 ir_lapa() 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 funkcijas.php failu kopā ar wp_enqueue_script(). Š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 wp_enqueue_scripts 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. add_shortcode() 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. window.location.href un $.getScript() 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ā kājene vai galvene. 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 wp_enqueue_script() metode, lai ielādētu skriptu kājenē, nododot garām taisnība 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 wp_enqueue_script() 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.