So fügen Sie JavaScript nur zu einer bestimmten WordPress-Seite hinzu

Implementierung von JavaScript auf einer gezielten WordPress-Seite

WordPress ist eine benutzerfreundliche Plattform, die die Verwaltung und Anpassung von Websites vereinfacht. Allerdings kann die Implementierung einiger Änderungen eine Herausforderung darstellen, einschließlich der Ausführung von JavaScript auf einer bestimmten Seite. Möglicherweise ist ein Skript, das Sie dem Abschnitt „Kopf“ Ihrer Website hinzugefügt haben, jetzt auf jeder Seite vorhanden. Dies ist eine typische Schwierigkeit für Anfänger.

Es ist von entscheidender Bedeutung, zu verstehen, wie eine JavaScript-Datei bedingt angewendet wird, wenn Sie sie für die Ausrichtung auf eine bestimmte Seite verwenden möchten. JavaScript kann unerwartete Folgen haben und die Geschwindigkeit Ihrer Website beeinträchtigen, wenn es durchgehend verwendet wird. Aus diesem Grund ist es wichtig, das Skript auf die erforderliche Seite zu beschränken.

In diesem Artikel führen wir Sie durch den Prozess der Änderung Ihrer WordPress-Konfiguration, sodass JavaScript nur auf den Seiten gestartet wird, die Sie benötigen. Die Antwort ist auch für Nicht-Entwickler verständlich; Dieser Leitfaden richtet sich an diejenigen, die gerade erst anfangen.

Wenn Sie diese Lektion abgeschlossen haben, sollten Sie mit der Handhabung seitenspezifischer Skripte in WordPress vertraut sein. Wir führen Sie durch den genauen Code und die Vorgehensweise, die erforderlich sind, um sicherzustellen, dass Ihr JavaScript nur dort ausgeführt wird, wo es soll, und so die Leistung Ihrer Website verbessert.

Verstehen der Rolle von JavaScript auf bestimmten WordPress-Seiten

Die Art und Weise, das Skript direkt in den Abschnitt „Kopf“ einzufügen, kann dazu führen, dass es auf jeder Seite geladen wird, wenn Sie ein ausführen müssen JavaScript Datei auf einer bestimmten WordPress-Seite. In Bezug auf Benutzererfahrung und Leistung ist dies nicht ideal. Die oben genannten Optionen bieten eine effektivere Möglichkeit, Skripte zu verarbeiten, indem sie das Skript auf nur die angegebene Seite beschränken. Wir können zum Beispiel WordPress nutzen is_page() Methode, um anhand ihrer ID oder ihres Slugs zu bestimmen, ob der Benutzer eine bestimmte Seite sieht. Dies ist die Haupttechnik, die verwendet wird, um sicherzustellen, dass die JavaScript-Datei nur bei Bedarf geladen wird.

Die erste Methode nutzt bedingte Tags im Funktionen.php Datei zusammen mit wp_enqueue_script(). Diese Technik nutzt eine grundlegende WordPress-Funktion, die Skripte so hinzufügt, dass ein ordnungsgemäßes Abhängigkeitsmanagement gewährleistet ist, und das Skript in den entsprechenden Bereich der Seite lädt. Durch die wp_enqueue_scripts Beim Action-Hooking wird die JavaScript-Funktion nur hinzugefügt, wenn WordPress eine Seite verarbeitet, die die Anforderungen erfüllt is_page() Erfordernis. Dies ist nicht nur effektiv, sondern verhindert auch die sinnlose Ausführung von Skripten auf unbedeutenden Websites.

Die Verwendung von Shortcodes ist Teil der zweiten Strategie. WordPress-Shortcodes machen es einfach, dynamisches Material zu einer Seite oder einem Beitrag hinzuzufügen. add_shortcode() kann verwendet werden, um einen benutzerdefinierten Shortcode zu erstellen, der es Ihnen ermöglicht, das Skript nach Bedarf bedingt in den Inhaltsbereich einzufügen. Dies bietet Ihnen mehr Optionen, wenn Sie das Skript für bestimmte Abschnitte statt für die gesamte Seite einer Website oder eines Beitrags verwenden möchten. Darüber hinaus ist es eine zugänglichere Option für Leute, denen es unangenehm ist, direkte Änderungen an PHP-Dateien vorzunehmen.

Eine andere Methode eignet sich perfekt zum dynamischen Laden von Skripten auf Seiten, die bestimmte Parameter in der URL enthalten, da sie jQuery verwendet, um nach bestimmten Mustern in URLs zu suchen. window.location.href Und $.getScript() werden bei diesem Ansatz verwendet, um zu erkennen, ob eine bestimmte Zeichenfolge in der URL enthalten ist, und um die JavaScript-Datei entsprechend zu laden. Dieser Ansatz eignet sich gut für Situationen wie E-Commerce-Websites oder Zielseiten mit eindeutigen Tracking-Codes, bei denen die URL-Struktur die Verwendung eines Skripts erfordert. Diese Techniken sind alle modular und wiederverwendbar und stellen sicher, dass Skripte nur bei Bedarf geladen werden, was die Benutzererfahrung und Leistung verbessert.

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

Optimieren des Ladens von JavaScript auf WordPress-Seiten

Bei der Verwendung von JavaScript auf bestimmten WordPress-Seiten ist der Ort, an dem das Skript geladen wird, ein entscheidender Faktor. WordPress erlaubt standardmäßig das Laden von Skripten in die Seiten Fußzeile oder Kopfzeile. Aus Performancegründen empfiehlt sich in der Regel das Laden des Skripts im Footer, insbesondere bei der Nutzung externer Ressourcen. Dadurch können Benutzer von schnelleren Seitenladevorgängen profitieren, indem sie die JavaScript-Ausführung verschieben, bis die Seite vollständig geladen ist.

Sie können das ändern wp_enqueue_script() Methode zum Laden eines Skripts in der Fußzeile durch Übergabe WAHR als letzter Parameter. Dadurch können Sie sicherstellen, dass das Skript vor dem letzten Body-Tag und dem Rest des Seiteninhalts geladen wird. Da weniger wichtige Skripte verzögert werden und wichtigere Ressourcen Vorrang erhalten, trägt diese Technik dazu bei, die scheinbare Ladezeit zu verkürzen. Obwohl diese Optimierung für Anfänger vielleicht nicht viel zu sein scheint, hat sie große Auswirkungen auf die Geschwindigkeit und Funktionalität einer WordPress-Site.

Cache-Busting und Versionskontrolle sind zwei weitere entscheidende Elemente. WordPress bietet eine einfache Methode zur Verwendung wp_enqueue_script() Funktion zum Hinzufügen einer Versionsnummer zu Skripten. Sie können sicherstellen, dass Benutzer kein veraltetes JavaScript aus ihrem Cache erhalten, indem Sie ein Versionsargument hinzufügen. Dadurch wird sichergestellt, dass ständig die neueste Version des Skripts geladen wird, was beim Entwickeln oder Aktualisieren eines Skripts äußerst hilfreich ist. Dieses Verfahren verringert die Möglichkeit von Skriptkonflikten und verbessert die Funktionalität der Website.