Jak přidat JavaScript pouze na konkrétní stránku WordPress

Implementace JavaScriptu na cílenou stránku WordPress

WordPress je snadno použitelná platforma, která usnadňuje správu a přizpůsobení webových stránek. Implementace některých změn však může být náročná, včetně spuštění JavaScriptu na konkrétní stránce. Je možné, že skript, který jste přidali do sekce „Hlava“ vašeho webu, je nyní přítomen na každé stránce. Toto je typická obtížnost pro začátečníky.

Pochopení toho, jak podmíněně aplikovat soubor JavaScript, je zásadní při jeho použití k cílení na konkrétní stránku. JavaScript může mít neočekávané následky a snížit rychlost vašeho webu, pokud je používán v celém rozsahu. To je důvod, proč je důležité omezit skript na nezbytnou stránku.

V tomto článku vás provedeme procesem změny konfigurace WordPress tak, aby se JavaScript spouštěl pouze na stránkách, které požadujete. Odpověď je pochopitelná i pro nevývojáře; tento průvodce je určen pro ty, kteří právě začínají.

Než tuto lekci dokončíte, měli byste se cítit pohodlně při práci se skripty pro konkrétní stránky ve WordPressu. Provedeme vás přesným kódem a postupem potřebným k zajištění toho, aby se váš JavaScript spouštěl pouze tam, kde by měl, čímž se zlepší výkon vašeho webu.

Pochopení role JavaScriptu na konkrétních stránkách WordPress

Způsob vložení skriptu přímo do sekce "Head" může způsobit, že se načte na každé stránce, když potřebujete spustit JavaScript soubor na konkrétní stránce WordPress. Z hlediska uživatelské zkušenosti a výkonu to není ideální. Předchozí možnosti poskytují efektivnější způsob zpracování skriptů omezením skriptu pouze na zadanou stránku. Můžeme například použít WordPress is_page() metoda k určení, zda uživatel vidí určitou stránku na základě jejího ID nebo slug. Toto je hlavní technika používaná k zajištění toho, aby se soubor JavaScript načítal pouze v případě potřeby.

První metoda využívá podmíněné značky v funkce.php soubor spolu s wp_enqueue_script(). Tato technika využívá základní funkci WordPress, která přidává skripty způsobem, který zajišťuje správnou správu závislostí a načte skript do příslušné oblasti stránky. Prostřednictvím wp_enqueue_scripts action hooking, funkce JavaScriptu bude přidána pouze tehdy, když WordPress zpracuje stránku, která splňuje is_page() požadavek. Kromě toho, že je to efektivní, zastaví to zbytečné spouštění skriptů na bezvýznamných webech.

Používání krátkých kódů je součástí druhé strategie. Krátké kódy WordPress usnadňují přidávání dynamického materiálu na stránku nebo příspěvek. add_shortcode() lze použít k vytvoření vlastního krátkého kódu, který vám umožní podmíněně vložit skript do oblasti obsahu podle potřeby. To vám poskytuje více možností, pokud chcete skript použít v konkrétních sekcích místo celé stránky webu nebo příspěvku. Navíc je to přístupnější možnost pro lidi, kterým je nepříjemné provádět přímé změny v souborech PHP.

Další metoda je ideální pro dynamické načítání skriptů na stránkách, které mají specifické parametry v adrese URL, protože využívá jQuery k hledání konkrétních vzorů v adresách URL. window.location.href a $.getScript() se v tomto přístupu používají k identifikaci, zda je v adrese URL zahrnut konkrétní řetězec, a ke správnému načtení souboru JavaScript. Tento přístup funguje dobře v situacích, jako jsou weby elektronického obchodu nebo vstupní stránky s jedinečnými měřicími kódy, kde struktura adresy URL vyžaduje použití skriptu. Všechny tyto techniky jsou modulární, opakovaně použitelné a zajišťují, že se skripty načítají pouze v případě potřeby, což zvyšuje uživatelský dojem a výkon.

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

Optimalizace načítání JavaScriptu na stránkách WordPress

Při používání JavaScriptu na konkrétních stránkách WordPress je zásadní zvážit, kde je skript načten. WordPress ve výchozím nastavení umožňuje načítání skriptů na stránce zápatí nebo záhlaví. Z důvodů výkonu se obvykle doporučuje načíst skript v zápatí, zejména při použití externích zdrojů. Uživatelé si tak mohou užít rychlejší načítání stránek odložením provádění JavaScriptu, dokud se stránka nedokončí.

Můžete změnit wp_enqueue_script() metoda pro načtení skriptu v zápatí předáním věrný jako konečný parametr. Tímto způsobem se můžete ujistit, že se skript načte před poslední značkou body a zbytkem obsahu stránky. Vzhledem k tomu, že méně důležité skripty jsou zpožděny a důležitější zdroje mají přednost, pomáhá tato technika zkrátit zdánlivou dobu načítání. I když se tato optimalizace nemusí zdát nováčkům příliš, má velký dopad na rychlost a funkčnost webu WordPress.

Vynechání mezipaměti a kontrola verzí jsou další dva zásadní prvky. WordPress poskytuje snadný způsob použití wp_enqueue_script() funkce pro přidání čísla verze do skriptů. Přidáním argumentu verze můžete zajistit, aby uživatelé nezískali z mezipaměti zastaralý JavaScript. To zajišťuje, že se neustále načítá nejnovější verze skriptu, což je velmi užitečné při vývoji nebo upgradu skriptu. Tento postup snižuje možnost kolize skriptů a zlepšuje funkčnost webu.