Javascript richtig zu WordPress-Themes hinzufügen

Es gibt eine spezielle Möglichkeit, Ihrem WordPress-Theme Javascript hinzuzufügen, um Konflikte mit Plugins oder übergeordneten WordPress-Themes zu vermeiden. Das Problem ist, dass viele „Entwickler“ ihre Javascript-Dateien direkt in der Datei header.php oder footer.php aufrufen, was die falsche Vorgehensweise ist.


In diesem Handbuch werde ich Ihnen zeigen, wie Sie Ihre Javascript-Dateien mithilfe Ihrer Datei functions.php korrekt aufrufen, damit sie direkt in das Kopf- oder Fußzeilentag Ihrer Site geladen werden. Auf diese Weise funktionieren Ihre Skripte ordnungsgemäß, wenn Sie ein Design für die Verteilung entwickeln und Ihr Endbenutzer die Skripte über ein untergeordnetes Design ändern möchte oder wenn er Minifying / Caching oder andere Optimierungs-Plugins verwendet. 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, die niemals erforderlich sein sollten (wenn Sie mit einem gut codierten Thema arbeiten).

Falscher Weg, um Javascript zu WordPress-Themes hinzuzufügen

Das Aufrufen des Javascript in Ihrer header.php-Datei oder footer.php-Datei, wie unten gezeigt, ist NICHT der richtige Weg, und ich empfehle dringend, dagegen zu sprechen. Oft führt dies zu Konflikten mit anderen Plugins, und es ist niemals manuell, wenn Sie mit einem CMS arbeiten eine gute Idee.

Der richtige Weg, um Javascript zu WordPress-Themes hinzuzufügen

Das bessere Hinzufügen von Javascript zu Ihrem WordPress-Theme ist dies über die Datei functions.php mit wp_enqueue_script. Wenn Sie die Aktion wp_enqueue_scripts zum Laden Ihres Javascript verwenden, können Sie Probleme mit Ihrem Thema 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 Site. Wie Sie sehen, habe ich nur das $ -Handle eingefügt, aber Sie können auch Abhängigkeiten für Ihr Skript, die Versionsnummer und die Frage hinzufügen, ob es in die Kopf- oder Fußzeile geladen werden soll (Standard ist die Kopfzeile)..

Die Funktion wp_enqueue_script () kann technisch in jeder Theme- oder Plugin-Vorlagendatei verwendet werden. Wenn Sie jedoch globale Skripte laden, möchten Sie sie entweder in der function.php-Datei Ihres Themas oder in einer separaten Datei ablegen, die speziell zum Laden von Skripten in die Datei vorgesehen ist Seite? ˅. Wenn Sie jedoch nur ein Skript in eine bestimmte Vorlagendatei laden möchten (z. B. in Galerie-Posts), können Sie die Funktion direkt in der Vorlagendatei platzieren. Ich persönlich empfehle jedoch, alle Skripte an einem Ort zu belassen und zum Laden Bedingungen zu verwenden Skripte nach Bedarf.

Von WordPress gehostete Skripte

Eine coole Sache bei WordPress ist, dass es bereits eine Reihe von Skripten gibt, die von WordPress gehostet und registriert werden und die Sie für Ihre Themenentwicklung verwenden können. Zum Beispiel sollte jQuery, das in fast jedem Projekt verwendet wird, IMMER von WordPress geladen und niemals auf einer Website eines Drittanbieters wie Google gehostet werden. Bevor Sie Ihrem Projekt ein benutzerdefiniertes Skript hinzufügen, überprüfen Sie die Liste von 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 Hook

Zuvor haben wir die Funktion erwähnt, die zum Laden eines Skripts auf Ihrer Site erforderlich ist. Wenn Sie jedoch mit Nicht-Vorlagendateien wie der Datei functions.php arbeiten, sollten Sie diese Funktion in eine andere Funktion einfügen, die in die richtigen WordPress-Hooks eingebunden ist, damit Ihre Skripte erhalten registriert mit allen anderen von WordPress registrierten Skripten, Plugins von Drittanbietern und Ihrem übergeordneten Thema, wenn Sie ein untergeordnetes Thema verwenden.

WordPress verfügt über zwei verschiedene Aktions-Hooks, mit denen Sie Ihre Skripte aufrufen können.

  1. wp_enqueue_scripts – Aktion zum Laden von Skripten im Frontend
  2. admin_enqueue_scripts – Aktion zum Laden von Skripten im WP-Administrator

Hier ist ein Beispiel (das Ihrer Datei functions.php hinzugefügt wird), wie Sie eine Funktion erstellen und dann mit dem WordPress-Hook Ihre Skripte aufrufen.

/ **
* Ein Skript in die Warteschlange stellen
* /
Funktion 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');

Hinweis: Sehen Sie, wie wir die Funktion “get_template_directory_uri” verwenden, wenn Sie den Speicherort Ihres Skripts definieren? Diese Funktion erstellt eine URL zu Ihrem Themenordner. Wenn Sie mit einem untergeordneten Thema arbeiten, möchten Sie stattdessen “get_stylesheet_directory_uri” verwenden, damit es auf Ihr untergeordnetes Thema und nicht auf das übergeordnete Thema verweist.

Hinzufügen von Inline-Javascript-Code

Sie können Inline-Javascript problemlos über das Skript-Tag in eine beliebige Vorlagendatei einfügen. Es kann jedoch 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 Themencode handelt. Im Folgenden finden Sie ein Beispiel für das Hinzufügen von Inline-Skripten zu Ihrer Site:

Funktion myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert ("Hallo Welt");', 'after');
}}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Dazu fügen Sie Ihr Inline-Javascript nach dem zuvor registrierten Skript “Mein Skript” hinzu. Wenn Sie wp_add_inline_script verwenden, können Sie entweder vor oder nach einem bereits registrierten Skript nur Inline-Code hinzufügen. Wenn Sie also versuchen, den Code eines bestimmten Skripts zu ändern, stellen Sie sicher, dass er danach geladen wird, oder wenn Sie nur einen benutzerdefinierten Code hinzufügen müssen, den Sie einbinden können es in das jquery-Skript, das im Allgemeinen von den meisten WordPress-Themes geladen wird, und wenn nicht, können Sie das wp_enqueue_script verwenden, um die von WordPress gehostete Version von jQuery zu laden.

Mit dieser Methode können Benutzer Ihre Inline-Skripte einfach über ein untergeordnetes Thema oder ein Plugin-Add-On entfernen. Sie halten Ihr gesamtes benutzerdefiniertes Javascript übersichtlich und werden von WordPress analysiert, 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 mit den Hooks wp_head oder wp_footer in Ihren Header kopieren, wie im folgenden Beispiel:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map