JavaScriptin lisääminen vain tietylle WordPress-sivulle

JavaScriptin käyttöönotto kohdistetulla WordPress-sivulla

WordPress on helppokäyttöinen alusta, joka tekee verkkosivujen hallinnasta ja mukauttamisesta helppoa. Jotkut muutokset voivat kuitenkin olla haastavia toteuttaa, mukaan lukien JavaScriptin suorittaminen tietyllä sivulla. On mahdollista, että verkkosivustosi Head-osioon lisäämäsi skripti on nyt jokaisella sivulla. Tämä on tyypillinen ensikertalaisen vaikeus.

JavaScript-tiedoston ehdollisen käyttöönoton ymmärtäminen on erittäin tärkeää, kun sitä käytetään tietylle sivulle kohdistamiseen. JavaScriptillä voi olla odottamattomia seurauksia ja se voi heikentää verkkosivustosi nopeutta, jos sitä käytetään koko ajan. Tästä syystä on ratkaisevan tärkeää rajoittaa komentosarja tarvittavalle sivulle.

Tässä artikkelissa opastamme sinua WordPress-kokoonpanon muuttamisen läpi, jotta JavaScript käynnistyy vain tarvitsemillasi sivuilla. Vastaus on ymmärrettävä myös muille kuin kehittäjille; tämä opas on tarkoitettu niille, jotka ovat vasta aloittamassa.

Sinun pitäisi tuntea olosi mukavaksi sivukohtaisten skriptien käsittelyssä WordPressissä, kun lopetat tämän oppitunnin. Ohjaamme sinut tarkan koodin ja toimenpiteen läpi, jotta voit varmistaa, että JavaScript toimii vain siellä, missä sen pitäisi, mikä parantaa verkkosivustosi suorituskykyä.

Komento	Käyttöesimerkki
is_page()	Toiminto, joka tunnetaan nimellä tarkistaa, vastaako nykyinen WordPress-sivu tiettyä sivutunnusta, otsikkoa tai sivua. Tämä toiminto on välttämätön sen varmistamiseksi, että komentosarjat ladataan vain tietylle sivulle. Esimerkiksi jos (is_sivu(42)) {... }
wp_enqueue_script()	WordPress käyttää tapa ladata JavaScript-tiedostoja. Se takaa, että komentosarjat ladataan sivuston ylä- tai alatunnisteeseen ja sisällytetään oikein niiden riippuvuuksiin. wp_enqueue_script('custom-js', 'https://example.com/code.js') on esimerkki tästä.
add_action()	Voit liittää mukautettuja toimintoja ennalta määritettyihin WordPress-tapahtumiin, kuten latausskripteihin, käyttämällä menetelmä. Tämä mahdollistaa skriptien dynaamisen lisäämisen tarvittaessa. 'wp_enqueue_scripts', 'load_custom_js_on_specific_page' ovat kaksi esimerkkiä lisätoiminnoista.');
add_shortcode()	WordPress antaa sinun rekisteröidä uuden lyhytkoodin käyttämällä toiminto. Näin voit lisätä dynaamista materiaalia, kuten JavaScriptiä, suoraan tekstieditoriin. Add_shortcode('custom_js', 'add_js_via_shortcode') on esimerkki.
$.getScript()	Kun sivu on latautunut, voit käyttää jQuery-menetelmää ladataksesi dynaamisesti ulkoisen JavaScript-tiedoston. Ehdollisen logiikan soveltaminen komentosarjan lataamiseen URL-osoitteen tai muiden kriteerien perusteella on arvokasta käyttöä sille. $.getScript('https://example.com/code.js'), esimerkiksi
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') > ominaisuus palauttaa nykyisen sivun täydellisen URL-osoitteen. Sitä voidaan käyttää tiettyjen URL-osoitemallien tarkistamiseen, mikä tekee siitä hyödyllisen JavaScriptin ehdolliseen lataamiseen tietyille sivuille. Esimerkki: if (window.location.href.indexOf('specific-page-slug') > -1) { ... }
get_header()	WordPress lataa otsikkomallitiedoston käyttämällä toiminto. Ennen kuin lisäät JavaScript-koodin, sitä käytetään mukautetuissa sivumalleissa varmistamaan, että rakenne on oikea. Esimerkiksi,
get_footer()	WordPress-alatunnistemallin lataa -toiminto, joka varmistaa, että JavaScript ladataan ennen kuin se lisätään asianmukaisesti sivun tulosteeseen. Esimerkiksi,

JavaScriptin roolin ymmärtäminen tietyillä WordPress-sivuilla

Tapa laittaa komentosarja suoraan "Head"-osioon saattaa saada sen latautumaan jokaiselle sivulle, kun sinun on suoritettava tiedosto tietyllä WordPress-sivulla. Käyttökokemuksen ja suorituskyvyn kannalta tämä ei ole ihanteellinen. Edelliset vaihtoehdot tarjoavat tehokkaamman tavan käsitellä komentosarjoja rajoittamalla komentosarjan vain määritetylle sivulle. Voimme esimerkiksi hyödyntää WordPressiä menetelmä määrittää, näkeekö käyttäjä tietyn sivun sen tunnuksen tai etanan perusteella. Tämä on tärkein tekniikka, jolla varmistetaan, että JavaScript-tiedosto latautuu vain tarvittaessa.

Ensimmäinen menetelmä käyttää ehdollisia tunnisteita tiedosto yhdessä . Tämä tekniikka hyödyntää WordPressin perusominaisuutta, joka lisää komentosarjoja tavalla, joka varmistaa asianmukaisen riippuvuuden hallinnan ja lataa komentosarjan sivun oikealle alueelle. kautta action hooking, JavaScript-toiminto lisätään vain, kun WordPress käsittelee sivun, joka täyttää on_sivu() vaatimus. Tehokkuuden lisäksi tämä estää turhan komentosarjojen suorittamisen merkityksettömillä sivustoilla.

