Möchten Sie lernen, wie Sie JavaScripts und CSS-Stylesheets in WordPress korrekt hinzufügen? Viele Heimwerker machen oft den Fehler, ihre Skripte und Stylesheets direkt in Plugins und Themes aufzurufen. In diesem Artikel zeigen wir Ihnen, wie Sie JavaScripts und Stylesheets in WordPress ordnungsgemäß hinzufügen. Dies ist besonders nützlich für diejenigen, die gerade erst anfangen, das WordPress-Theme und die Plugin-Entwicklung zu lernen.
Häufiger Fehler beim Hinzufügen von Skripten und Stylesheets in WordPress
Viele neue WordPress-Plugins und Theme-Entwickler machen den Fehler, ihre Skripte oder Inline-CSS direkt in ihre Plugins und Themes einzufügen.
Einige verwenden fälschlicherweise die Funktion wp_head, um ihre Skripte und Stylesheets zu laden.
Der obige Code scheint zwar einfacher zu sein, ist jedoch der falsche Weg, um Skripte in WordPress hinzuzufügen, und führt in Zukunft zu weiteren Konflikten.
Wenn Sie beispielsweise jQuery manuell laden und ein anderes Plugin jQuery über die entsprechende Methode lädt, wird jQuery zweimal geladen. Wenn es auf jeder Seite geladen wird, wirkt sich dies negativ auf die Geschwindigkeit und Leistung von WordPress aus.
Es ist auch möglich, dass es sich bei den beiden Versionen um unterschiedliche Versionen handelt, die ebenfalls Konflikte verursachen können.
Schauen wir uns vor diesem Hintergrund an, wie Sie Skripte und Stylesheets richtig hinzufügen können.
Warum Skripte und Stile in WordPress einfügen?
WordPress hat eine starke Entwicklergemeinschaft. Tausende Menschen auf der ganzen Welt entwickeln WordPress-Themes und Plugins.
Um sicherzustellen, dass alles richtig funktioniert und niemand aufeinander tritt, hat WordPress ein System in der Warteschlange. Dieses System bietet eine programmierbare Möglichkeit zum Laden von JavaScripts und CSS-Stylesheets.
Mit den Funktionen wp_enqueue_script und wp_enqueue_style wird WordPress mitgeteilt, wann eine Datei hochgeladen werden soll, wo sie hochgeladen werden soll und welche Abhängigkeiten sie hat.
Mit diesem System können Entwickler auch die integrierten JavaScript-Bibliotheken verwenden, die im Lieferumfang von WordPress enthalten sind, anstatt dasselbe Skript eines Drittanbieters mehrmals zu laden. Dies reduziert die Ladezeit der Seite und hilft, Konflikte mit anderen Themen und Plugins zu vermeiden.
Wie platziere ich Skripte korrekt in WordPress?
Das korrekte Laden von Skripten in WordPress ist sehr einfach. Unten finden Sie einen Beispielcode, den Sie in Ihre Plugins-Datei oder in die Datei functions.php Ihres Themas einfügen würden, um die Skripte erfolgreich in WordPress zu laden.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Erläuterung:
Wir beginnen mit der Registrierung unseres Skripts über die Funktion wp_register_script (). Diese Funktion akzeptiert 5 Parameter:
- $ handle – Handle ist der eindeutige Name Ihres Skripts. Unsere heißt “my_amazing_script”
- $ src – src ist der Speicherort Ihres Skripts. Wir verwenden die Funktion plugins_url, um die korrekte URL unseres Plugin-Ordners abzurufen. Sobald WordPress dies findet, durchsucht es unseren Dateinamen erstaunlich_script.js in diesem Ordner.
- $ deps – Deps ist nicht abhängig. Da unser Skript jQuery verwendet, haben wir jQuery im Abhängigkeitsbereich hinzugefügt. WordPress lädt jQuery automatisch, wenn es nicht bereits auf der Site geladen wird.
- $ sehen – Dies ist die Versionsnummer unseres Skripts. Dieser Parameter ist nicht obligatorisch.
- $ in_footer – Wir möchten unser Skript in die Fußzeile laden, daher haben wir den Wert auf true gesetzt. Wenn Sie das Skript in den Header laden möchten, würden Sie es falsch machen.
Nachdem wir alle Parameter in wp_register_script angegeben haben, können wir das Skript in wp_enqueue_script () aufrufen, das alles möglich macht.
Der letzte Schritt besteht darin, den Aktions-Hook wp_enqueue_scripts zu verwenden, um das Skript tatsächlich zu laden. Da dies ein Beispielcode ist, haben wir ihn direkt unter allem anderen hinzugefügt.
Wenn Sie dies zu Ihrem Thema oder Plugin hinzugefügt haben, können Sie diesen Aktions-Hook dort platzieren, wo das Skript tatsächlich benötigt wird. Auf diese Weise können Sie den Speicherbedarf Ihres Plugins reduzieren.
Nun fragen sich einige vielleicht, warum wir den zusätzlichen Schritt machen werden, zuerst das Skript zu registrieren und es dann wieder in die Warteschlange zu stellen? Auf diese Weise können andere Websitebesitzer die Registrierung ihres Skripts aufheben, ohne den Kerncode ihres Plugins zu ändern.
Warteschlangenstile in WordPress korrekt
Wie bei Skripten können Sie auch Ihre Stylesheets in die Warteschlange stellen. Schauen Sie sich das folgende Beispiel an:
Anstatt wp_enqueue_script zu verwenden, verwenden wir jetzt wp_enqueue_style, um unser Stylesheet hinzuzufügen.
Beachten Sie, dass wir den Aktions-Hook wp_enqueue_scripts für Stile und Skripte verwendet haben. Trotz des Namens funktioniert diese Funktion für Sie beide.
In den obigen Beispielen haben wir die Funktion plugins_url verwendet, um auf den Speicherort des Skripts oder den Stil zu verweisen, den wir in die Warteschlange stellen wollten.
Wenn Sie jedoch die Skriptfunktion in der Warteschlange in Ihrem Design verwenden, verwenden Sie stattdessen einfach get_template_directory_uri (). Wenn Sie mit einem untergeordneten Thema arbeiten, verwenden Sie get_stylesheet_directory_uri ().
Unten ist ein Beispielcode:
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Javascript und Stile in WordPress richtig hinzufügen. Sie können auch den Quellcode der wichtigsten WordPress-Plugins für einige echte Codebeispiele studieren.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
