Zusätzliche CSS Dateien

TonyMacarony

Hallo Leute,

kann mir bitte jemand verraten, wie ich zusätzliche CSS-Dateien am "saubersten" in mein Theme integrieren kann?

Es gibt ja die Möglichkeit im Head-Bereich mit

Code

[COLOR=#808000]<[/COLOR][COLOR=#0A0A0A]link[/COLOR][COLOR=#A1A100]rel[/COLOR][COLOR=#0A0A0A]=[/COLOR][COLOR=#800080]"stylesheet"[/COLOR][COLOR=#A1A100]href[/COLOR][COLOR=#0A0A0A]=[/COLOR][COLOR=#800080]"stylesheet.css"[/COLOR][COLOR=#808000]>[/COLOR]

Geht das evtl. auch anders? Die style.css ist ja anscheinend auch anders eingebunden oder?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

danielgoehr

Die bevorzugte Variante ist wp_enqueue_style:

https://developer.wordpress.org/reference/func…_enqueue_style/

Ein Copy/Paste Beispiel findest du unten unter "User Contributed Notes", gleich der erste Beitrag.

TonyMacarony

Du meinst so?

PHP

function wpdocs_theme_name_scripts() {    wp_enqueue_style( 'style-name', get_stylesheet_uri() );    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/css/stylesheet.css', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Wenn ja, wo genau muss ich das einfügen?

danielgoehr

Bei deinem Code ist die Formatierung etwas komisch. Aber funktionieren wird der wahrscheinlich.

Aber hier nochmal konkret:

Code

[COLOR=#404040][FONT=Monaco]function wpdocs_theme_name_scripts() {[/FONT][/COLOR]
[COLOR=#404040][FONT=Monaco]    wp_enqueue_style( 'mein_style', get_template_directory_uri() . '/mein_style.css' );[/FONT][/COLOR]
[COLOR=#404040][FONT=Monaco]}[/FONT][/COLOR]
[COLOR=#404040][FONT=Monaco]add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );[/FONT][/COLOR]

Dieser Code gehört in die functions.php vom Theme. "mein_style" muss du gegen den Namen deines Scripts austauschen.

TonyMacarony

Funktioniert irgendwie nicht. Kann ich den Code auch in der functions.php meines Child-Themes benutzen?

danielgoehr

Kannst du. Dann musst du aber [COLOR=#404040][FONT=Monaco]get_template_directory_uri() gegen g[/FONT][/COLOR]et_stylesheet_directory() austauschen.

Wenn es nicht funktioniert, wird es aber auch in deinem Child Theme nicht funktionieren.
Liegt denn deine CSS Datei, die du einbinden willst auch im Hauptverzeichnis deines (Haupt-)Themes? Wenn nicht, musst du noch den Pfad anpassen.

Wenn du die angepasste Variante für das Child Theme verwendest, gehört natürlich auch deine CSS Datei entsprechend ins Hauptverzeichnis des Child-Themes.

Edit: CSS Datei, nicht Script. Habs korrigiert

TonyMacarony

Funktioniert immer noch nicht. So sieht das jetzt bei mir aus:

PHP

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'header', get_stylesheet_directory() . '/header.css' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

...und ja, die Datei liegt im Hauptverzeichnis des Child-Themes.

danielgoehr

Hm, sieht eigentlich alles richtig aus. Schau mal in den Entwicklertools, ob er gar nicht erst versucht, die Datei einzubinden oder ob er sie an der falschen Stelle sucht.

Edit: Im Zweifelsfall (falls du es nicht hinbekommst) verlink die CSS Datei einfach direkt im Header. Nicht so elegant, aber finde ich auch durchaus legitim.
Das hat eigentlich nicht viele Nachteile. wp_enqueue_style hat halt den Vorteil, dass andere Plugins und Wordpress selbst das Verhalten beeinflussen können. Aber im Grunde kannst du die Datei auch direkt einbinden.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zusätzliche CSS Dateien

Jetzt mitmachen!