🥇 ▷ So fügen Sie JavaScripts und Stile in WordPress korrekt hinzu ✅

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 richtig hinzufügen. Dies ist besonders nützlich für diejenigen, die gerade erst anfangen, das WordPress-Theme und die Plugin-Entwicklung zu lernen.

Fügen Sie JavaScripts und Stile korrekt in WordPress hinzu

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 zu ihren Plugins und Themes hinzuzufü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 die beiden Versionen unterschiedlich sind, was ebenfalls zu Konflikten führen kann.

Nachdem dies gesagt ist, werfen wir einen Blick auf die richtige Art und Weise, Skripte und Stylesheets hinzuzufügen.

Warum Skripte und Stile in WordPress einfügen?

WordPress hat eine starke Entwicklergemeinschaft. Tausende Menschen auf der ganzen Welt entwickeln Themen und Plugins für WordPress.

Um sicherzustellen, dass alles richtig funktioniert und niemand sich gegenseitig auf die Zehen tritt, verfügt WordPress über 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 teilen Sie WordPress mit, wann eine Datei hochgeladen werden soll, wo sie hochgeladen werden soll und welche Abhängigkeiten sie haben.

Mit diesem System können Entwickler auch die integrierten WordPress-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 die 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 ordnungsgemäß 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:

  • $ fahren – 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 richtige URL für unseren Plugins-Ordner zu erhalten. Sobald WordPress dies gefunden hat, sucht es in diesem Ordner nach unserem Dateinamen erstaunlich_script.js.
  • $ deps – Deps ist für die Abhängigkeit. 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 gehen, um zuerst das Skript zu registrieren und es dann erneut in die Warteschlange zu stellen. Auf diese Weise können andere Websitebesitzer die Registrierung Ihres Skripts aufheben, ohne den Plugin-Kerncode zu ändern.

Stile in WordPress korrekt einreihen

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 beide.

In den vorherigen Beispielen haben wir die Funktion plugins_url verwendet, um den Speicherort des Skripts oder Stils zu bestimmen, 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 ().

Hier ist ein Beispielcode:


Wir hoffen, dieser Artikel hat Ihnen geholfen, das korrekte Hinzufügen von Jacvascript und Stilen in WordPress zu lernen. Sie können auch den Quellcode der wichtigsten WordPress-Plugins für einige reale Codebeispiele studieren.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch auf Twitter und Facebook.

%d bloggers like this: