Sådan tilføjer du kun JavaScript til en specifik WordPress-side

Implementering af JavaScript på en målrettet WordPress-side

WordPress er en brugervenlig platform, der gør administration og tilpasning af websteder enkel. Nogle ændringer kan dog være udfordrende at implementere, herunder at udføre JavaScript på en bestemt side. Det er muligt, at et script, du har tilføjet til dit websteds "Hoved"-sektion, nu er til stede på hver side. Dette er en typisk førstegangsvanskelighed.

At forstå, hvordan man anvender en JavaScript-fil betinget, er afgørende, når man bruger den til at målrette mod en bestemt side. JavaScript kan have uventede konsekvenser og forringe hastigheden på dit websted, hvis det bruges hele vejen igennem. Dette er grunden til, at det er afgørende at begrænse scriptet til den nødvendige side.

Vi vil lede dig gennem processen med at ændre din WordPress-konfiguration i denne artikel, så JavaScript kun starter på de sider, du har brug for. Svaret er også forståeligt for ikke-udviklere; denne guide er beregnet til dem, der lige er startet.

Du bør føle dig tryg ved at håndtere sidespecifikke scripts i WordPress, når du er færdig med denne lektion. Vi vil guide dig gennem den præcise kode og procedure, der kræves for at sikre, at din JavaScript kun udføres, hvor den skal, hvilket forbedrer dit websteds ydeevne.

Forståelse af JavaScripts rolle på specifikke WordPress-sider

Måden at sætte scriptet direkte ind i "Head"-sektionen kan medføre, at det indlæses på hver side, når du skal køre en JavaScript fil på en bestemt WordPress-side. Med hensyn til brugeroplevelse og ydeevne er dette ikke ideelt. De foregående muligheder giver en mere effektiv måde at håndtere scripts ved at begrænse scriptet til kun den angivne side. For eksempel kan vi bruge WordPress's er_side() metode til at bestemme, om brugeren ser en bestemt side baseret på dens ID eller slug. Dette er den vigtigste teknik, der bruges til at sikre, at JavaScript-filen kun indlæses, når det er nødvendigt.

Den første metode gør brug af betingede tags i funktioner.php fil sammen med wp_enqueue_script(). Denne teknik gør brug af en grundlæggende WordPress-funktion, der tilføjer scripts på en måde, der sikrer korrekt afhængighedsstyring og indlæser scriptet i det relevante område på siden. Gennem wp_enqueue_scripts action hooking, vil JavaScript-funktionen kun blive tilføjet, når WordPress behandler en side, der opfylder er_side() krav. Ud over at være effektivt, stopper dette meningsløs scriptudførelse på ubetydelige websteder.

Brug af shortcodes er en del af den anden strategi. WordPress-kortkoder gør det nemt at tilføje dynamisk materiale til en side eller et indlæg. add_shortcode() kan bruges til at oprette en brugerdefineret kortkode, som giver dig mulighed for betinget at indsætte scriptet i indholdsområdet efter behov. Dette giver dig flere muligheder, hvis du vil bruge scriptet på bestemte sektioner i stedet for hele siden på et websted eller et indlæg. Derudover er det en mere tilgængelig mulighed for folk, der er utilpas med at foretage direkte ændringer i PHP-filer.

En anden metode er perfekt til dynamisk at indlæse scripts på sider, der har specifikke parametre i URL'en, da den gør brug af jQuery til at lede efter bestemte mønstre i URL'er. window.location.href og $.getScript() bruges i denne tilgang til at identificere, om en bestemt streng er inkluderet i URL'en og indlæse JavaScript-filen korrekt. Denne tilgang fungerer godt i situationer som e-handelswebsteder eller landingssider med unikke sporingskoder, hvor URL-strukturen kræver brug af et script. Disse teknikker er alle modulære, genbrugelige og sørger for, at scripts kun indlæses, når det er nødvendigt, hvilket forbedrer brugeroplevelsen og ydeevnen.

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

Optimering af JavaScript-indlæsning på WordPress-sider

Hvor scriptet er indlæst, er en afgørende overvejelse, når du bruger JavaScript på bestemte WordPress-sider. WordPress tillader som standard scripts at indlæse på sidens sidefod eller overskrift. Af ydeevnemæssige årsager anbefales det normalt at indlæse scriptet i sidefoden, især når der bruges eksterne ressourcer. Dette er for at brugerne kan nyde hurtigere sideindlæsninger ved at udsætte JavaScript-udførelsen, indtil siden er færdig med at indlæse.

Du kan ændre wp_enqueue_script() metode til at indlæse et script i sidefoden ved at bestå ægte som sidste parameter. Ved at gøre dette kan du sikre dig, at scriptet indlæses før det sidste body-tag og resten af ​​sidens indhold. Fordi mindre afgørende scripts er forsinket, og flere afgørende ressourcer prioriteres, hjælper denne teknik med at forkorte den tilsyneladende indlæsningstid. Selvom denne optimering måske ikke virker af meget for nybegyndere, har den stor indflydelse på et WordPress-websteds hastighed og funktionalitet.

Cache-busting og versionskontrol er to andre afgørende elementer. WordPress giver en nem metode til at bruge wp_enqueue_script() funktion til at tilføje et versionsnummer til scripts. Du kan sikre dig, at brugere ikke får forældet JavaScript fra deres cache ved at tilføje et versionsargument. Dette sikrer, at den seneste version af scriptet konstant indlæses, hvilket er yderst nyttigt, når man udvikler eller opgraderer et script. Denne procedure mindsker muligheden for scriptsammenstød og forbedrer hjemmesidens funktionalitet.