So fügen Sie benutzerdefinierte Vorlagen und Designs zu den Blog-Post-Formaten von Divi hinzu (Teil 1 von 3)

Willkommen zu Tag 1 von 3 unserer Serie zum Hinzufügen von benutzerdefinierten Stilen zu Divis Blog-Post-Formaten. Standardmäßig wird Divi mit sechs Blog-Post-Formaten geliefert: Standard, Video, Audio, Zitat, Galerie und Link. In dieser Serie bringen wir Ihnen bei, wie Sie diese mit PHP und CSS anpassen können.

In den nächsten 3 Tagen werde ich Sie durch die Anpassung aller Blogpost-Formate von Divi führen: Standard, Zitat, Link, Video, Audio und Galerie. Um all dies (für die Designs, die ich im Sinn habe) zu bearbeiten, muss die Vorlagendatei single.php bearbeitet werden. Um dies richtig zu tun, müssen wir ein Divi-Child-Theme erstellen, das unsere geänderte Single.php-Vorlagendatei enthält. Und bevor wir das tun, sollten wir auch eine lokale Installation von WordPress mit Desktopserver erstellen. Dies wird uns einen sicheren Entwicklungsraum bieten, um herumzuspielen, ohne etwas auf einer Live-Website zu riskieren.

Wie der Titel dieses Beitrags vermuten lässt, benötigen wir drei Tage, um alles von Anfang bis Ende abzudecken. Heute zeige ich Ihnen, wie Sie mit Desktopserver eine lokale Installation von WordPress erstellen und das Child-Theme erstellen, das wir verwenden werden, um unsere geänderten Blog-Post-Formate aufzunehmen.

Ich würde diese Serie als „fortschrittlicher“ bezeichnen als die meisten hier veröffentlichten Tutorials. Aber wenn Sie ein Anfänger sind, ist diese Serie eine großartige Gelegenheit für Sie, Ihre Entwicklungsfähigkeiten zu verbessern und in einer sicheren, kostenlosen, geführten Post-Serie in etwas Neues einzusteigen.

Lass uns anfangen!

Ein kleiner Vorgeschmack auf das, was kommt

Hier ist ein kurzer Blick auf die Designs, die wir in dieser Serie erreichen werden. Nachdem wir im heutigen Beitrag die Grundlagen dafür gelegt haben, zeige ich Ihnen, wie Sie die Datei single.php (die Vorlage für alle unsere Blog-Post-Formate) bearbeiten und dann diese Vorlage für jedes Format mit CSS weiter stylen. Es wird eine ziemliche Reise!

Vorbereitung Ihrer Entwicklungsressourcen

Hier ist, was Sie zusammen mit dem heutigen Tutorial und den Tutorials, die ich für die nächsten 2 Tage erstellt habe, befolgen müssen:

• Ein Code-Editor wie Atom, Sublime, Brackets oder Notepad++ (was auch immer Sie bevorzugen)
• Eine lokale WordPress-Installation mit DesktopServer (sofern Sie nicht bereits einen haben)
• Ein Divi Child Theme – das wir erstellen!

Ich empfehle dringend, dass Sie, wenn Sie dieser Serie folgen möchten, dies auf einer WordPress-Installation tun, die nur zum Testen und Entwickeln eingerichtet wurde. Das Letzte, was ich möchte, ist, dass die Leute mit ihrer Live-Website experimentieren und etwas durcheinander bringen.

Wenn Sie sich nicht sicher sind, wie Sie eine lokale Entwicklungsinstallation von WordPress einrichten, empfehle ich die kostenlose Version von desktopserver. Es sollte Sie in wenigen Minuten mit einer lokalen WordPress-Installation zum Laufen bringen (keine Übertreibung).

Einrichten von DesktopServer auf Ihrem Computer

Hier sind einige Schritte, um mit DesktopServer zu beginnen.

Besuchen Sie ihre Website und laden Sie die kostenlose Version herunter, indem Sie auf die Schaltfläche „Kostenlos – In den Warenkorb“ in der rechten Spalte klicken.

Geben Sie auf der Checkout-Seite Ihre persönlichen Daten ein, stimmen Sie den Bedingungen zu und klicken Sie auf Kaufen.

Wählen Sie auf der Seite Kaufbestätigung den richtigen Download für Ihr Betriebssystem aus. Ich schlage vor, die neueste Version von Mac oder Windows zu installieren.

Entpacken Sie Ihren Download und führen Sie die Installation der Anwendung auf Ihrem Computer aus.

Jetzt finden Sie die DesktopServer-Anwendung in einem Ordner namens „xampplite“ im Stammverzeichnis Ihres lokalen Laufwerks (C:).

Wenn Sie Desktopserver installiert haben, lesen Sie deren Anweisungen, um Ihnen beim Einrichten Ihrer lokalen WordPress-Installation zu helfen.

Erstellen Sie Ihr Divi Child Theme für diese Serie

Um ein Divi-Child-Theme zu erstellen, müssen Sie auf Ihre WordPress-Themedateien zugreifen. Wenn Sie bei der Installation von DesktopServer die Standardeinstellungen befolgt haben, sollten sich Ihre Designdateien in Ihrem Dokumentenordner in einem Ordner mit der Bezeichnung „Websites“ befinden.

Suchen Sie den Themenordner und fügen Sie einen neuen Ordner mit dem Namen "Kind" hinzu.

Jetzt fügen Sie Ihre style.css-Datei zu Ihrem Child-Theme-Ordner hinzu. Dies ist die erste von 3 Dateien, aus denen Ihr Child-Theme besteht.

Öffnen Sie Ihren Texteditor und erstellen Sie eine neue Datei mit dem folgenden CSS-Header ganz oben im Dokument.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Sie können die restlichen Informationen für den CSS-Header des untergeordneten Themas hinzufügen, um Ihre Website nach Bedarf anzupassen.

Speichern Sie Ihre neue Datei mit dem Namen und der Erweiterung „style.css“. Und fügen Sie es dem untergeordneten Theme-Ordner hinzu:

Die nächste Datei, die Sie Ihrem Child-Theme-Ordner hinzufügen müssen, ist die Datei functions.php.

Gehen Sie zurück zu Ihrem Texteditor und erstellen Sie eine weitere neue Datei und fügen Sie den folgenden PHP-Code ganz oben im Dokument hinzu:

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Speichern Sie die Datei mit dem genauen Namen und der Erweiterung „functions.php“ und fügen Sie sie Ihrem Unterordner hinzu:

Die letzte Datei, die Sie für Ihr Child-Theme benötigen, ist die Datei single.php von Divi. Neben dem Hinzufügen von neuem CSS zu Ihrer Style.css-Datei für das Child-Theme verwenden wir eine Kopie der Datei single.php von Divi, um das Layout für die verschiedenen Post-Typen zu bearbeiten.

Um die Datei single.php zu finden, gehen Sie zum Divi (übergeordneten) Theme-Ordner.

Kopieren Sie die Datei single.php und fügen Sie sie in Ihren Child-Theme-Ordner ein:

Jetzt sind wir bereit, Anpassungen an der Datei single.php Ihres Child-Themes vorzunehmen.

Aktivieren Sie Ihr neues Child-Theme

Bevor wir mit der Anpassung der Vorlagendatei single.php beginnen, aktivieren Sie Ihr neues Child-Theme.

Gehen Sie im WordPress-Dashboard zu Erscheinungsbild → Themen und wählen Sie die Schaltfläche Aktivieren für Ihr neues untergeordnetes Thema namens Divi Child.

Das war es fürs Erste!

Ich weiß, dass das noch nicht so aufregend ist, aber ich hoffe, du bleibst bei mir. Es ist wichtig, die richtigen Grundlagen für Ihre Projekte zu legen, und dieser Beitrag ist ein großartiger Ausgangspunkt.

Was kommt morgen?

Mit Ihrer lokalen Installation von WordPress und aktiviertem Child-Theme sind Sie jetzt bereit für den nächsten Teil dieser Serie. Morgen zeige ich Ihnen, wie Sie die Datei single.php von Divi bearbeiten, um ein völlig einzigartiges Layout für Ihre Blog-Post-Formate zu erstellen.

Ich freue mich darauf, Ihr Feedback unten zu lesen. Das Einrichten eines Child-Themes auf einem lokalen Server kann für Anfänger zu einigen Problemen führen, daher werde ich versuchen, alle mir möglichen Fragen zu beantworten. Wenn Sie jedoch mehr technische Probleme haben, ist unser Support-Team bereit und bereit, Ihnen ebenfalls zu helfen. Ganz zu schweigen von den Leuten bei Desktop Server!

Danke schön!