WordPress – Avatar in Beitragsüberschrift anzeigen

Leider bietet WordPress in der Basisversion keine Option, einen Avatar des Autors in den Metainformationen unterhalb des Beitragstitels anzuzeigen. Diese Möglichkeit kann man durch die Erweiterung eines Child Themes mit dem nachfolgend beschriebenen Verfahren nachrüsten. Die Methode funktioniert auch direkt im Standard-Theme, bei einem Update des Themes gehen allerdings unsere Änderungen verloren.

Für die folgenden Ausführungen verwenden wir das Theme Twenty Fourteen unter WordPress Version 4.2.4.

Child Theme erstellen

Als Vorbereitung legen wir – falls noch nicht vorhanden – ein Child Theme Twenty Fourteen Child für das Standard-Theme / Parent Theme Twenty Fourteen an. Der Child Theme-Ordner heißt twentyfourteen-child und beinhaltet die beiden Dateien functions.php und style.css. Wir können hierbei z. B. nach der Anleitung WordPress – Child Theme erstellen vorgehen.

Avatar integrieren

Für die Darstellung der Metainformationen über Datum und Autor eines Beitrages im Standard-Theme Twenty Fourteen ist die Funktion twentyfourteen_posted_on in der Datei inc/template-tags.php verantwortlich. Die Abfrage if ( ! function_exists( ‚twentyfourteen_posted_on‘ ) ) : macht die Funktion „pluggable“, d. h. wir können sie mit einer eigenen gleichnamigen Funktion überschreiben. Hierbei machen wir uns zunutze, dass WordPress die Funktionen des Child Themes vor denen des Parent Themes lädt.

Wir kopieren zunächst die Funktionsdefinition von twentyfourteen_posted_on inkl. der if-Abfrage aus der Datei inc/template-tags.php im Parent Theme Twenty Fourteen an das Ende der Datei functions.php im Child Theme Twenty Fourteen Child. inc/template-tags.php finden wir im Administrationsbereich unter DesignEditor nach Auswahl von Twenty Fourteen als zu bearbeitendem Theme. Danach fügen wir vor der Ausgabeanweisung printf … die Zeile echo get_avatar(get_the_author_meta(‚ID‘), 32); ein. Der Aufruf von get_avatar liefert ein Bild des Autoren-Avatars mit einer Höhe und Breite von 32 Pixeln.

Unsere modifizierte Version von functions.php sollte schließlich wie folgt aussehen:

...
if (!function_exists('twentyfourteen_posted_on')):
function twentyfourteen_posted_on()
{
  if (is_sticky() && is_home() && !is_paged())
  {
    echo '<span class="featured-post">' . __('Sticky', 'twentyfourteen') . '</span>';
  }
  echo get_avatar(get_the_author_meta('ID'), 32);
  printf('<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span><span class="byline"><span class="author vcard"><a class="url fn n" href="%4$s" rel="author">%5$s</a></span></span>',
    esc_url(get_permalink()),
    esc_attr(get_the_date('c')),
    esc_html(get_the_date()),
    esc_url(get_author_posts_url(get_the_author_meta('ID'))),
    get_the_author());
}
endif;

Avataranzeige anpassen

Die Anzeige des Avatars können wir noch mit zusätzlichen Einträgen in der Datei style.css im Child Theme individuell anpassen. Mit den nachfolgenden Formatanweisungen stellen wir beispielsweise den Autoren-Avatar rund dar und legen einen Abstand von 80% der Schriftgröße zu den übrigen Metainformationen fest:

...
div.entry-meta img.avatar {
        border-radius: 50%;
        margin-right: 0.8em;
}

Sollen die Kommentar-Avatare ebenfalls rund sein, ergänzen wir noch:

...
div.comment-author img.avatar {
        border-radius: 50%;
}

Falls wir die Avatar-Anzeige ausschalten möchten, fügen wir eine Zeile ein, in der wir der Eigenschaft display den Wert none zuweisen:

...
div.entry-meta img.avatar {
        border-radius: 50%;
        margin-right: 0.8em;
        display: none;
}

Schreibe einen Kommentar