WordPress – Deine eigene Autorenbox erstellen

In diesem Artikel erfährst Du, wie Du in WordPress mit ein paar Zeilen PHP-Code Deine eigene Autorenbox erstellen kannst.

Eine Autorenbox ist eine hervorragende Möglichkeit, Dich Deinen Lesern vorzustellen, sie ein wenig mehr über Dich als Person und Deine Kompetenzen wissen zu lassen, und Dir so als Autoren ein Gesicht zu geben und Vertrauen bei Deinen Lesern zu erzeugen.

Bei Gastbeiträgen kannst Du in einer Autorenbox darüberhinaus Links auf die Webseite oder auch auf Projekten des Autors sowie auf dessen Social Media-Profile hinterlegen.

Aber was machen, wenn das eigene Theme keine Möglichkeit eines Autorenprofils vorsieht oder wenn die Autorenbox, wie in meine Fall mit dem Theme WP Resonar , diese Box – freundlich ausgedrückt – überschaubar daherkommt?

Beispiel für die Standard-Autorenbox des WP Themes Resonar auf BLOGGERWISSEN

Dann gibt es zum einen eine ganze Reihe von WordPress-Plugins, die Autorenboxen erzeugen können.

Oder Du siehst es als eine willkommene Gelegenheit, Dir Deine eigene Autorenbox zu bauen, wie ich es auch für BLOGGERWISSEN gemacht habe.

Challenge accepted!

In diesem Artikel zeige ich Dir, wie Du Dir mit einigen Zeilen PHP-Code Deine ganz eigene Autorenbox baust, mit

  • einem eigenen Profilbild für jeden Deiner Autoren,
  • dem Name des jeweiligen Autors,
  • einer generischen Überschrift in der Autorenbox,
  • der Biographie des jeweiligen Autors,
  • einer Verlinkung auf die Website des Autors,
  • Verlinkungen auf die Social Media-Profile sowie
  • einen Link auf die Archivseite des jeweiligen Autors.

Am Ende wirst Du eine Autorenbox erstellt haben, die alle obengenannten Informationen enthält, wie Du sie auch in meiner Autorenbox findest.

Ob Deine Autorenbox dann auch aussehen soll wie meine Box, kannst Du natürlich selber entscheiden. Dennoch stelle ich Dir auch das CSS meiner Box in diesem Artikel zur Verfügung.

Fertige, selbst programmierte Autorenbox auf BLOGGERWISSEN

Für die folgenden Code-Injections nutze ich übrigens das WordPress-Plugin Code Snippets von Shea Bunge, das Du Dir ebenfalls installieren solltest.

Wo soll meine Autorenbox erscheinen?

Üblicherweise wird eine Autorenbox unterhalb des jeweiligen Artikels platziert. Auf BLOGGERWISSEN beschränke ich dieses Erscheinen jedoch nicht nur auf Artikelseiten, sondern platziere sie außerdem auch der Startseite meines Blogs und natürlich auf der Autorenseite.

In meinem Fall ergeben sich daraus code-seitig betrachtet drei unterschiedliche Platzierungen.

  1. Auf Artikelseiten soll meine Autorenbox mehr oder weniger direkt unter dem jeweiligen Artikel erscheinen.
  2. Die Startseite von BLOGGERWISSEN soll die Autorenbox unterhalb der Artikelübersicht anzeigen.
  3. Auf der Autorenseite soll die Autorenbox oberhalb der Artikelübersicht erscheinen.

Um diese Platzierungen vorzunehmen, verwende ich die WordPress-Funktion add_action() zusammen mit einem Conditional Tag und dem jeweils passenden Template-Hook.

Bei der Priorisierung der folgenden Abfragen, verwende ich den Seitentyp mit dem höchsten Traffic zuerst, den Seitentyp mit dem niedrigsten Traffic zuletzt.

Positionierung auf Artikelseiten

Um die Positionierung auf einer Artikelseite zu steuern, musst Du zunächst prüfen, ob der Besucher sich gerade auf einer Artikelseite befindet.

Dazu verwendest Du eine if-Abfrage und den Conditional Tag is_singular(). Dieser Tag prüft, ob die Abfrage für einen einzelnen Beitrag eines beliebigen Beitragstyps gilt.

Verläuft diese Prüfung positiv, wird die Funktion addCustomAuthorProfile über den Hook comment_form_before vor dem Kommentarformular der Seite ausgeführt.

if(is_singular()){
add_action('comment_form_before','jyy_addCustomAuthorProfile',2);
}

Positionierung auf der Startseite

Die Positionierung der Autorenbox auf der Startseite folgt derselben Logik wie bei der Artikelseite. Ich tausche lediglich den Conditional Tag aus. Statt gegen is_singular() zu prüfen, prüfe ich diesmal, ob sich der Besucher auf meiner Startseite aufhält. Dies wird durch die Conditional Tags is_home() und is_front_page() möglich.

Hält sich ein Besucher auf der Startseite von BLOGGERWISSEN auf, wird meine Autorenbox über loop_end jetzt unterhalb der Artikelübersicht platziert.

if(is_home() || is_front_page()){
		add_action('loop_end','jyy_addCustomAuthorProfile',1);
	} // close if

Positionierung auf der Autorenseite

Bleibt nun noch die Autorenseite.

Eine Autorenseite lässt sich über die Conditional Tag is_author() identifizieren.

Da ich auf meinen Autorenseiten die Autorenbox oberhalb der Artikelübersicht haben möchte, verwende ich diesmal den Template-Hook loop_start().

Platzierungen fehlerfrei ausführen

Um die ganzen Platzierungen fehlerfrei ausführen zu lassen, musst Du die drei Anweisungen in eine weitere add_action-Anweisung kapseln.

Dazu hänge ich diese Anweisung an den Action Hook wp und lasse eine übergeordnete Funktion loadAuthorProfile ausführen, die die oben gezeigten add_action-Anweisungen beinhaltet.

add_action('wp','loadAuthorProfile',1);
function loadAuthorProfile(){
	if(is_singular()){
		add_action('comment_form_before','addCustomAuthorProfile',2);
	} // close if

	if(is_home() || is_front_page()){
		add_action('loop_end','addCustomAuthorProfile',1);
	} // close if
	
	if(is_author()){
		add_action('loop_start','addCustomAuthorProfile',1);
	}
}

Die richtige Platzierung für Deine Autorenbox

Die Template-Hooks, die Du hier in den Code-Beispielen siehst, sind Standard-Hooks, die WordPress von sich aus zur Verfügung stellt.

Diese Hooks funktionieren technisch betrachtet einwandfrei, können aber je nach verwendetem Theme nicht unbedingt zum gewünschten visuellen Ergebnis führen.

Welcher dieser Hooks speziell für Dein Theme in Frage kommt, musst Du im Zweifelsfall leider ausprobieren.

Inbesondere kostenpflichtige WordPress-Themes können häufig mit weiteren, eigenen Theme-Hooks aufwarten. Daher lohnt sich unbedingt auch ein Blick in die Dokumentation Deines Themes, ob es nicht vielleicht einen Hook gibt, der sich besser für die Platzierung der Autorenbox anbietet als diese Standard-Hooks.

Ein glänzendes Beispiel für eine sehr umfangreiche Anzahl an eigenen Hooks sind da auf jeden Fall die Studiopress-Themes, die auf dem Genesis-Framework basieren.

Die Daten des Autoren

Bevor Du in Deiner Autorenbox überhaupt irgendetwas anzeigen kannst, musst Du Dir erstmal alle erforderlichen Informationen über den jeweiligen Autor besorgen.

