Skripte und Stylesheets richtig im WordPress Front- und Backend einbinden

Im Internet gibt es unzählige Beiträge darüber wie man Skripte und Stylesheets richtig in WordPress einbindet. Doch häufig werden auch da die Skripte nicht richtig eingebunden oder es fehlen wichtige Information über diesen Vorgang. Deswegen schreibe ich diesen kleinen Beitrag darüber.

Um Styles und Skripte richtig einzubinden, müssen sie zuerst registriert werden. Dies passiert im Frontend über den Action Hook „wp_enqueue_scripts“ und im Backend über „admin_enqueue_scripts“. Möchte man das Login Formular anpassen, hakt man sich mit „login_enqueue_scripts“ ein. Alle Hooks garantieren das die Skripte an der richtigen Stelle eingereiht werden.

Wir haben nun zwei neue Funktionen definiert. „register_my_frontend_scripts“ registriert die Skripte und Stylesheets im Frontend. Die Funktion „register_my_backend_scripts“ registriert unsere Dateien für das Backend.

Skripte und Stylesheets registrieren

Um nun unsere Skripte zu registrieren, benutzt man die WordPress Funktion „wp_register_script“ bzw. „wp_register_style„. Diese benötigen mindestens zwei Parameter. Als ersten Parameter gibt man einen Namen für das Skript an. Dieser muss einmalig sein. Als zweiten Parameter benötigt man noch den Pfad zu dem Skript oder dem Stylesheet. In unserem Fall legen wir vier Dateien im Hauptverzeichnis unseres Plugins mit den Namen my_custom_frontend_style.css, my_custom_frontend_style.js, my_backend_style.css und my_backend_style.js. Ich denke die Dateinamen sprechen für sich. Je nachdem wo man die Dateien einbindet, ob Theme oder Plugin, muss der korrekte Pfad angegeben werden.  Hier der erweiterte Code:

Nun sind beide Dateien korrekt in WordPress registriert und können eingebunden werden.

Skripte und Styles einbinden

Um Stylesheets einzubinden benutzt man die Funktion „wp_enqueue_style“ und für Skripte benutzt man „wp_enqueue_script„. Dazu müssen wir den Code um beide Befehle erweitern. Der Code sind dann so aus:

Nun sind unsere Dateien korrekt in WordPress eingebunden und ihr könnt euer CSS und JavaScript hinzufügen.

Es ist nicht zwingend notwendig, die Skripte in WordPress zu registrieren, da die Funktion „wp_enqueue_script“ und „wp_enqueue_style“ diese Aufgabe mit übernimmt. Allerdings werden Stylesheets und Skripte die mit wp_register_script() registriert wurden, bevorzugt behandelt und es ist sichergestellt das sie nicht ein zweites mal eingebunden werden.

Ich hoffe ich konnte mit diesem Beitrag etwas Licht ins Dunkel bringen, wie man die Skripte richtig in WordPress registriert und einbindet. Solltet ihr noch fragen haben, hinterlässt doch einfach einen Kommentar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.