Hur man lägger endast till JavaScript på en specifik WordPress-sida

Implementera JavaScript på en riktad WordPress-sida

WordPress är en lättanvänd plattform som gör webbplatshantering och anpassning enkel. Vissa ändringar kan dock vara utmanande att implementera, inklusive att köra JavaScript på en viss sida. Det är möjligt att ett skript som du har lagt till i din webbplatss avsnitt "Head" nu finns på varje sida. Detta är en typisk förstagångssvårighet.

Att förstå hur man tillämpar en JavaScript-fil villkorligt är avgörande när man använder den för att rikta in sig på en specifik sida. JavaScript kan få oväntade konsekvenser och försämra hastigheten på din webbplats om den används hela tiden. Detta är anledningen till att det är avgörande att begränsa skriptet till den nödvändiga sidan.

Vi går igenom processen för att ändra din WordPress-konfiguration i den här artikeln så att JavaScript bara startar på de sidor du behöver. Svaret är förståeligt för icke-utvecklare också; den här guiden är avsedd för dig som precis har börjat.

Du bör känna dig bekväm med att hantera sidspecifika skript i WordPress när du är klar med den här lektionen. Vi guidar dig genom den exakta koden och proceduren som krävs för att se till att din JavaScript bara körs där den ska, vilket förbättrar prestandan på din webbplats.

Förstå JavaScripts roll på specifika WordPress-sidor

Sättet att placera skriptet direkt i avsnittet "Head" kan göra att det laddas på varje sida när du behöver köra en JavaScript fil på en specifik WordPress-sida. När det gäller användarupplevelse och prestanda är detta inte idealiskt. De föregående alternativen ger ett mer effektivt sätt att hantera skript genom att begränsa skriptet till endast den angivna sidan. Vi kan till exempel använda WordPress is_page() metod för att avgöra om användaren ser en viss sida baserat på dess ID eller slug. Detta är den huvudsakliga tekniken som används för att se till att JavaScript-filen bara laddas när det behövs.

Den första metoden använder sig av villkorliga taggar i functions.php fil tillsammans med wp_enqueue_script(). Denna teknik använder sig av en grundläggande WordPress-funktion som lägger till skript på ett sätt som säkerställer korrekt beroendehantering och laddar skriptet i rätt område på sidan. Genom wp_enqueue_scripts action hooking kommer JavaScript-funktionen endast att läggas till när WordPress bearbetar en sida som uppfyller is_page() krav. Förutom att det är effektivt stoppar detta meningslös skriptkörning på obetydliga webbplatser.

Att använda kortkoder är en del av den andra strategin. WordPress-kortkoder gör det enkelt att lägga till dynamiskt material på en sida eller ett inlägg. add_shortcode() kan användas för att skapa en anpassad kortkod, som gör att du kan infoga skriptet villkorligt i innehållsområdet efter behov. Detta ger dig fler alternativ om du vill använda skriptet på särskilda avsnitt snarare än hela sidan på en webbplats eller ett inlägg. Dessutom är det ett mer lättillgängligt alternativ för personer som är obekväma med att göra direkta ändringar i PHP-filer.

En annan metod är perfekt för att dynamiskt ladda skript på sidor som har specifika parametrar i URL:en eftersom den använder jQuery för att leta efter särskilda mönster i URL:er. window.location.href och $.getScript() används i detta tillvägagångssätt för att identifiera om en viss sträng ingår i URL:en och ladda JavaScript-filen på lämpligt sätt. Detta tillvägagångssätt fungerar bra för situationer som e-handelswebbplatser eller målsidor med unika spårningskoder där URL-strukturen kräver användning av ett skript. Dessa tekniker är alla modulära, återanvändbara och ser till att skript bara laddas när det behövs, vilket förbättrar användarupplevelsen och prestanda.

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

Optimera JavaScript-laddning på WordPress-sidor

Var skriptet laddas är en avgörande faktor när du använder JavaScript på vissa WordPress-sidor. WordPress tillåter som standard att skript laddas på sidan sidfot eller rubrik. Av prestandaskäl rekommenderas vanligtvis att ladda skriptet i sidfoten, särskilt när du använder externa resurser. Detta för att användare ska kunna njuta av snabbare sidladdningar genom att skjuta upp JavaScript-körningen tills sidan har laddats färdigt.

Du kan ändra wp_enqueue_script() metod för att ladda ett skript i sidfoten genom att skicka sann som den sista parametern. Genom att göra detta kan du se till att skriptet laddas före den sista body-taggen och resten av sidans innehåll. Eftersom mindre viktiga skript försenas och mer avgörande resurser prioriteras, hjälper denna teknik till att förkorta den uppenbara laddningstiden. Även om denna optimering kanske inte verkar vara mycket för nybörjare, har den en stor inverkan på en WordPress-webbplats hastighet och funktionalitet.

Cachebusting och versionskontroll är två andra avgörande element. WordPress erbjuder en enkel metod att använda wp_enqueue_script() funktion för att lägga till ett versionsnummer till skript. Du kan se till att användare inte hämtar inaktuell JavaScript från sin cache genom att lägga till ett versionsargument. Detta säkerställer att den senaste versionen av skriptet ständigt laddas, vilket är oerhört användbart när du utvecklar eller uppgraderar ett skript. Denna procedur minskar risken för skriptkrockar och förbättrar webbplatsens funktionalitet.