So fügen Sie JavaScripts und Styles ordnungsgemäß in WordPress hinzu

Möchten Sie lernen, wie Sie JavaScripts und CSS-Stylesheets ordnungsgemäß in WordPress hinzufügen? Viele Heimwerker begehen oft den Fehler, ihre Skripte und Stylesheets direkt in Plugins und Themes aufzurufen. In diesem Artikel zeigen wir Ihnen, wie Sie JavaScripts und Stylesheet ordnungsgemäß in WordPress hinzufügen. Dies ist besonders nützlich für diejenigen, die gerade erst anfangen, das WordPress-Theme und die Plugin-Entwicklung zu erlernen.

Häufiger Fehler beim Hinzufügen von Skripten und Stylesheets in WordPress

Viele neue WordPress-Plugins und Designentwickler begehen den Fehler, ihre Skripts oder Inline-CSS direkt in ihre Plugins und Designs einzufügen.

Einige benutzen fälschlicherweise die wp_head Funktion, um ihre Skripte und Stylesheets zu laden.

Der obige Code erscheint zwar einfacher, ist jedoch der falsche Weg, Skripts in WordPress hinzuzufügen, und führt in der Zukunft zu mehr Konflikten.

Wenn Sie beispielsweise jQuery manuell laden und ein anderes Plugin jQuery über die richtige Methode lädt, müssen Sie jQuery zweimal laden. 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 auch Konflikte verursachen können.

Sehen wir uns nun an, wie Sie Skripts und Stylesheets richtig hinzufügen.

Warum Enqueue-Skripte und -Stile in WordPress??

WordPress hat eine starke Entwicklergemeinschaft. Tausende von Menschen aus der ganzen Welt entwickeln Themes und Plugins für WordPress.

Um sicherzustellen, dass alles ordnungsgemäß funktioniert und niemand auf die Zehen eines anderen tritt, verfügt WordPress über ein Warteschlangensystem. Dieses System bietet eine programmierbare Methode zum Laden von JavaScripts und CSS-Stylesheets.

Mit den Funktionen wp_enqueue_script und wp_enqueue_style legen Sie WordPress fest, wann eine Datei geladen werden soll, wo sie geladen werden soll und welche Abhängigkeiten sie haben.

Dieses System ermöglicht es Entwicklern außerdem, die integrierten, mit WordPress mitgelieferten JavaScript-Bibliotheken zu verwenden, anstatt dasselbe Skript eines Drittanbieters mehrmals zu laden. Dies verringert die Ladezeit der Seite und hilft, Konflikte mit anderen Designs und Plugins zu vermeiden.

Wie man Skripte richtig in WordPress einreiht?

Das korrekte Laden von Skripten in WordPress ist sehr einfach. Nachfolgend finden Sie einen Beispielcode, den Sie in Ihre Plugins-Datei oder in die Datei functions.php Ihres Themas einfügen, um Skripts ordnungsgemäß in WordPress zu laden.

 ?PHP-Funktion 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 haben mit der Registrierung unseres Skripts über das Internet begonnen wp_register_script () Funktion. Diese Funktion akzeptiert 5 Parameter:

• $ handle - Handle ist der eindeutige Name Ihres Skripts. Unsere heißt "my_amazing_script"
• $ src - src ist der Ort Ihres Skripts. Wir verwenden die plugins_url-Funktion, um die richtige URL unseres Plugins-Ordners abzurufen. Sobald WordPress das gefunden hat, sucht es in diesem Ordner nach unserem Dateinamen amazing_script.js.
• $ deps - deps ist für die Abhängigkeit. Da unser Skript jQuery verwendet, haben wir im Abhängigkeitsbereich jQuery hinzugefügt. WordPress lädt jQuery automatisch, wenn es nicht bereits auf der Site geladen ist.
• $ ver - Dies ist die Versionsnummer unseres Skripts. Dieser Parameter ist nicht erforderlich.
• $ in_footer - Wir möchten unser Skript in die Fußzeile laden, deshalb haben wir den Wert auf true gesetzt. Wenn Sie das Skript in den Header laden möchten, machen Sie es falsch.

Nachdem Sie alle Parameter in angegeben haben wp_register_script, Wir können das Skript einfach aufrufen wp_enqueue_script () Das macht alles möglich.

Der letzte Schritt besteht darin, den Aktionshaken wp_enqueue_scripts zu verwenden, um das Skript tatsächlich zu laden. Da dies ein Beispielcode ist, haben wir das direkt unter alles andere eingefügt.

Wenn Sie dies Ihrem Design oder Plugin hinzufügen, können Sie diesen Aktions-Hook dort platzieren, wo das Skript tatsächlich erforderlich ist. Dadurch können Sie den Speicherbedarf Ihres Plugins reduzieren.

Einige fragen sich vielleicht, warum wir den zusätzlichen Schritt unternehmen, um das Skript zuerst zu registrieren und dann in die Warteschlange zu stellen? Nun, dies ermöglicht anderen Websitebesitzern die Abmeldung der Registrierung, ohne den Kerncode Ihres Plugins zu ändern.

Formatieren Sie Stile ordnungsgemäß in WordPress ein

Genau wie Skripte können Sie auch Ihre Stylesheets einreihen. Schauen Sie sich das Beispiel unten an:

Anstatt zu verwenden wp_enqueue_script, wir benutzen jetzt wp_enqueue_style um unser Stylesheet hinzuzufügen.

Beachten Sie, dass wir verwendet haben wp_enqueue_scripts Action-Hook für Styles und Scripts. Trotz des Namens funktioniert diese Funktion für beide.

In den obigen Beispielen haben wir verwendet plugins_url Funktion, um auf den Ort des Skripts oder Stils zu zeigen, den wir einreihen wollten.

Wenn Sie jedoch die Enqueue-Skriptfunktion in Ihrem Design verwenden, verwenden Sie einfach get_template_directory_uri () stattdessen. Wenn Sie mit einem untergeordneten Thema arbeiten, verwenden Sie get_stylesheet_directory_uri ().

Unten ist ein Beispielcode:

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie Jacvascript und Stile korrekt in WordPress einfügen. Sie können auch den Quellcode der wichtigsten WordPress-Plugins für einige Codebeispiele aus dem echten Leben untersuchen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.