Wie man Divi färbt Blog-Beiträge nach Autor

Eines der Hauptziele von Divi ist es, sicherzustellen, dass jedes Element auf Ihrer Website gut aussieht, und Blog-Posts sind keine Ausnahme. Es gibt jedoch immer Raum für Verbesserungen, und die Farbcodierung Ihrer Blog-Posts nach Autor bietet Benutzern eine Möglichkeit, Ihre Inhalte effizienter zu navigieren (und ihre Lieblingsautoren zu identifizieren!).

In diesem Artikel werden wir mehr darüber sprechen, warum Sie Ihre Divi-Blog-Posts möglicherweise farblich kodieren möchten und wie Sie dies in zwei einfachen Schritten tun können. Es ist Zeit für einen neuen Anstrich!

Warum Sie in Betracht ziehen sollten, Ihre Divi-Blog-Posts farblich zu kennzeichnen

Bevor wir fortfahren, lassen Sie uns klären, was wir mit der Farbcodierung Ihrer Divi-Blogposts meinen. Im nächsten Abschnitt werden wir Ihnen beibringen, wie Sie jedem Ihrer Autoren eine Farbe zuweisen, die als Hintergrund für seine eigenen Beiträge angezeigt wird. In diesem Beispiel habe ich meinen eigenen Beiträgen (als Autor1) ein sehr ansprechendes Hellblau zugewiesen:

Der Effekt selbst ist relativ einfach, bietet aber eine wirkungsvolle Möglichkeit, Autoren zu differenzieren. Benutzer können neue Stücke ihrer Lieblingsautoren auf einen Blick leicht erkennen. Natürlich kann es den gleichen Effekt haben, den Namen des Autors hervorzuheben, aber er ist möglicherweise nicht so auffällig.

Ihre einzige Sorge dabei ist Ihre Farbwahl. Nehmen Sie zum Beispiel den Screenshot am Anfang dieses Abschnitts – unser Divi-Blog-Index verwendet einen weißen Hintergrund, daher haben wir uns entschieden, bei den Beiträgen unserer Autoren bei hellen Pastellfarben zu bleiben. Mal sehen, was passiert, wenn wir ein anderes Farbschema wählen:

Das ist natürlich ein extremes Beispiel, aber es hilft uns, unseren Standpunkt zu veranschaulichen. Wenn Sie Ihre Beiträge farbkodieren möchten, müssen Sie Ihre Palette sorgfältig prüfen und gegebenenfalls ein geeignetes Werkzeug verwenden. Die Verwendung kontrastierender Farben, um den Unterschied zwischen den einzelnen Beiträgen hervorzuheben, kann Benutzern helfen, Autoren schnell zu identifizieren, aber es kann auch den Stil Ihres Blogs beeinträchtigen und das Lesen Ihres Inhalts erschweren.

So färben Sie Divi-Blog-Posts nach Autor (in 2 Schritten)

Nachdem wir die Theorie behandelt haben, ist es an der Zeit, sich mit der Farbcodierung von Divi-Blogposts zu befassen. Das Aktivieren dieser Funktion erfordert nur zwei Schritte, aber es sind einige Überlegungen zu treffen, bevor Sie beginnen.

Für den Anfang solltest du deine WordPress-Site sichern, was immer eine gute Idee ist, wenn du Änderungen vornimmst. Zweitens möchten Sie ein untergeordnetes Divi-Theme erstellen, damit Ihre Änderungen auch nach der Aktualisierung des Themas erhalten bleiben.

Schließlich müssen Sie für Schritt eins einen FTP-Client verwenden. Wir werden FileZilla verwenden, aber wenn Sie ein anderes Tool bevorzugen, probieren Sie es aus.

Schritt #1: Fügen Sie der Datei functions.php Ihres Child-Themes ein Code-Snippet hinzu

Dazu müssen Sie Ihren FTP-Client öffnen und sich beim Server Ihrer Site anmelden. Gehen Sie von dort in das Verzeichnis public_html / wp-content/themes/ und suchen Sie dann den Ordner Ihres Child-Themes. Denken Sie daran, dass der public_html- oder Root- Ordner je nach Ihrem Hoster www oder nach der Domain Ihrer Site benannt sein kann:

Sobald Sie den Ordner Ihres Child-Themes gefunden haben, öffnen Sie ihn und suchen Sie nach der Datei functions.php . Klicken Sie nun mit der rechten Maustaste darauf und klicken Sie auf die Option Anzeigen / Bearbeiten :

