CSS, JS nach dem body laden

(@ebody)

Hallo,

ich nutze das Theme Ocean WP und habe ein Child Theme erstellt. In der functions.php füge ich CSS Dateien hinzu

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-fonts', '/own-src/css/fonts.css' );
}

Diese werden im <head> geladen. Wie kann ich sie nach dem </body> laden?

Gruß
ebody

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 4 Monaten

Hallo,
schau mal bitte in die Code-Referenz, siehe Parameter $ in_footer
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 4 Monaten

Stylesheets solltest du (mit Ausnahme eines Print-Stylesheet) nicht in den Footer legen, weil die Darstellung sonst unter Umständen erst geändert wird, nachdem alle JavaScript-Funktionen ausgeführt wurden. Das sieht dann hässlich aus.
Thread-Starter ebody
(@ebody)

vor 3 Jahren, 4 Monaten
Hi,

schau mal bitte in die Code-Referenz, siehe Parameter $ in_footer

Danke für den Link. Wenn ich es richtig verstanden habe, kann man damit aber „nur“ JS Dateien positionieren oder?

Um die CSS Datei möglichst spät zu laden, habe ich bisher folgende Lösung gefunden:
```
   add_action('ocean_after_footer', 'loadCSSinFooter');
    function loadCSSinFooter() {
        wp_enqueue_style( 'loadfonts', '/own-src/css/fonts.css');
    }
```
ocean_after_footer ist ein sogenannter „Hook“ vom Template Oceanwp. Je nachdem, wo man die CSS Datei im DOM laden möchte, kann man sich hier hier orientieren.

Mit ocean_after_footer wird die CSS Datei nach dem #footer-bottom Element geladen. Wo das dann genau ist, kann man vorab im Quellcode sehen.

Ergänzend noch der Link für die Funktion <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/" rel="noopener" target="_blank">wp_enqueue_style()</a>

Stylesheets solltest du (mit Ausnahme eines Print-Stylesheet) nicht in den Footer legen, weil die Darstellung sonst unter Umständen erst geändert wird, nachdem alle JavaScript-Funktionen ausgeführt wurden. Das sieht dann hässlich aus.

Danke für den Hinweis. Habe ich beachtet und muss man halt jeweils abwägen, ob die CSS Datei direkt oder später geladen werden kann und somit die Seite schneller dargestellt werden kann.

Gruß
ebody
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 4 Monaten
Danke für den Link. Wenn ich es richtig verstanden habe, kann man damit aber „nur“ JS Dateien positionieren oder?

Eigentlich ist das für Stylesheets nicht vorgesehen, weil … siehe oben.
```
add_action('ocean_after_footer', 'loadCSSinFooter');
function loadCSSinFooter() {
  wp_enqueue_style( 'loadfonts', get_template_directory_uri() . '/own-src/css/fonts.css');
}
```
wäre OK, ist aber auch müßig wenn du ein Cache-Plugin verwendest, dass die Stylesheets konkateniert. ¯\_(ツ)_/¯

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)

Das Thema „CSS, JS nach dem body laden“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten