Support » Allgemeine Fragen » CSS, JS nach dem body laden

  • 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)
  • Hallo,
    schau mal bitte in die Code-Referenz, siehe Parameter $ in_footer
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    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-Ersteller ebody

    (@ebody)

    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)

    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.