Dies fordert Sie auf, die Datei mit Ihrem Standard-Texteditor zu öffnen. Da wir es mit einem Child-Theme zu tun haben, sollte Ihre Datei functions.php, abgesehen von der Einreihung der Funktionen der übergeordneten Elemente, weitgehend leer sein. Wir fügen ein Snippet hinzu, das automatisch eine neue Klasse für jeden Ihrer Autoren mit dem Autoren- Präfix erstellt. Wenn Sie beispielsweise einen WordPress-Benutzer namens John haben, können Sie die author-john- Klasse verwenden. Dadurch können wir später CSS-Code hinzufügen.

Fügen Sie als Nächstes das folgende PHP-Snippet nach der Zeile // END ENQUEUE PARENT ACTION hinzu:

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Speichern Sie nun Ihre Änderungen, schließen Sie den Editor und fertig! Denken Sie daran, dass Sie Kleinbuchstaben verwenden müssen, damit Ihre Klasse funktioniert, unabhängig davon, mit welchem ​​Autor Sie es zu tun haben. Das wird für Schritt Nummer zwei wichtig sein.

Schritt #2: Geben Sie eine Farbe für jeden Autor mit der benutzerdefinierten CSS-Option von Divi an

Jetzt ist unsere neue Funktion fertig, der nächste Schritt besteht darin, für jeden Ihrer Autoren eine Farbe festzulegen. Divi ermöglicht Ihnen dies mit seiner benutzerdefinierten CSS- Funktion, da sich jeder Code, den Sie dort hinzufügen, auf Ihr gesamtes Design auswirkt. Um es zu finden, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zur Registerkarte Divi > Theme-Optionen und scrollen Sie dann nach unten zum Feld Benutzerdefiniertes CSS am Ende der Seite:

Sie müssen in diesem Feld für jeden Ihrer Autoren eine neue CSS-Zeile hinzufügen. Wenn Sie beispielsweise einen Autor mit dem Benutzernamen author1 haben, können Sie für ihn eine bestimmte Farbe wie folgt festlegen :

.author-author1 {background-color: #C1F3FA !important;}

Denken Sie daran, dass Sie unabhängig von Ihrem Benutzernamen das Autoren- Präfix zu Ihrer Klasse hinzufügen müssen . Nachdem Sie eine Hintergrundfarbe angegeben haben, müssen Sie auch den Code als !important deklarieren. Einfach ausgedrückt, verleiht dies dem Code mehr Gewicht und überschreibt eventuell auftretende Konflikte – ohne sie funktioniert diese Funktion nicht.

Gehen wir ein letztes Beispiel durch. Dabei weisen wir zwei Autoren unterschiedliche Farben zu. Hier ist der Code, den wir unserem benutzerdefinierten Divi-CSS-Feld hinzugefügt haben:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

So sieht das nun vom Frontend aus:

Abgesehen von Ihrer Farbwahl gibt es noch andere Optimierungen, die Sie an Ihren Divi-Blog-Posts vornehmen können. Sie können beispielsweise die Länge Ihrer Blog-Auszüge anpassen oder Ihre Post-„Karten“ auf verschiedene Weise gestalten. Ihr Hauptziel sollte es sein, den perfekten Stil für Ihren eigenen Blog zu finden, also haben Sie keine Angst, mit Divi herumzuspielen und zu sehen, was es kann!

Abschluss

Die Farbcodierung Ihrer Blog-Posts durch ihren Autor ist eine einfache Funktion, die dem Benutzer helfen kann, Ihre Inhalte viel einfacher zu navigieren (insbesondere, wenn Sie über ein umfangreiches Archiv verfügen). Außerdem werden viele Ihrer Benutzer es wahrscheinlich zu schätzen wissen, die Beiträge ihrer Lieblingsautoren allein an der Farbe erkennen zu können.

Bevor Sie mit dem Optimieren von Dateien beginnen, denken Sie daran, Ihre Site zu sichern und ein untergeordnetes Thema einzurichten, damit Ihre Änderungen auch in Zukunft bestehen bleiben. Sobald dies erledigt ist, sind dies die beiden Schritte, die Sie befolgen müssen, um Ihre Divi-Blog-Posts nach Autor farblich zu kennzeichnen:

1. Ändern Sie die Datei functions.php Ihres Child-Themes.
2. Geben Sie mit der benutzerdefinierten CSS-Option von Divi für jeden Ihrer Autoren eine Farbe an.

Haben Sie Fragen zur Farbcodierung von Divi-Blog-Posts nach Autor? Fragen Sie in den Kommentaren unten!

Miniaturansicht des Artikels von RaZZers / shutterstock.com.