WordPress: So erstellt man eine Autorenbox

Heute möchte ich euch zeigen, wie ihr eine Box mit Infos über den Autor, am Ende unter jedem Blog-Beitrag anzeigen lassen könnt. Gerade wenn mehrere Autoren in einem Blog ihre Artikel schreiben, ist das ein sinnvolle Sache. Seit einiger Zeit lassen wir auch so eine Autoren-Box unter jeden Beitrag anzeigen, damit die Leser genau wissen, wer denn den jeweiligen Blogbeitrag verfasst hat.Vermutlich gibt es auch ein Plugin, um eine Box mit Informationen über den Autor anzeigen zu lassen. Da aber Wordress von Hause aus eine solche Funktion mitbringt, halte ich das nicht für unbedingt notwendig. Außerdem lässt sich diese Funktion sehr leicht in das eigene Theme zu integrieren.

Einbau in das Theme

Als Erstes öffnet ihr die die single.php eures Themes und sucht die Schleife (Loop), wo der jeweilige Beitrag ausgegeben wird. Dann tragt  ihr unter <?php the_content …. ?> folgenden Code ein.

<?php if ( get_the_author_meta( 'description' ) ) : // Fragt ab ob die Autorenbeschreibung "Biographische Angaben" ausgefuellt wurde ?>
<div id="entry-author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'author_bio_avatar_size', 60 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<strong><?php printf( esc_attr__( '&Uuml;ber den Autor des Beitrages %s' ), get_the_author() ); ?></strong>
<?php the_author_meta( 'description' ); ?>
<div id="author-link">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'Alle Beitr&auml;ge von %s <span class="meta-nav"> ansehen</span>' ), get_the_author() ); ?></a>
<br />Website: <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a></div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #entry-author-info -->
<?php endif; ?>

Mit der Funktion get_avatar() wird das Gravatar des Autors angezeigt, mit the_author() sein öffentlicher Namen und mit the_author_meta() alle weiteren Benutzerinformationen, wie z. B. die Website. Hier lassen wir nur die Beschreibung „the_author_meta( ‚description‘)“ und die Website des Autors „the_author_meta(‚user_url‘)“ anzeigen. Das sieht dann ungefähr so aus:

Das Aussehen der Box

Jetzt sieht es noch nicht nach einer Box aus, daher werden wir mit CSS die Boxen etwas verschönern. Dazu schreiben wir die folgenden Zeilen in unsere style.css Datei des Themes.

#entry-author-info {
background:#F6FFDF;
border-top: 1px dashed #ccc;
clear: both;
font-size: 12px;
line-height: 20px;
margin: 24px 0;
overflow: hidden;
padding: 18px 20px;
}
#entry-author-info #author-avatar {
background: #fff;
border: 1px solid #e7e7e7;
float: left;
height: 60px;
padding: 11px;
}
#entry-author-info #author-description {
float: left;
width:500px
}
#entry-author-info #author-link {
float:right
}

So kann es aussehen, wenn die Box mit CSS richtig formatiert wurde.

Natürlich müsst ihr jetzt noch, in eurem Profil im WordPress Admin Bereich, eure Biografie eintragen, sonst wird die Autoren-Box nicht angezeigt. ;) Es wäre auch möglich, noch weitere Funktionen hinzuzufügen, wie z.B. den Twitternamen oder die Aim Adresse.

Über Susi
Moin, ich bin Susi. Hier auf www.netz-online.com veröffentliche ich Themen aller Art. Die Palette reicht von Shop-Vorstellungen, Produkttests, E-Commerce, Geld verdienen, Onlinehandel, Sparen, Technik und B2B.

9 Kommentare zu WordPress: So erstellt man eine Autorenbox

  1. Hallo Susi,

    ich möchte dir nochmal sehr für deine Hilfe danken. Freut mich dass du dein Wissen auch anderen zur Verfügung stellst.

    Für alle die sich eine Autorenbox wünschen, folgt einfach Susi`s Anweisungen.
    Es ist wirklich einfach und das Ergebnis kann sich sehen lassen.

    Für mich war es genau das was ich gesucht habe.

    Gruß
    Tina

  2. Sehr schöne Sache! :) Hatte bereits mit diversen Biograpie Plugins experimentiert, aber so richtig gefallen tut mir keines. Werde mich die Tage mal ran setzen und das ganze selbst machen, so wie es hier aufgezeigt wurde.

    Thx
    Dodo

  3. PS: Gibst du auch eine Anleitung, wie du diese coolen Follow und Subscribe Buttons eingebunden hast? Wäre es möglich, diese selbst zu verwenden? Gefallen mir sehr gut.

    LG
    Dodo

2 Trackbacks & Pingbacks

  1. Die 9 besten Blogposts der Woche #2 | Blog-Experiment
  2. Distanz zum Leser abbauen - Leser, Blogger, Chat, Zendesk, Autorenbox, Fragen - Blogger Szene Magazin - Blogszene.com

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen", um Ihnen das beste Surferlebnis möglich zu geben. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen zu verwenden fortzufahren, oder klicken Sie auf "Akzeptieren" unten, dann erklären Sie sich mit diesen.

Schließen