Hierfür stellt WordPress die Funktion get_the_author_meta() zur Verfügung. Um einzelne, im Nutzerprofil hinterlegte Informationen abzufragen, musst Du in der Funktion noch die entsprechenden Datenfelder mitgeben.

$currentAuthorID = get_the_author_meta('ID');
$currentAuthorName = get_the_author_meta('display_name',$currentAuthorID);
$currentAuthorEmail = get_the_author_meta('user_email',$currentAuthorID);
$currentAuthorAvatar = get_wp_user_avatar($currentAuthorID,150,'center');
$currentAuthorDescription = wpautop(get_the_author_meta('description',$currentAuthorID));
$currentAuthorArchiveLink = get_author_posts_url($currentAuthorID);
$currentAuthorTwitter = get_the_author_meta('twitter',$currentAuthorID);
$currentAuthorFacebook = get_the_author_meta('facebook',$currentAuthorID);
$currentAuthorWebsite =  get_the_author_meta('url',$currentAuthorID);

Eine Besonderheit gilt es hierbei zu beachten: Ich verwende auf BLOGGERWISSEN grundsätzlich keine Avatare von Gravatar.com. Warum das so ist, erfährst Du am Ende dieses Artikel.

Augfrund dieser Tatsache findest Du in Zeile 4 meines Codes die Funktion get_wp_user_avatar(), um das Avatar des jeweiligen Nuzters abzufragen.

Diese Funktion greift jedoch ausschließlich auf Avatare zurück, die über das Plugin WP User Avatar verknüpft wurden.

Möchtest Du stattdessen die Gravatar-Avatare verwenden, ersetze meine Zeile 4 durch

get_avatar($id_or_email,$size,$default,$alt,$args);

Mehr Informationen zu dieser Funktionen findest im WordPress Codex.

Ausgabe der Autorenbox

Um die Angaben zum jeweiligen Autoren im Frontend sichtbar zu machen, musst Du Dir jetzt noch ein HTML-Gerüst erstellen.

Hierfür führe ich in meinem Code-Beispiel die Variable $outputAuthorPanel ein, in der ich nach und nach das gesamte Gerüst der Autorenbox speichere.

$outputAuthorPanel = '';
$outputAuthorPanel .= '<section class="custom-author-profile custom-author-profile-type' . $currentAuthorID . '">';
$outputAuthorPanel .= '<div class="custom-author-profile-flex-filter">';
$outputAuthorPanel .= '<div class="customs-author-profile-img">';
$outputAuthorPanel .= $currentAuthorAvatar;
if(!empty($currentAuthorWebsite)){
        $outputAuthorPanel .= '<p class="customs-author-profile-url"><a target="_blank" href="' . $currentAuthorWebsite . '">' . $currentAuthorWebsiteDisplay. '</a></p>';
    }
$outputAuthorPanel .= '<ul class="customs-author-profile-contact-data">';
$outputAuthorPanel .= '<li><a target="_blank" href="mailto:'. $currentAuthorEmail . '"><i class="fas fa-envelope"></i></a></li>';
    if(!empty($currentAuthorLinkedin)){
        $outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorLinkedin . '"><i class="fab fa-linkedin-in"></i></a></li>';
    }
     
    if(!empty($currentAuthorFacebook)){
        $outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorFacebook . '"><i class="fab fa-facebook-f"></i></a></li>';
    }
     
    if(!empty($currentAuthorTwitter)){
        $outputAuthorPanel .= '<li><a target="_blank" href="https://twitter.com/' . $currentAuthorTwitter  . '"><i class="fab fa-twitter"></i>
</a></li>';
    }
     
$outputAuthorPanel .= '</ul>';
 
