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.

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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | /** * 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /** * 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /* 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)
Andreas Hecht
Andreas Hecht macht mit seinem Startup Hecht MediaArts qualitativ hochwertiges und kreatives Webdesign, ist WordPress Security Spezialist und entwickelt außergewöhnliche Premium WordPress Themes.
- Web |
- Google+ |
- More Posts (9)


[...] Artikel von mir zeige ich auf, wie einfach und effektiv man eine solche Autorenbox erstellen kann.Zum Artikel: WordPress manuell: Autorenbox ohne Plugin erstellen Tweet Geschrieben von Andreas Hecht am Juli 31, 2012 DrWeb.deKeine KommentareWerbungHinterlasse [...]
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..
Das ist wirklich klasse!
Und gleichzeitig habe ich eine Möglichkeit gefunden, User Profil-Seite um benötigte Felder zu erweitern :-)
Danke!
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!