Lyhytkoodien käyttö on osa toista strategiaa. WordPressin lyhytkoodien avulla on helppoa lisätä dynaamista materiaalia sivulle tai viestiin. voidaan käyttää mukautetun lyhytkoodin luomiseen, jonka avulla voit lisätä komentosarjan ehdollisesti sisältöalueelle tarpeen mukaan. Tämä tarjoaa sinulle enemmän vaihtoehtoja, jos haluat käyttää komentosarjaa tietyissä osioissa verkkosivuston tai viestin koko sivun sijaan. Lisäksi se on helpommin lähestyttävä vaihtoehto ihmisille, jotka eivät halua tehdä suoria muutoksia PHP-tiedostoihin.

Toinen menetelmä sopii täydellisesti komentosarjojen lataamiseen dynaamisesti sivuilla, joilla on tietyt parametrit URL-osoitteessa, koska se käyttää jQueryä tiettyjen URL-osoitteiden mallien etsimiseen. ja käytetään tässä lähestymistavassa tunnistamaan, sisältyykö URL-osoitteeseen tietty merkkijono, ja lataamaan JavaScript-tiedosto asianmukaisesti. Tämä lähestymistapa toimii hyvin tilanteissa, kuten verkkokauppasivustoilla tai aloitussivuilla, joissa on yksilöllinen seurantakoodi ja joissa URL-osoite edellyttää komentosarjan käyttöä. Nämä tekniikat ovat kaikki modulaarisia, uudelleenkäytettäviä ja varmistavat, että komentosarjat latautuvat vain tarvittaessa, mikä parantaa käyttökokemusta ja suorituskykyä.

// 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-latauksen optimointi WordPress-sivuilla

Skriptin latauspaikka on ratkaiseva näkökohta käytettäessä JavaScriptiä tietyillä WordPress-sivuilla. WordPress sallii oletusarvoisesti skriptien lataamisen sivulle tai . Suorituskykysyistä skriptin lataaminen alatunnisteeseen on yleensä suositeltavaa, erityisesti käytettäessä ulkoisia resursseja. Tämä on tarkoitus, jotta käyttäjät voivat nauttia nopeammista sivujen latauksista lykkäämällä JavaScriptin suorittamista, kunnes sivu on latautunut.

Voit muuttaa tapa ladata komentosarja alatunnisteeseen ohittamalla viimeisenä parametrina. Näin voit varmistaa, että komentosarja latautuu ennen viimeistä body-tagia ja sivun muuta sisältöä. Koska vähemmän tärkeät skriptit viivästyvät ja tärkeämmät resurssit asetetaan etusijalle, tämä tekniikka auttaa lyhentämään näennäistä latausaikaa. Vaikka tämä optimointi ei ehkä näytä paljolta aloittelijoille, sillä on suuri vaikutus WordPress-sivuston nopeuteen ja toimivuuteen.

Välimuistin estäminen ja versionhallinta ovat kaksi muuta tärkeää elementtiä. WordPress tarjoaa helpon tavan käyttää toiminto lisätäksesi versionumeron skripteihin. Voit varmistaa, että käyttäjät eivät saa vanhentunutta JavaScriptiä välimuististaan ​​lisäämällä versioargumentin. Tämä varmistaa, että skriptin uusin versio ladataan jatkuvasti, mikä on erittäin hyödyllistä skriptiä kehitettäessä tai päivitettäessä. Tämä menettely vähentää skriptien yhteentörmäysten mahdollisuutta ja parantaa verkkosivuston toimivuutta.

1. Kuinka voin varmistaa, että komentosarja avautuu vain tietyllä sivulla?
2. Jos haluat ladata komentosarjan ehdollisesti sivutunnuksen tai slug:n perusteella, käytä toimintoa teemasi tiedosto.
3. Mikä on paras tapa lisätä JavaScriptiä WordPressiin?
4. Jos haluat lisätä JavaScriptin WordPressiin, toiminto on suositeltu tekniikka. Se takaa riippuvuuksien asianmukaisen hallinnan ja komentosarjan käsittelyn.
5. Voinko ladata JavaScriptiä alatunnisteeseen?
6. Kyllä, jos haluat ladata skriptin alatunnisteeseen suorituskyvyn parantamiseksi, hyväksy viidentenä argumenttina .
7. Kuinka käsittelen välimuistin katkaisua JavaScript-tiedostoille?
8. Varmista, että uusin versio ladataan lisäämällä versionumero skriptin URL-osoitteeseen käyttämällä versiointivaihtoehtoa .
9. Voinko lisätä JavaScriptin käyttämällä lyhytkoodia?
10. Kyllä, voit käyttää luodaksesi lyhytkoodin, jonka avulla voit lisätä JavaScriptin tietyille sivun tai viestin alueille.

JavaScript-koodisi toimii paremmin ja parantaa käyttökokemusta verkkosivustollasi, jos se on kohdistettu tietylle sivulle. Skriptisi latautuu vain silloin, kun sitä vaaditaan käyttämällä toimintoja, kuten ja , mikä nopeuttaa verkkosivustosi muiden osien latausaikoja.

Jos olet uusi WordPressin käyttäjä ja haluat hallita skriptejä tehokkaasti tuntematta paljon koodia, nämä ovat sinulle sopivimmat menetelmät. Muista, että rajoittamalla koodin suorittamisen laajuutta JavaScriptin oikea käyttöönotto tietyillä sivuilla parantaa turvallisuutta tehokkuuden lisäksi.