Sehr viele Blogs haben heutzutage eine Autorenbox am Ende ihrer Artikel, um wichtige Informationen über den Autor eines Artikels zu zeigen. Das ist zu einem der größten Trends überhaupt in WordPress-Blogs geworden. In diesem Artikel werden wir zeigen, wie man eine solche Autorenbox relativ einfach ohne Zuhilfenahme eines Plugins erstellt. Zum Erstellen der Box werden wir WordPress-eigene Features benutzen, die zudem noch nach eigenem Belieben erweitert werden können.
-
PowerPoint
Einen bleibenden Eindruck bei den Kollegas hinterlassen.
-
Schriftarten
Charakter zeigen mit Schriftarten, die nicht 08/15 sind.
-
Web Vorlagen
Lass die Arbeit andere machen und bau Dir eine Website im Nu.
Das Grundgerüst unserer Autorenbox
Zur Erstellung und Anzeige der Autorenbox werden wir die Daten aus dem jeweiligen Benutzerprofil auslesen, die wir mittels eines Code-Snippets noch etwas ergänzen, um auch Links zu Social Media-Diensten, wie zum Beispiel Twitter, Facebook und Google+ anzeigen zu können.
Manage WordPress Contact Fields
Dieses Snippet schreiben Sie bitte in die functions.php
des betreffenden Themes (wp-content/themes/Ihr Theme).
/**
* Manage WordPress contact fields.
* Usage:
require './class.TTT_Contactfields.php';
$TTT_Contactfields = new TTT_Contactfields(
array (
'Twitter'
, 'Facebook'
, 'Xing'
, 'Country'
, 'City'
, 'Latitude'
, 'Longitude'
)
);
* @author "Thomas Scholz" http://toscho.de
* @version 1.0
* @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
*/
$TTT_Contactfields = new TTT_Contactfields(
array (
'Twitter'
, 'Facebook'
, 'GooglePlus'
)
);
class TTT_Contactfields {
public
$new_fields
, $active_fields
, $replace
;
/**
* @param array $fields New fields: array ('Twitter', 'Facebook')
* @param bool $replace Replace default fields?
*/
public function __construct($fields, $replace = TRUE)
{
foreach ( $fields as $field )
{
$this->new_fields[ mb_strtolower($field, 'utf-8') ] = $field;
}
$this->replace = (bool) $replace;
add_filter('user_contactmethods', array( $this, 'add_fields' ) );
}
/**
* Changes the contact fields.
* @param $original_fields Original WP fields
* @return array
*/
public function add_fields($original_fields)
{
if ( $this->replace )
{
$this->active_fields = $this->new_fields;
return $this->new_fields;
}
$this->active_fields = array_merge($original_fields, $this->new_fields);
return $this->active_fields;
}
/**
* Helper function for your theme
* @return array The currently active fields.
*/
public function get_active_fields()
{
return $this->active_fields;
}
}
Der Code ergänzt das Userprofil (Benutzer => Dein Profil) um die Möglichkeit der Anzeige der Twitter-, Facebook- und Google+ Profile.
Ein weiteres kleines Code-Snippet liest die Daten aus dem Benutzerprofil aus und sorgt für die Anzeige des Autorenprofils als Box unter dem Beitrag. Auch dieses kleine Snippet schreiben Sie bitte in die functions.php des Themes.
/**
* WordPress Author Box.
* Usage: Call this function with <?php andys_author_box(); ?> wherever you want to display the box (posts and/or pages)
* @author "Andreas Hecht" http://www.hechtmediaarts.com
* @version 1.0
* @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
*/
function andys_author_box() {
?>
<?php if ( get_the_author_meta( 'description' ) ) : ?>
<div>
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'revothemes_author_bio_avatar_size', 60 ) ); ?>
<div>
<h3><?php echo _e('Author: ', 'andysthemes'); the_author(); ?></h3>
<p><?php the_author_meta( 'description' ); ?></p>
<div>
<?php if ( get_the_author_meta( 'user_url' ) ) : ?>
<p><a href="<?php the_author_meta('user_url'); ?>"><?php echo _e('Website', 'andysthemes'); ?></a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'twitter' ) ) : ?>
<p> | <a href="https://twitter.com/<?php the_author_meta('twitter'); ?>">Twitter</a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'facebook' ) ) : ?>
<p> | <a href="http://www.facebook.com/<?php the_author_meta('facebook'); ?>">Facebook</a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'googleplus' ) ) : ?>
<p> | <a href="https://profiles.google.com/<?php the_author_meta('googleplus'); ?>">Google+</a></p>
<?php endif; ?>
</div><!-- end .authorsites -->
</div><!-- end .author-description -->
</div><!-- end .author-info -->
<?php endif; // get_the_author_meta( 'description' ) ?>
<?php
}
Dieser wohldurchdachte kleine Schnipsel sorgt für die Anzeige eines Gravatars, der biographischen Angaben und der Felder für Webseite, Twitter, Facebook und Google+.
Im Theme angezeigt wird die Autorenbox jedoch nur, wenn auch das Feld für die biographischen Angaben ausgefüllt ist. Ebenfalls werden auch die anderen Felder nur bei Bedarf angezeigt, also wenn sie ausgefüllt sind.
Das Design der Autorenbox
Damit unsere neue Autorenbox schick aussieht, bedarf es eines gewissen Styling. Also fügen wir noch einige Zeilen CSS der style.css hinzu (wp-content => themes => Dein Theme => style.css) unseres Themes hinzu.
/* Author Info Box */
.author-info {
position: relative;
background: #f2f2f2;
border: 1px solid #ddd;
padding: 10px;
margin: 20px 0px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.author-info img.avatar {
float: left;
padding: 3px;
border: 1px solid #ccc;
position: relative;
}
.author-info .author-description {
padding-left: 80px;
}
.author-info h3 {
margin: 0px 0px 5px 0px;
font-size: 14px;
}
.author-info p {
margin: 0px;
font-size: 12px;
line-height: 1.4em;
color: #555;
}
.authorsites p {
float: left;
margin-top: 5px;
}
Autorenbox in das Theme einfügen und aufrufen
Als abschließende Arbeit bleibt nur noch der Aufruf der Autorenbox an der richtigen Stelle im Theme. Hierzu öffnen wir die single.php (wp-content / themes / Dein Theme => single.php) und suchen folgende Stelle:
<?php the_content(); ?>
Bei einigen Themes kann sich dieser Tag durchaus auch in einer anderen Datei befinden, wie zum Beispiel loop.php
oder content-single.php
. Wo genau man suchen muß, hängt vom jeweiligen Theme ab, jedoch ist ein kurzes Studium der single.php
immer aufschlussreich.
Haben wir den Content-Tag gefunden, wird nun genau darunter der Tag eingefügt, der für den Aufruf der Autorenbox sorgt:
<?php andys_author_box(); ?>
Mit diesem Tag lässt sich die Autorenbox an jeder beliebigen Stelle im Loop aufrufen, oder auch in anderen Dateien wie der page.php, die für die Darstellung der Seiten zuständig ist. Der folgende Screenshot zeigt, wie das Benutzerprofil ausgefüllt werden muss.
Unsere fertige Autorenbox sieht nun wie folgt aus:
Fazit
Mit relativ wenig Aufwand und vor allem ohne Plugin haben wir nun eine professionell aussehende Autorenbox geschaffen, die einem Blog den letzten Schliff geben kann.
(dpe)
6 Antworten auf „WordPress manuell: Autorenbox ohne Plugin erstellen“
Hallo Andreas,
super, Dein nach wie vor aktueller Tipp. Danach hab ich gesucht!
Frage: Was muss ich der Codezeile hinzufügen, wenn ich möchte, dass sich die Sozialen Medien jeweils in einem neuen Tab öffnen?
Hast Du den passenden Tipp für mich?
Herzliche Grüße
Eva
Na toll, ich füg den ersten Code ein und nun komm ich nicht mehr in WordPress rein!!! Die Seite bleibt einfach weiß… Weder mein Admin Tool, noch die Seite an sich.
Wie mach ich sowas bitte rückgängig?!
Sehr schöner Artikel, das hat mir sehr geholfen! Interessant fande ich auch die Dynamisierung über ein Benutzermenü, dass man nicht immer im Code rumfuchteln muss!
Das ist wirklich klasse!
Und gleichzeitig habe ich eine Möglichkeit gefunden, User Profil-Seite um benötigte Felder zu erweitern :-)
Danke!
Wow! Das nenn ich mal eine ausführliche Anleitung. Wie lange hast du denn dafür gebraucht? Immer wenn ich solche riesige Artikel erstellen muss, brauch ich mindestens 2 Tage Zeit..