Support » Allgemeine Fragen » CSS Stylesheets in WordPress inline setzen funktioniert nicht

  • Gelöst sandra20

    (@sandra20)


    Hallo,
    ich möchte gerne die CSS Stylesheets inline setzen, weil pagespeed insights diese Methode vorschlägt und die Seite angeblich so schneller geladen werden kann. Für die Seite habe ich das Generatepress Theme genommen und ein Child Theme davon gemacht.

    Im Internet habe ich folgenden Befehl mit einer PHP Funktion gefunden, den ich in WordPress integrieren möchte: <link href="assets/css/minified.css.php" rel="stylesheet">

    Das ist die PHP Funktion bzw. die minified.css.php

    <?php
    header('Content-type: text/css');
    ob_start("compress");
    
        function compress( $minify )
        {
    	/* remove comments */
        	$minify = preg_replace( '!/*[^*]**+([^/][^*]**+)*/!', '', $minify );
    
            /* remove tabs, spaces, newlines, etc. */
        	$minify = str_replace( array("rn", "r", "n", "t", '  ', '    ', '    '), '', $minify );
    
            return $minify;
        }
    
        /* css files for combining */
        include('reset.css');
        include('application.css');
        include('responsive.css');
    
    ob_end_flush();

    Nur leider funktioniert das Ganze nicht. Ich habe den Befehl noch weiter mit WordPress gegoogelt und habe das gefunden: <link rel="stylesheet" type="text/css" href="<?php echo URL;?>
    Ist der Befehl dann richtig so: <link rel="stylesheet" type="text/css" href="<?php echo URL;?>assets/css/minified.css.php" /> Kommt dieser in die header.php? Wie wird das richtig in WordPress eingebunden?
    Ich hoffe, ich habe alle wichtigen Informationen mit hier rein geschrieben und nichts vergessen, damit für jeden hier alles verständlich ist.
    Kann mir hier jemand eine Antwort geben oder gibt es eine andere Möglichkeit?
    Schon mal vielen Dank im Voraus.

    Viele Grüsse, Sandra

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Moderator Bego Mario Garde

    (@pixolin)

    Schau dir mal das Plugin Autoptimize an. Das Plugin „… fügt alle Scripte und Styles zusammen, minimiert und komprimiert diese, fügt expires header hinzu, cacht diese, und verschiebt Scripte in den Footer. …“. Allerdings enthalten einige Themes und Plugins JavaScript, dass du in den Plugin-Einstellungen von Autoptimize ausschließen musst, z.B. für mobile Navigationsmenüs. Ist aber in der Plugin-Beschreibung alles gut erklärt.

    Thread-Starter sandra20

    (@sandra20)

    Ja, das habe ich schon einmal benutzt und dann ist die ganze Seite zerschossen worden. Ich würde das gerne ohne Plugin machen, wenn es irgendwie möglich ist.

    Moderator Bego Mario Garde

    (@pixolin)

    Ein Inline-Stylesheet ist eine Reihe von CSS-Formatierungsregeln, die direkt im HTML-Dokument enthalten sind, also z.B.
    <style>body { color: #e00; }</style>

    Der Vorteil gegenüber externen Style-Sheets ist, dass der Browser nicht mehrfach angewiesen wird, noch eine weitere (CSS-)Datei zu holen und verarbeiten. In Autoptimize ist das sehr gut gelöst, da alle Stylesheets aus Theme und Plugins komprimiert und zusammengefasst werden. Deshalb meine Empfehlung …

    Wenn Autoptimize deine „ganze Seite zerschossen“ hat, kannst du entweder die Behandlung von JavaScript ausschließen oder in der Console deiner Browser-Webentwicklerwerkzeuge (Windows: Taste F12, Mac: Alt-Cmd-I) nachschauen, welche Fehler gemeldet werden und die zugehörigen Skripte ausschließen.

    Dein Code <link rel="stylesheet" type="text/css" href="<?php echo URL;?> funktioniert nur, wenn die Konstante URL vorher definiert wurde und selbst dann ist das genau das Gegenteil von dem, was du erreichen möchtest, weil wieder eine externe Datei eingebunden wird.

    Thread-Starter sandra20

    (@sandra20)

    Okay, hab jetzt Deinen Rat befolgt und das Autoptimize Plugin installiert. Das wird ja sofort aktiv. Soll man auch den Cache leeren, ist das sinnvoll? Ist damit das Browser Cache gemeint? Bin da etwas vorsichtig geworden. Wenn man einmal so einen Absturz hatte, wo die ganze Seite weiss war, dann ist das schon sehr einprägsam. Wie heisst die Tastenkombination, wenn man keinen Mac hat?

    Moderator Bego Mario Garde

    (@pixolin)

    Gemeint ist der Cache deines Cache-Plugins – wenn du so etwas überhaupt verwendest. (Ich nutze ganz gerne die Kombination von Comet Cache und Autoptimize und bin mit der Performance recht zufrieden.)

    Thread-Starter sandra20

    (@sandra20)

    Danke. Gute Informationen.

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „CSS Stylesheets in WordPress inline setzen funktioniert nicht“ ist für neue Antworten geschlossen.