if($currentAuthorID == 1){
    $outputAuthorPanel .= '<p><strong>Brauchst du Hilfe bei Deinem Blog? Gern schicke ich Dir ein individuelles Angebot. Bitte kontaktiere mich hierzu unter <a target="_blank" href="mailto:blog@justyumyum.de">blog@justyumyum.de</a>.</strong></p>';
    }
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '<div class="author-description">';
$outputAuthorPanel .= '<hgroup><h5>Hier schreibt</h5><h4>' . $currentAuthorName . '</h4></hgroup>';
$outputAuthorPanel .= '<div class="">' . $currentAuthorDescription . '</div>';
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '</section>';
 
echo($outputAuthorPanel);

Für Informationen, die nicht zu den Pflichtdaten eines Nutzers gehören, prüfe ich vor der Ausgabe noch das Vorhandensein dieser Informationen.

Um beispielsweise zu prüfen, ob der Autor einen Twitter-Handle in seinem Profil angegeben hat, sieht der Code dann so aus:

if(!empty($currentAuthorTwitter)){
        $outputAuthorPanel .= '<li><a target="_blank" href="https://twitter.com/' . $currentAuthorTwitter  . '"><i class="fab fa-twitter"></i>
</a></li>';
    }

In meiner Autorenbox lasse ich außerdem die mit dem Autor verbundene Website-URL anzeigen, sofern eine vorhanden ist.

Da ich die vollständige URL optisch ziemlich unsexy finde, habe ich noch ein paar Schritte eingebaut, um die Anzeige dieser URL visuell hübscher zu machen.

Der nachfolgende Code sorgt dafür, dass sowohl das HTTP-Protokoll als auch das www. aus der ursprünglichen URL entfernt werden. So wird beispielsweise https://www.justyumyum.de zu justyumyum.de.

/* some extra love for displaying a cleaned up url */
    $currentAuthorWebsiteDisplay = $currentAuthorWebsite;
    $currentAuthorWebsiteDisplay = trim($currentAuthorWebsiteDisplay, '/');
    if (!preg_match('#^http(s)?://#', $currentAuthorWebsiteDisplay)) {
        $currentAuthorWebsiteDisplay = 'http://' . $currentAuthorWebsiteDisplay;
    }
    $currentAuthorWebsiteDisplayParts = parse_url($currentAuthorWebsiteDisplay);
    $currentAuthorWebsiteDisplay = preg_replace('/^www\./', '', $currentAuthorWebsiteDisplayParts['host']);
/* some extra love for displaying a cleaned up url */

Eine weitere Sache, bei Dir Du für Dich entscheiden musst, ob Du sie verwenden möchtest oder nicht, sind die folgenden Zeilen:

if($currentAuthorID == 123){
    $outputAuthorPanel .= '<p><strong>Brauchst du Hilfe bei Deinem Blog? Gern schicke ich Dir ein individuelles Angebot. Bitte kontaktiere mich hierzu unter <a href="mailto:blog@justyumyum.de">blog@justyumyum.de</a>.</strong></p>';
    }

Bei meiner Autorenbox soll der Text „Brauchst du Hilfe bei Deinem Blog? Gern schicke ich Dir ein individuelles Angebot. Bitte kontaktiere mich hierzu unter blog@justyumyum.de.“ angezeigt werden, sobald es sich um einen Artikel handelt, der von mir verfasst wurde.

Dafür habe ich mit if(currentAuthorID == 123) eine Prüfung der internen ID meines Benutzerprofils eingebaut. Sobald ein Besucher einen Artikel aufruft, wird die mit dem Artikel verbundene Autoren-ID gegen die ID meines Nutzerkontos geprüft.

Wurde der Artikel also von mir verfasst, fällt diese Prüfung positiv aus und der Text wird angezeigt. Andernfalls passiert nichts.

Die Autorenbox hübsch machen

Wie schon gesagt, ob Deine Autorenbox so aussehen soll wie meine, bleibt Dir überlassen. Der Vollständigkeit halber findest Du hier aber auch meine CSS-Anweisungen.

