WP Theme mnmlwp: Blogseite optimieren

Notizen zum Optimieren der Blogseite:

1. Autor nicht anzeigen

Erstmal das übliche Code-Geschnüffel, also den Theme Editor starten. Die Blogseite (“Blog-Archiv”) wird definiert im “Post Archive Seiten-Template” => template-archive.php. Darin werden die einzelnen Posts bezogen durch the_post(); sowie the_content(); und mnmlwp_get_posts(); => diese wiederum sind in der functions.php definiert, also darin arbeiten.

In der functions.php ist der Abschnit // Post Meta für die Gestaltung der Artikelauszüge im Blog-Archiv zuständig. Hier lässt sich mit Blick auf die Performance noch eine ganze Menge mehr optimieren, aber ich bin im Moment ausschließlich ergebnisorientiert und beschränke mich auf das Wesentliche, also nach dieser Zeile schauen …

$html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<p class="last">' . $author . $date . '</p>' : '';

… diese auskommentieren und ersetzen durch …

$html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<p class="dateblogpost">' . get_the_date( 'd.m.Y', $post_id ) . '</p>' : '';

… schon ist der Autorenname weg. Hier habe ich die class=”last” dann auch gleich durch etwas Vernünftiges wie class=”dateblogpost” ersetzt, so dass sich das weitere Design via individuellem CSS steuern lässt.

2. Datumsformate anpassen

Das Datumsformat wird generell in den WordPress Einstellungen > Allgemein festgelegt, das wird also normalerweise dort eingestellt werden nicht hier im Theme. Ausnahme: will man verschiedene Datumsanzeigen haben (z.B. englische Variante im Backend, weil es übersichtlicher ist, und deutsches Format im öffentlichen Blog, weil es da einfach besser aussieht), so lässt sich die Datumsanzeige im Template wie oben angegeben steuern (siehe get_the_date in der letzten Codezeile über diesem Absatz).

3. Post ID anzeigen (nur für Redaktionsteams)

Um die gemeinsame Arbeit an großen Blogs zu erleichtern, ist es besser, sich über Post IDs statt über “Artikeltitel” zu unterhalten. “Wer arbeitet an #123” ist einfacher als “Wer arbeitet an dem Artikel über die Elefantenherde in der Mönckebergstrasse?” oder noch besser: “Hallo Team, ich werde bei #123, #456 und #789 die Bilder aktualisieren” ist einfacher als … na, Ihr könnt es Euch denken 🙂

Darum habe ich es so eingestellt, das ihr, sobald ihr angemeldet seid, neben dem Datum auch noch die Post-ID seht. Diese wird auch im Backend in der Liste der Beiträge gleich als erste Nummer angezeigt – so sind alle auf der sicheren Seite und es ist ganz leicht, sich in vielen, vielen Artikel zu orientieren. 🙂

Für mich und Co-Admin/as hier die Scriptnotiz – den Bereich, den wir eben um den Autor gekürzt und mit Datum und CSS verbessert haben, jetzt noch mit der Post ID ergänzen, d.h. die ganze Zeile lautet dann nicht mehr nur …

$html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<p class="dateblogpost">' . get_the_date( 'd.m.Y', $post_id ) . '</p>' : '';

… sondern komplett so (ist dann mit den Klassen div.blog_box_id_date sowie blog_id und blog_date in individuellem CSS designbar):

// Eigene Anpassung: ID für die Redaktion anzeigen, Autor weglassen, Datum anzeigen
// $html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<p class="last">' . $author . $date . '</p>' : '';
$html .= '<div class="blog_box_id_date">';
if ( is_user_logged_in() ) {
$html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<span class="blog_id"> Post ID # '
. $post_id . '</span> | <span class="blog_date">' . get_the_date( 'd.m.Y', $post_id ) . '</span>' : '';
} else {
$html .= in_array( 'author', $components ) && in_array( 'date', $components ) ? '<span class="blog_date">'
. get_the_date( 'd.m.Y', $post_id ) . '</span>' : '';
}
$html .= '</div>';

4. CSS: Die Artikel-Box

Es gibt einen fast unsichtbaren Strich zwischen den einzelnen Artikelauszügen (vermutlich ein border-bottom css), das möchte ich nicht.

Die Beitragsliste liegt in Theme Editor > home.php – also zuerst dort geschaut. Hier gibt es einen Lokalisierungsfehler, der sich gleich mitbeheben lässt, in der Zeile …

echo '<h1>' . esc_html__('Latest Posts', 'mnmlwp') . '</h1>';

… sollte natürlich besser ein Platzhalter für die korrekte Übersetzung von “Latest Posts’ stehen. Aus Faulheit habe ich es erstmal einfach nur “Beitragsliste” ersetzt. Außerdem blende ich diesen Titel in den meisten Blogs sowieso aus. Speichern.

Zurück zur eigentlichen Aufgabe – die home.php führt uns wieder zur inzwischen bekannten functions.php > mnmlwp_get_posts(); Funktion, die die Erstellung der Textauszüge in der Beitragsliste steuert. Hier sehen wir wunderbar alle verwendeten CSS Elemente rund um die Beitragsauszüge und finden auch das .post-list Element, das eigentlich für den unerwünschten Rahmen verantwortlich sein müsste. Aber es lässt sich einfach nicht so stylen, dass der “Strich” weggeht. Auch die “drumrumliegenden” p- und div-Klassen bringen nicht die gewünschte Lösung, alles probiert.

Nach einer Stunde CSS Testen wird es mir jetzt zu blöd. Stattdessen habe ich (z.B: hier auf antiblabla) einen ganz leichten Hintergrund für jeden Blogpost-Auszug auf der Blogliste gesetzt, so dass der nervige “Strich” darin optisch verschwindet – sieht auch schön aus 😉

.post-list li{
background-color:#fcfcfc;
list-style-position: inside;
border-bottom: 10px solid red;
padding: 20px;
border-radius:25px;
}

 

Das war’s für heute. Aber es kommt bestimmt noch mehr.

Happy Coding
antiblabla admina

Artikel ID 581

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

%d Bloggern gefällt das: