WordPress Skripte oder Styles (Javascript oder CSS) im Header oder Footer einbinden
Fast jeder Webmaster steht irgendwann vor der Aufgabe ein bestimmtes Script bzw. ein Javascript in WordPress einzufügen. Über den herkömmlichen Weg, innerhalb des Administrationsbereichs ist das jedoch nicht so einfach umsetzbar.
Dieser Artikel zeigt dir 2 einfache Lösungen, wie du in WordPress ein benutzerdefiniertes Script oder individuelle Styles in deine Webseite einfügen kannst. Und das ganz ohne die Installation eines zusätzlichen Plugins.
Wie kann ich ein Script oder Style in den WordPress Header einfügen?
Wenn wir ein benutzerdefiniertes Snippet in den WordPress Header einfügen wollen, wird der Inhalt innerhalb des <head> Bereichs der Webseite geladen. Dafür stehen uns 2 Möglichkeiten zur Auswahl.
Methode 1:
In der ersten Methode nutzen wir die WordPress-Action wp_head(?), um benutzerdefinierten Inhalt im Head-Bereich deiner Webseite zu laden. Innerhalb der Funktion fügen wir das Script oder individuelle Styles ein, welche so 1:1 ausgegeben werden:
Javascript einfügen
CSS einfügen
Methode 2:
Mit Hilfe von Methode 2, nutzen wir wp_add_inline_script() und wp_register_script() als Dummy-Handler für das Einfügen von Inline-Javascript. Für die Einbindung von benutzerdefinierten CSS, verwenden wir stattdessen wp_add_inline_style() und wp_register_style() für den Dummy-Handler.
Inline Javascript einbinden
Inline CSS einbinden
Wie lässt sich ein Script oder Style im WordPress Footer einbinden?
Wenn wir ein benutzerdefiniertes Javascript oder Stylesheets in den WordPress Footer einbinden möchten, wird der Inhalt vor dem beendeten </body> Tag deiner Webseite eingefügt.
Methode 1:
In der Methode 1 nutzen wir die WordPress-Action wp_footer(?) um benutzerdefiniertes Javascript oder CSS-Formatierungen im Footer von deines WordPress Themes einzufügen.
Javascript im Footer einfügen:
Styles im Footer einfügen:
Methode 2:
Die zweite Methode verwendet die WordPress-Funktion wp_add_inline_script(), welches durch den Dummy-Handler insert-inline-script mit wp_register_script() und dem Wert $in_footer = true, ein benutzerdefiniertes Inline-Javascript im Footer des Themes einfügt.
Inline JS im Footer einfügen:
Diese einfachen Methoden lassen sich unkompliziert dafür nutzen, benutzerdefiniertes Javascript oder individuelle Styles im WordPress Header oder Footer, ohne Plugin, einzufügen. Die oberen Code-Beispiele könntest du bspw. in die functions.php Datei deines Themes (Child Themes) einfügen.
Icons made by Smashicons from www.flaticon.com