section.custom-author-profile {background-image: url('https://static2.meineseite.de/wp-content/bloggerwissen-autor-bg.jpg');color: #fafafa;background-position: center;background-repeat: no-repeat;background-size: cover;margin-top: 2.5rem;}
div.custom-author-profile-flex-filter {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items:flex-start;align-content: flex-start;background-color:rgba(0,0,0,.8);padding: 1rem;border: 1px solid #a4a4a4;}
div.custom-author-profile-flex-filter p{font-size:0.85rem;margin-bottom:0}
div.custom-author-profile-flex-filter a{color:#fff;text-decoration:underline}
div.custom-author-profile-flex-filter .customs-author-profile-img{flex-basis: 25%;flex-grow:1;flex-shrink:1;align-self:flex-start;}
div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data {list-style: none;text-align: center;}
div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data li {display: inline-block; margin-left: 1rem;margin-right: 1rem;}
div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data li a,
div.custom-author-profile-flex-filter .customs-author-profile-img p.customs-author-profile-url a{color:#fafafa;}
div.custom-author-profile-flex-filter .customs-author-profile-img p.customs-author-profile-url {text-align: center;margin-bottom: 1rem;}
div.custom-author-profile-flex-filter .author-description {flex-basis:75%;flex-grow:1;flex-shrink:1;align-self:flex-start;padding-left: 2rem}
div.custom-author-profile-flex-filter .author-description hgroup h4,
div.custom-author-profile-flex-filter .author-description hgroup h5{margin-top:0;margin-bottom:0}
div.custom-author-profile-flex-filter .author-description h6{margin-top: 0;font-weight: 300;}
div.custom-author-profile-flex-filter .author-description p {margin-bottom: 1.75rem;}
                 
@media screen and (max-width: 414px){
div.custom-author-profile-flex-filter .customs-author-profile-img,div.custom-author-profile-flex-filter .author-description{flex-basis: 100%;}
div.custom-author-profile-flex-filter .author-description{padding-left:0;margin-top:2rem}
}

Der vollständige Code

add_action('wp','loadAuthorProfile',1);
function loadAuthorProfile(){
	if(is_singular()){
		add_action('comment_form_before','addCustomAuthorProfile',2);
	} // close if

	if(is_home() || is_front_page()){
		add_action('loop_end','addCustomAuthorProfile',1);
	} // close if
	
	if(is_author()){
		add_action('loop_start','addCustomAuthorProfile',1);
	}
} // close function	

function addCustomAuthorProfile(){
add_action('wp_footer','addCustomAuthorProfileCSS',100);
$currentAuthorID = get_the_author_meta('ID');
$currentAuthorName = get_the_author_meta('display_name',$currentAuthorID);
$currentAuthorEmail = get_the_author_meta('user_email',$currentAuthorID);
$currentAuthorAvatar = get_wp_user_avatar($currentAuthorID,150,'center');
$currentAuthorDescription = wpautop(get_the_author_meta('description',$currentAuthorID));
$currentAuthorArchiveLink = get_author_posts_url($currentAuthorID);
$currentAuthorCompany = get_the_author_meta('company',$currentAuthorID);
$currentAuthorSlogan = get_the_author_meta('slogan',$currentAuthorID);
$currentAuthorTwitter = get_the_author_meta('twitter',$currentAuthorID);
$currentAuthorFacebook = get_the_author_meta('facebook',$currentAuthorID);
$currentAuthorLinkedin = get_the_author_meta('linkedin',$currentAuthorID);
$currentAuthorInstagram = get_the_author_meta('instagram',$currentAuthorID);
$currentAuthorPinterest = get_the_author_meta('pinterest',$currentAuthorID);
$currentAuthorXing = get_the_author_meta('xing',$currentAuthorID);
$currentAuthorWebsite =  get_the_author_meta('url',$currentAuthorID);

/* some extra love for displaying a cleaned up url */
	$currentAuthorWebsiteDisplay = $currentAuthorWebsite;
	$currentAuthorWebsiteDisplay = trim($currentAuthorWebsiteDisplay, '/');
	if (!preg_match('#^http(s)?://#', $currentAuthorWebsiteDisplay)) {
		$currentAuthorWebsiteDisplay = 'http://' . $currentAuthorWebsiteDisplay;
	}
	$currentAuthorWebsiteDisplayParts = parse_url($currentAuthorWebsiteDisplay);
	$currentAuthorWebsiteDisplay = preg_replace('/^www\./', '', $currentAuthorWebsiteDisplayParts['host']);
/* some extra love for displaying a cleaned up url */
	
$outputAuthorPanel = '';
$outputAuthorPanel .= '<section class="custom-author-profile custom-author-profile-type' . $currentAuthorID . '">';
$outputAuthorPanel .= '<div class="custom-author-profile-flex-filter">';
$outputAuthorPanel .= '<div class="customs-author-profile-img">';
$outputAuthorPanel .= $currentAuthorAvatar;
if(!empty($currentAuthorWebsite)){
		$outputAuthorPanel .= '<p class="customs-author-profile-url"><a target="_blank" href="' . $currentAuthorWebsite . '">' . $currentAuthorWebsiteDisplay. '</a></p>';
	}
$outputAuthorPanel .= '<ul class="customs-author-profile-contact-data">';
$outputAuthorPanel .= '<li><a target="_blank" href="mailto:'. $currentAuthorEmail . '"><i class="fas fa-envelope"></i></a></li>';
	if(!empty($currentAuthorLinkedin)){
		$outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorLinkedin . '"><i class="fab fa-linkedin-in"></i></a></li>';
	}
	
	if(!empty($currentAuthorXing)){
		$outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorXing . '"><i class="fab fa-xing"></i></a></li>';
	}
	
	if(!empty($currentAuthorFacebook)){
		$outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorFacebook . '"><i class="fab fa-facebook-f"></i></a></li>';
	}
	
	if(!empty($currentAuthorTwitter)){
		$outputAuthorPanel .= '<li><a target="_blank" href="https://twitter.com/' . $currentAuthorTwitter  . '"><i class="fab fa-twitter"></i>
</a></li>';
	}
	
	if(!empty($currentAuthorInstagram)){
		$outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorInstagram  . '"><i class="fab fa-instagram"></i>
</a></li>';
	}
	
	if(!empty($currentAuthorPinterest)){
		$outputAuthorPanel .= '<li><a target="_blank" href="' . $currentAuthorPinterest  . '"><i class="fab fa-pinterest-p"></i>
</a></li>';
	}
	
$outputAuthorPanel .= '</ul>';

if($currentAuthorID == 123){
	$outputAuthorPanel .= '<p><strong>Brauchst du Hilfe bei Deinem Blog? Gern schicke ich Dir ein individuelles Angebot. Bitte kontaktiere mich hierzu unter <a target="_blank" href="mailto:blog@justyumyum.de">blog@justyumyum.de</a>.</strong></p>';
	}
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '<div class="author-description">';

if($currentAuthorID == 123){
	$outputAuthorPanel .= '<hgroup><h5>Hier schreibt</h5><h4>' . $currentAuthorName . '</h4></hgroup>';
	} else {
		$outputAuthorPanel .= '<hgroup><h5>Ein Gastbeitrag von</h5><h4>' . $currentAuthorName . '</h4></hgroup>';
	}

$outputAuthorPanel .= '<div class="">' . $currentAuthorDescription . '</div>';

if($currentAuthorID == 123){
	$outputAuthorPanel .= '<p><a href="' . $currentAuthorArchiveLink . '">Weitere Artikel von ' . $currentAuthorName . '</a></p>';
	} else {
		$outputAuthorPanel .= '<p><a href="' . $currentAuthorArchiveLink . '">Weitere Artikel von ' . $currentAuthorName . '</a></p>';
	}
	
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '</div>';
$outputAuthorPanel .= '</section>';

echo($outputAuthorPanel);

} // close function	

function addCustomAuthorProfileCSS(){
	if(is_author()){
		echo('	<style id="custom-author-profile-archive">
					header.page-header {display: none;}
				</style>
		');
	} // close if
	
	echo('	<style id="custom-author-profile-general">
				section.custom-author-profile {background-image: url(https://static2.meineseite.de/wp-content/hintergrundbild.jpg);color: #fafafa;background-position: center;background-repeat: no-repeat;background-size: cover;margin-top: 2.5rem;}
				div.custom-author-profile-flex-filter {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items:flex-start;align-content: flex-start;background-color:rgba(0,0,0,.8);padding: 1rem;border: 1px solid #a4a4a4;}
				div.custom-author-profile-flex-filter p{font-size:0.85rem;margin-bottom:0}
				div.custom-author-profile-flex-filter a{color:#fff;text-decoration:underline}
				div.custom-author-profile-flex-filter .customs-author-profile-img{flex-basis: 25%;flex-grow:1;flex-shrink:1;align-self:flex-start;}
				div.custom-author-profile-flex-filter .customs-author-profile-img img.avatar{border:2px solid #fafafa}
				div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data {list-style: none;text-align: center;}
				div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data li {display: inline-block; margin-left: 1rem;margin-right: 1rem;}
				div.custom-author-profile-flex-filter .customs-author-profile-img ul.customs-author-profile-contact-data li a,
				div.custom-author-profile-flex-filter .customs-author-profile-img p.customs-author-profile-url a{color:#fafafa;}
				div.custom-author-profile-flex-filter .customs-author-profile-img p.customs-author-profile-url {text-align: center;margin-bottom: 1rem;}
				div.custom-author-profile-flex-filter .author-description {flex-basis:75%;flex-grow:1;flex-shrink:1;align-self:flex-start;padding-left: 2rem}
				div.custom-author-profile-flex-filter .author-description hgroup h4,
				div.custom-author-profile-flex-filter .author-description hgroup h5{margin-top:0;margin-bottom:0}
				div.custom-author-profile-flex-filter .author-description h6{margin-top: 0;font-weight: 300;}
				div.custom-author-profile-flex-filter .author-description p {margin-bottom: 1.75rem;}
				
				@media screen and (max-width: 414px){
					div.custom-author-profile-flex-filter .customs-author-profile-img,div.custom-author-profile-flex-filter .author-description{flex-basis: 100%;}
					div.custom-author-profile-flex-filter .author-description{padding-left:0;margin-top:2rem}
		
				}
			</style>');
}

Ich habe zudem die Feld im Nutzerprofil erweitert, sodass ich beziehungsweise Gastautoren sowohl einen Slogan als auch Links auf ihr Linkedin- oder Xing-Profil hinterlegen können und dieses dann auch in der Autorenbox erscheint.

Wie Du ein Nutzerprofil um beliebige Informationen erweiterst, erfährst Du unter WordPress – Wie Du Benutzerprofilen eigene Felder hinzufügst.

Exkurs: Gravatar.com & DSGVO

Aufgrund der datenschutzrechtlichen Implikationen, die spätestens mit der Datenschutzgrundverordnung aus der Verwendung von Gravatar.com zur Anzeige von Avataren entstehen können, habe ich auf diese Art der Einbindung auf BLOGGERWISSEN vollständig verzichtet.

Da ich auf Avatare in den Kommentaren sehr gut verzichten kann und lediglich den Gastautoren ein Profilbild zur Verfügung stellen möchte, nutze ich dafür das Plugin WP User Avatar.

Wenn Du aber nicht auf deren Einbindung von Gravatar-Avataren verzichten möchtest/willst, kann es hilfreich sein, dass Plugin Avatar Privacy zu installieren. Dieses Plugin soll deren datenschutzkonforme Nutzung ermöglichen.

Schreibe einen Kommentar

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