Es gibt eine spezielle Möglichkeit, Javascript zu Ihrem WordPress-Theme hinzuzufügen, um Konflikte mit Plugins oder übergeordneten WordPress-Themes zu vermeiden. Das Problem ist, dass viele „Entwickler“ ihre Javascript-Dateien direkt in der header.php- oder footer.php-Datei aufrufen, was der falsche Weg ist.
In dieser Anleitung zeige ich Ihnen, wie Sie Ihre Javascript-Dateien mithilfe Ihrer functions.php-Datei korrekt aufrufen, damit sie direkt in das Kopf- oder Fußzeilen-Tag Ihrer Website geladen werden. Auf diese Weise können Sie, wenn Sie ein Design für die Verteilung entwickeln und Ihr Endbenutzer die Skripte über ein untergeordnetes Design ändern möchte, oder wenn sie Minimierungs-/Caching- oder andere Optimierungs-Plugins verwenden, korrekt funktionieren. Und wenn Sie mit einem untergeordneten Thema arbeiten, werden Ihre Skripte auf die richtige Weise hinzugefügt, ohne die Dateien header.php oder footer.php in Ihr untergeordnetes Thema zu kopieren, was niemals erforderlich sein sollte (wenn Sie mit einem gut codierten Thema arbeiten).
Falscher Weg, um Javascript zu WordPress-Designs hinzuzufügen
Das Aufrufen von Javascript in Ihrer header.php-Datei oder footer.php-Datei, wie unten gezeigt, ist NICHT der richtige Weg und ich rate dringend davon ab, da es oft Konflikte mit anderen Plugins verursacht und Dinge manuell zu tun, wenn Sie mit einem CMS arbeiten, ist es nie eine gute Idee.
<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>
Der richtige Weg, um Javascript zu WordPress-Themes hinzuzufügen
Das Hinzufügen von Javascript zu Ihrem WordPress-Theme ist besser, wenn Sie dies über die Datei functions.php tun wp_enqueue_script. Die Verwendung der Aktion wp_enqueue_scripts zum Laden Ihres Javascripts hilft, Probleme mit Ihrem Design zu vermeiden.
Beispiel
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
Der obige Code lädt die Datei my-script.js auf Ihrer Website. Wie Sie sehen können, habe ich nur das $handle eingefügt, aber Sie können auch Abhängigkeiten für Ihr Skript, die Versionsnummer und ob es in der Kopf- oder Fußzeile geladen werden soll (Standard ist Kopfzeile) hinzufügen.
Die Funktion wp_enqueue_script() kann technisch gesehen in jedem Design oder jeder Plugin-Vorlagendatei verwendet werden, aber wenn Sie globale Skripte laden, sollten Sie sie entweder in der function.php-Datei Ihres Designs oder in einer separaten Datei platzieren, die speziell zum Laden von Skripten auf der Seite? ˅. Wenn Sie jedoch nur ein Skript in eine bestimmte Vorlagendatei laden möchten (z. B. in Galeriebeiträge), können Sie die Funktion direkt in der Vorlagendatei platzieren. Ich persönlich empfehle jedoch, alle Skripte an einem Ort zu speichern und Bedingungen zum Laden zu verwenden Skripte nach Bedarf.
Von WordPress gehostete Skripte
Eine coole Sache an WordPress ist, dass es bereits eine Reihe von Skripten gibt, die von gehostet und registriert werden, die Sie in Ihrer Themenentwicklung verwenden können. Zum Beispiel sollte jQuery, das in fast jedem Projekt verwendet wird, IMMER von WordPress geladen und niemals auf einer Website von Drittanbietern wie Google gehostet werden. Bevor Sie also Ihrem Projekt ein benutzerdefiniertes Skript hinzufügen, überprüfen Sie die Liste der registrierte Skripte um sicherzustellen, dass es nicht bereits in WordPress enthalten ist, und wenn ja, sollten Sie dieses laden, anstatt Ihr eigenes zu registrieren.
Verwenden des WordPress-Enqueue-Hooks
Zuvor haben wir die Funktion erwähnt, die zum Laden eines Skripts auf Ihrer Website erforderlich ist. Wenn Sie jedoch mit Nicht-Vorlagendateien wie Ihrer Datei functions.php arbeiten, sollten Sie diese Funktion in eine andere Funktion einfügen, die in die richtigen WordPress-Hooks eingebunden ist, damit Ihre Skripts erhalten registriert mit allen anderen von WordPress registrierten Skripten, Plugins von Drittanbietern und Ihrem übergeordneten Design, wenn Sie ein untergeordnetes Design verwenden.
WordPress hat zwei verschiedene Aktionshaken, die Sie zum Aufrufen Ihrer Skripte verwenden können.
- wp_enqueue_scripts – Aktion zum Laden von Skripten auf dem Front-End
- admin_enqueue_scripts – Aktion zum Laden von Skripten im WP-Admin
Hier ist ein Beispiel (das zu Ihrer Datei functions.php hinzugefügt würde), wie Sie eine Funktion erstellen und dann den WordPress-Hook verwenden, um Ihre Skripte aufzurufen.
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );
Notiz: Sehen Sie, wie wir die Funktion „get_template_directory_uri“ verwenden, wenn wir den Speicherort Ihres Skripts definieren? Diese Funktion erstellt eine URL zu Ihrem Themenordner. Wenn du mit einem Child-Theme arbeitest, solltest du stattdessen „get_stylesheet_directory_uri“ verwenden, damit es auf dein Child-Theme und nicht auf das Parent-Theme verweist.
Hinzufügen von Inline-JavaScript-Code
Während Sie Inline-Javascript einfach über das script-Tag in jede Vorlagendatei einfügen können, kann es eine gute Idee sein, auch WordPress-Hooks zum Hinzufügen Ihres Inline-Codes zu verwenden, insbesondere wenn es sich um ein Kern-Plugin oder einen Designcode handelt. Unten sehen Sie ein Beispiel für das Hinzufügen von Inline-Skripten zu Ihrer Website:
function myprefix_add_inline_script() {
wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );
Dadurch wird Ihr Inline-Javascript nach dem zuvor registrierten „my-script“-Skript hinzugefügt. Wenn Sie wp_add_inline_script verwenden, können Sie Inline-Code nur vor oder nach einem bereits registrierten Skript hinzufügen. Wenn Sie also versuchen, den Code eines bestimmten Skripts zu ändern, stellen Sie sicher, dass es danach geladen wird, oder wenn Sie nur benutzerdefinierten Code hinzufügen müssen, den Sie einhaken können es zum jquery-Skript, das im Allgemeinen von den meisten WordPress-Designs geladen wird, und wenn nicht, können Sie das wp_enqueue_script verwenden, um die von WordPress gehostete Version von jQuery zu laden.
Durch die Verwendung dieser Methode können Benutzer Ihre Inline-Skripte einfach über ein untergeordnetes Thema oder ein Plugin-Add-On entfernen, es hält alle Ihre benutzerdefinierten Javascripts ordentlich organisiert und wird von WordPress geparst, was sicherer sein kann. Und wenn Sie ein untergeordnetes Thema verwenden, können Sie Ihre Skripte über Ihre Datei functions.php laden, anstatt die Dateien header.php oder footer.php in Ihr untergeordnetes Thema zu kopieren.
Wenn Sie jedoch in einem untergeordneten Thema arbeiten, müssen Sie dies nicht tun. Sie können Ihren Code einfach in Ihren Header kopieren, indem Sie entweder die wp_head- oder die wp_footer-Hooks verwenden, wie im folgenden Beispiel:
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
$( document ).on( 'ready', function() {
// Your custom code here
} );
} ( jQuery ) );
</script>
<?php } );