webentwicklung-frage-antwort-db.com.de

front-page.php Stylesheet

Ich habe gegoogelt und gegoogelt, aber ich kann anscheinend nichts herausfinden, was für mich verständlich ist ...

Ich möchte eine statische Startseite für meine Website haben. Zu diesem Zweck habe ich eine front-page.php-Datei im Ordner des aktiven Themas auf meinem FTP-Server erstellt. Ich stelle fest, dass alle Änderungen, die ich in style.css vornehme, in front-page.php nicht berücksichtigt werden. Ich möchte ohnehin ein separates Stylesheet für meine Startseite haben. Wie gehe ich vor, um front-page.php mit einer benutzerdefinierten .css-Datei zu verknüpfen, z. B. front-style.css, sodass ich die .css-Datei einfach bearbeiten kann, um die .php-Datei zu formatieren? Oder ist das nicht der richtige Ansatz?

3
Rookierookie

So laden Sie ein benutzerdefiniertes Stylesheet für Ihre Startseite

  1. Richten Sie front-page.php ein (was Sie bereits getan haben).
  2. Erstellen Sie ein Stylesheet für Ihre Startseite (Sie können style.css kopieren, aber mit größerer Wahrscheinlichkeit möchten Sie nur einige Dinge überschreiben). Nennen wir es front-page-style.css.
  3. Zeigen Sie die HTML-Quelle einer Ihrer Seiten an und suchen Sie die id der style.css-Datei (wahrscheinlich etwas in der Art von your-theme-css). Wenn Sie den -css-Teil zurechtschneiden, erfahren Sie, was wir als Abhängigkeit verwenden müssen Code.
  4. Fügen Sie der functions.php-Datei Ihres Themas Folgendes hinzu:

    add_action( 'wp_enqueue_scripts', 'wpse102732_front_page_styles', 20 );
    function wpse102732_front_page_styles() {
        if( is_front_page() ) {
            // Any dependencies go here:
            // if the style.css id in step 3 was 'your-theme-css',
            // then use 'your-theme'
            $deps = array( 'your-theme' );
            $handle = 'your-theme-front-page';
            $url = get_stylesheet_directory_uri() . '/front-page-style.css';
            wp_enqueue_style( $handle, $url, $deps );
        }
    }
    

Sie sollten jetzt in der Lage sein, Stile in front-page-style.css nur für die Startseite zu ändern.

Verweise

3
Pat J