Implementering av JavaScript på en målrettet WordPress-side
WordPress er en brukervennlig plattform som gjør nettstedadministrasjon og tilpasning enkel. Noen endringer kan imidlertid være utfordrende å implementere, inkludert å kjøre JavaScript på en bestemt side. Det er mulig at et skript du har lagt til i "Hoved"-delen på nettstedet ditt nå er til stede på hver side. Dette er en typisk førstegangsvanskelighet.
Å forstå hvordan du bruker en JavaScript-fil betinget er avgjørende når du bruker den til å målrette mot en bestemt side. JavaScript kan få uventede konsekvenser og redusere hastigheten på nettstedet ditt hvis det brukes hele tiden. Dette er grunnen til at det er avgjørende å begrense skriptet til den nødvendige siden.
Vi vil lede deg gjennom prosessen med å endre WordPress-konfigurasjonen din i denne artikkelen slik at JavaScript bare starter på sidene du trenger. Svaret er forståelig for ikke-utviklere også; denne veiledningen er ment for de som nettopp har startet.
Du bør føle deg komfortabel med å håndtere sidespesifikke skript i WordPress når du er ferdig med denne leksjonen. Vi vil veilede deg gjennom den nøyaktige koden og prosedyren som kreves for å sikre at JavaScript bare kjøres der det skal, og forbedre ytelsen til nettstedet ditt.
| Kommando | Eksempel på bruk |
|---|---|
| is_page() | Funksjonen kjent som is_page() bekrefter om den gjeldende WordPress-siden tilsvarer en gitt side-ID, tittel eller slug. For å garantere at skript kun lastes inn på en bestemt side, er denne funksjonen viktig. For eksempel, hvis (er_side(42)) {... } |
| wp_enqueue_script() | WordPress bruker wp_enqueue_script() metode for å laste JavaScript-filer. Den garanterer at skript lastes inn i sidens hode eller bunntekst og er korrekt inkludert i deres avhengigheter. wp_enqueue_script('custom-js', 'https://example.com/code.js') er et eksempel på dette. |
| add_action() | For å koble egendefinerte funksjoner inn i forhåndsdefinerte WordPress-hendelser, for eksempel lasting av skript, bruk add_action() metode. Dette gjør det mulig å sette inn skript dynamisk ved behov. 'wp_enqueue_scripts', 'load_custom_js_on_specific_page' er to eksempler på tilleggshandlinger.'); |
| add_shortcode() | WordPress lar deg registrere en ny kortkode ved å bruke add_shortcode() funksjon. Dette lar deg legge til dynamisk materiale, som JavaScript, rett inn i postredigeringsprogrammet. Add_shortcode('custom_js', 'add_js_via_shortcode') er et eksempel. |
| $.getScript() | Når siden er lastet inn, kan du bruke jQuery-metoden $.getScript() for å dynamisk laste en ekstern JavaScript-fil. Å bruke betinget logikk på skriptinnlasting basert på URL eller andre kriterier er en verdifull bruk for det. $.getScript('https://example.com/code.js'), for eksempel |
| window.location.href | De window.location.href 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') > egenskap returnerer hele URL-en til gjeldende side. Den kan brukes til å se etter spesifikke URL-mønstre, noe som gjør den nyttig for betinget lasting av JavaScript på visse sider. Eksempel: if (window.location.href.indexOf('specific-page-slug') > -1) { ... } |
| get_header() | Overskriftsmalfilen lastes av WordPress ved hjelp av get_header() funksjon. Før JavaScript-koden legges til, brukes den i egendefinerte sidemaler for å sikre at strukturen er riktig. For eksempel |
| get_footer() | WordPress-bunntekstmalen lastes inn av get_footer() funksjon, som sørger for at JavaScript lastes inn før det settes inn på riktig måte i sideutdataene. For eksempel |
Forstå rollen til JavaScript på spesifikke WordPress-sider
Måten å sette skriptet direkte inn i "Head"-delen kan føre til at det lastes inn på hver side når du trenger å kjøre en JavaScript fil på en bestemt WordPress-side. Når det gjelder brukeropplevelse og ytelse, er ikke dette ideelt. De foregående alternativene gir en mer effektiv måte å håndtere skript på ved å begrense skriptet til kun den angitte siden. For eksempel kan vi bruke WordPress is_page() metode for å finne ut om brukeren ser en bestemt side basert på dens ID eller slug. Dette er hovedteknikken som brukes for å sikre at JavaScript-filen bare lastes inn når det er nødvendig.
Den første metoden bruker betingede tagger i funksjoner.php fil sammen med wp_enqueue_script(). Denne teknikken bruker en grunnleggende WordPress-funksjon som legger til skript på en måte som sikrer riktig avhengighetsstyring og laster skriptet i det aktuelle området på siden. Gjennom wp_enqueue_scripts handling hooking, vil JavaScript-funksjonen bare legges til når WordPress behandler en side som tilfredsstiller is_page() behov. I tillegg til å være effektivt, stopper dette meningsløs skriptkjøring på ubetydelige nettsteder.
Å bruke kortkoder er en del av den andre strategien. WordPress-kortkoder gjør det enkelt å legge til dynamisk materiale på en side eller et innlegg. add_shortcode() kan brukes til å lage en egendefinert kortkode, som lar deg betinget sette inn skriptet i innholdsområdet etter behov. Dette gir deg flere alternativer hvis du vil bruke skriptet på bestemte seksjoner i stedet for hele siden på et nettsted eller et innlegg. I tillegg er det et mer tilgjengelig alternativ for folk som er ukomfortable med å gjøre direkte endringer i PHP-filer.
En annen metode er perfekt for dynamisk lasting av skript på sider som har spesifikke parametere i URL-en siden den bruker jQuery for å se etter bestemte mønstre i URL-er. window.location.href og $.getScript() brukes i denne tilnærmingen for å identifisere om en bestemt streng er inkludert i URL-en og laste inn JavaScript-filen på riktig måte. Denne tilnærmingen fungerer godt for situasjoner som e-handelssider eller landingssider med unike sporingskoder der URL-strukturen krever bruk av et skript. Disse teknikkene er alle modulære, gjenbrukbare og sørger for at skript kun lastes når det er nødvendig, noe som forbedrer brukeropplevelsen og ytelsen.
Legge til JavaScript til en spesifikk WordPress-side ved å bruke betingede tagger
Denne tilnærmingen laster JavaScript-filen bare på en valgt side ved å bruke PHPs innebygde betingede tagger i WordPress. Denne teknikken er veldig WordPress-optimalisert.
// functions.php - Adding JavaScript to a specific WordPress pagefunction load_custom_js_on_specific_page() {// Check if we are on a specific page by page IDif (is_page(42)) { // Replace 42 with the specific page ID// Enqueue the external JavaScript filewp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);}}// Hook the function to wp_enqueue_scriptsadd_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');
Kjøre JavaScript på en spesifikk WordPress-side ved å bruke kortkoder
Denne metoden gir deg frihet over hvor skriptet brukes ved å betinget legge JavaScript til en bestemt side ved hjelp av WordPress-kortkoder.
// functions.php - Using shortcodes to add JavaScript to a specific pagefunction add_js_via_shortcode() {// Return the script tag to be added via shortcodereturn '<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
Laster JavaScript basert på URL-parametre ved å bruke jQuery
Denne teknikken laster JavaScript betinget og bruker jQuery for å identifisere et bestemt URL-mønster. For dynamisk målretting av sider er det ideelt.
<script type="text/javascript">jQuery(document).ready(function($) {// Check if the URL contains a specific query string or slugif (window.location.href.indexOf('specific-page-slug') > -1) {// Dynamically load the JavaScript file$.getScript('https://example.com/code.js');}});</script>
Legge til JavaScript på spesifikke sider ved hjelp av malfiler
Ved å legge JavaScript rett til en WordPress-sidemalfil, gjør denne metoden at skriptet kun lastes inn på den spesifikke siden.
// 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(); ?>
Optimalisering av JavaScript-lasting på WordPress-sider
Hvor skriptet er lastet inn er en avgjørende vurdering når du bruker JavaScript på bestemte WordPress-sider. WordPress tillater som standard skript å laste inn på siden bunntekst eller overskrift. Av ytelsesgrunner anbefales vanligvis å laste skriptet i bunnteksten, spesielt når du bruker eksterne ressurser. Dette er slik at brukere kan nyte raskere sideinnlastinger ved å utsette JavaScript-kjøring til siden er ferdig lastet.
Du kan endre wp_enqueue_script() metode for å laste et skript i bunnteksten ved å sende ekte som siste parameter. Ved å gjøre dette kan du sørge for at skriptet lastes inn før den siste body-taggen og resten av sideinnholdet. Fordi mindre viktige skript blir forsinket og flere viktige ressurser blir prioritert, bidrar denne teknikken til å forkorte den tilsynelatende lastetiden. Selv om denne optimaliseringen kanskje ikke virker som mye for nybegynnere, har den stor innvirkning på et WordPress-nettsteds hastighet og funksjonalitet.
Cache-busting og versjonskontroll er to andre viktige elementer. WordPress gir en enkel metode for å bruke wp_enqueue_script() funksjon for å legge til et versjonsnummer til skript. Du kan sørge for at brukere ikke henter utdatert JavaScript fra hurtigbufferen ved å legge til et versjonsargument. Dette sikrer at den nyeste versjonen av skriptet hele tiden lastes, noe som er svært nyttig når du utvikler eller oppgraderer et skript. Denne prosedyren reduserer muligheten for skriptsammenstøt og forbedrer funksjonaliteten til nettstedet.
Vanlige spørsmål om å legge til JavaScript på WordPress-sider
- Hvordan kan jeg sørge for at et skript bare åpnes på en bestemt side?
- For å betinget laste inn skriptet basert på side-ID eller slug, bruk is_page() funksjon i functions.php fil med temaet ditt.
- Hva er den beste måten å legge JavaScript til WordPress?
- For å legge til JavaScript til WordPress, wp_enqueue_script() funksjon er den anbefalte teknikken. Det garanterer hensiktsmessig styring av avhengigheter og skriptbehandling.
- Kan jeg laste JavaScript i bunnteksten?
- Ja, for å laste skriptet i bunnteksten for bedre ytelse, pass true som det femte argumentet til wp_enqueue_script().
- Hvordan håndterer jeg hurtigbuffer for JavaScript-filer?
- For å sikre at den nyeste versjonen er lastet, legg til et versjonsnummer i skriptets URL ved å bruke versjonsalternativet i wp_enqueue_script().
- Kan jeg bruke en kortkode for å legge til JavaScript?
- Ja, du kan bruke add_shortcode() å konstruere en kortkode som lar deg legge til JavaScript til bestemte områder på en side eller et innlegg.
Siste tanker om optimalisering av JavaScript for WordPress-sider
JavaScript-koden din vil fungere bedre og forbedre brukeropplevelsen på nettstedet ditt hvis den er målrettet mot en bestemt side. Skriptet ditt vil bare lastes der det er nødvendig ved å bruke funksjoner som is_page() og wp_enqueue_script(), som vil øke hastigheten på lastetidene for andre områder av nettstedet ditt.
Hvis du er ny på WordPress og ønsker å administrere skript effektivt uten å kunne mye kode, er dette de beste metodene for deg. Husk at ved å begrense omfanget av kodeutførelse, forbedrer riktig implementering av JavaScript på bestemte sider sikkerheten i tillegg til effektiviteten.
Referanser og kilder for JavaScript på WordPress-sider
- Detaljer om hvordan man legger skript i kø i WordPress ble referert fra den offisielle WordPress-dokumentasjonen. Lær mer på WordPress utviklerreferanse .
- Informasjonen om bruk av betingede tagger for å målrette mot bestemte sider ble hentet fra WordPress-kodeksen. Se den offisielle veiledningen på WordPress betingede tagger .
- Ytterligere beste fremgangsmåter for å laste JavaScript i bunnteksten ble hentet fra denne artikkelen: Smashing Magazine JavaScript-optimaliseringstips .