WordPress Inline-Javascript oder Inline-CSS einbinden
Inline-Javascript oder Inline-CSS, ist wie der Name schon sagt, ein Code-Snippet, welches direkt in ein HTML-Dokument geschrieben und geladen wird. In der Regel wird Javascript und CSS jedoch in eigene Dateien ausgelagert und ist daher kein direkter Bestandteil des HTML-Dokuments.
Wann benötigen wir Inline-basiertes CSS oder Javascript? Es gibt Anwendungsfälle in denen wir bestimmte Skripte oder Styles nur für eine einzige Seite oder für ein paar wenige Unterseiten benötigen. In diesem Fall sollte dieser Code nicht standardmäßig auf der gesamten WordPress Webseite geladen werden. Das würde dazu führen, dass die gesamte Dateigröße der Webseite und somit die Ladezeit negativ beeinflusst wird.
Wie kann ich Inline CSS und Javascript in WordPress einfügen?
Der richtige Weg um Inline CSS und Javascript einzufügen, ist die WordPress Funktionen wp_add_inline_style() und wp_add_inline_script() zu nutzen. Die folgenden Beispiele zeigen dir wie das zu machen ist.
Methode 1: Javascript mit Handle inline ausführen
In der ersten Methode benötigen wir eine zugewiesene Javascript-Datei die wir mit wp_enqueue_script() einbinden. Das Inline-Javascript fügen wir durch wp_add_inline_script() hinzu. Wichtig ist hierbei, dass wir den verknüpften Identifier „$handle“ zuweisen, damit WordPress weiß, zu welcher Javascript-Datei das Inline-Skript zugehörig ist:
Methode 2: Inline-Javascript ohne verknüpfte Datei einfügen
Wenn wir für unser Inline-JS jedoch keine verknüpfte Javascript-Datei benötigen, können wir über wp_register_script() ein sogenanntes „Dummy“ Skript hinzufügen, wodurch wir keine Javascript-Datei zuweisen müssen. Auch hier müssen wir dem wp_add_inline_script()den selben Identifier „$handle„, des „Dummy“ Skripts zuweisen um eine Verknüpfung herzustellen:
Methode 1: Inline CSS mit Handle ausführen
So ähnlich wie wir oben schon ein Inline-Skript hinzugefügt haben wird es auch für Inline-CSS in WordPress gehandhabt. Zunächst fügen wir mit wp_enqueue_style() eine CSS-Datei hinzu und verweisen mit wp_add_inline_style() auf den „$handle“ der verknüpften CSS-Datei. Denn so weiß WordPress zu welcher Datei der Inline-Style zugehörig ist:
Methode 2: Inline CSS ohne verknüpfte Datei einbinden
Wenn dem Inline-Style allerdings keine eigene CSS-Datei zugewiesen ist, gibt es eine weitere Möglichkeit, über wp_register_style(), Inline-CSS auch ohne Verknüpfung zu einer Datei einzufügen. In diesem Fall binden wir einen sogenannten „Dummy“ Style hinzu, welcher unabhängig von einer eigenen CSS-Datei funktioniert. Über wp_add_inline_style() verweisen wir auf „$handle“ des verknüpften „Dummy“ Styles:
Icons made by iconixar from www.flaticon.com
