Autoren und ihre Profilseite in WP

Autoren Profile in WordPress gut darstellen
Autoren Profile in WordPress gut darstellen

Autoren sind wichtig, ohne Autoren kein Inhalt. Die Autorenseite in WordPress kann gut erweitert werden und zwar ohne Plugin. Bloß einige Felder in der functions.php angegeben und schon kann man unendlich viel INFO auf der Autoren Profilseite unterbringen.

Update 2013: Thomas aka Toscho stellt eine wunderbare Klasse zur Verfügung, die ich hier zeige und erkläre.

Ich zeige hier

  1. wie man zusätzliche Felder für das Profil in WP einfügt.
  2. erkläre wie Du diese auch ändern kannst.
  3. erkläre wie man diese dann in der author.php darstellt.
  4. wie man nur Felder anzeigt, die auch ausgefüllt wurden.
  5. zeige wie man die Anzahl der Artikel eines Autors frei wählen kann und dennoch eine funktioniere „Weiterblätterei“ also Pagination hat.
  6. zeige wie man auch die statischen Seiten, die ein Autor erstellte anzeigen kann.
  7. und ich führe einige CSSKlassen meiner Beispiel author.php an.
  8. Und last but not least – ganz unten gibts was kostenfrei :-)

Aufgrund vieler Code Beispiele ist dieser Artikel lang, – doch es zahlt sich aus :-)

Zusätzliche Autoren Felder in der Profil Seite von WP

Autoren Profil Felder
Autoren Profil Felder

Thomas Scholz aka Toscho schrieb dazu eine wunderbare „Klasse“ class.TTT_Contactfields.php. Diese findest Du auf Github.

Diese neue Kontaktfelder Klasse nutzen

  1. Empfohlene Verwendung dieser Klasse => nutze die Toolbox von Sergej und mache daraus ein „Modul“. Wie das geht hat Sergej in seinem Artikel zum Plugin beschrieben.
  2. Kopiere den Inhalt dieser Datei auf Github in die functions.php des verwendeten Themes. Aber Achtung bei einem Theme Wechsel sind dann die neuen Felder für Autoren weg (!).

Erklärung des Codes für diese Zusatzfelder

Diese Erklärung ist für php Laien, andere sehen sowieso wie es geht…

Wichtig ist dieser Teil des Codes für dich. Hier kannst du die vorhandenen Feldnamen ändern oder neue hinzufügen. Ich empfehle kurze Namen, aussagekräftig und einzelne Hauptwörter. Also kein Bindestrich, Unterstrich, das macht Dinge unnötig kompliziert.

$TTT_Contactfields = new TTT_Contactfields(
array (
'Twitter'
, 'Facebook'
, 'Xing'
, 'Country'
, 'City'
, 'Latitude'
, 'Longitude'
)
);


In einem „array“ werden Angaben mit einem Koma getrennt und zwischen Hochkomata geschrieben. Die letzte Angabe hat kein Koma mehr … und muss vor der ersten schließenden Klammer stehen..

Beispiel…

$TTT_Contactfields = new TTT_Contactfields(
array (
'Twitter'
, 'Google'
, 'Xing'
, 'Facebook'
, 'LinkedIn'
, 'Pinterest'
, 'Website2'
, 'Website3'
, 'Website4'
)
);

Wie nutze ich diese zusätzlichen Felder in der author.php

Zuerst musst Du der author.php überhaupt sagen, dass es da um einen ganz bestimmten Nutzer geht.

Du änderst den Aufruf des headers in der author.php so…

<?php  get_header(); 
if(isset($_GET['author_name'])) :
        $curauth = get_user_by('slug', $author_name);
else :
        $curauth = get_userdata(intval($author));
    endif; ?>

Absolut simple diese Variable curauth gibt uns immer das was wir brauchen.

Einige Beispiele:


//bringt die URL des User, die er bei "Kontaktinfo Website" angegeben hat.
$curauth->user_url 
//zeigt was er in das Feld "Über Dich" Beschreibung angab.
$curauth->description 
//bringt die Website, die in das Feld Website2 kam ....
$curauth->website2
// die URL zum G+ Profil....
$curauth->google 

das Autoren Profil soll aber Felder nur anzeigen, die ausgefüllt wurden

Nun dann fragt man eben pro Feld, ob es nicht leer ist….


<?php if (!empty($curauth->description)) {  


So nun der Code der author.php bis zu den Artikeln


<?php  get_header(); 
if(isset($_GET['author_name'])) :
        $curauth = get_user_by('slug', $author_name);
else :
        $curauth = get_userdata(intval($author));
    endif; ?>


<header class="page-header author">
<?php $thisauthor = get_userdata(intval($author)); ?>

<?php if(function_exists('get_avatar')) { echo get_avatar($thisauthor->user_email, 80, "" ); } ?> 
<h2 class="author-title">
<a  class="inline" href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></a>
</h2> 
<span class="meta-author">schrieb bisher <em><?php the_author_posts(); ?></em> Artikel :-)</span>
</header>


<article <?php post_class('clearfix'); ?>>
<div class="author-meta">
<?php if (!empty($curauth->description)) {  
echo'<p><b>So beschreibt sich ', $curauth->first_name, ' selbst</b></p>';  
echo'<p>',$curauth->user_description,'</p>';}?>
<?php if (!empty($curauth->user_url)) { 
echo'<p><b>',$curauth->first_name, ' im Web</b></p>'; 
echo'<p>Website <a  rel="me"  class="website" href="',$curauth->user_url,'">',$curauth->user_url,'</a></p>';}?>
<?php if (!empty($curauth->website2)) { 
echo'<p>2.te Website <a  rel="me"  class="website2" href="',$curauth->website2,'">', $curauth->website2,'</a></p>';}?>
<?php if (!empty($curauth->website3)) { 
echo'<p>3.te Website <a  rel="me"  class="website3" href="',$curauth->website3,'">', $curauth->website3,'</a></p>';}?>
<?php if (!empty($curauth->website3)) { 
echo'<p>4.te Website <a  rel="me"  class="website3" href="',$curauth->website4,'">', $curauth->website4,'</a></p>';}?>

<?php if (!empty($curauth->google)) { 
echo'<p>Einkreisen mit <a rel="me" class="gplus" href="',$curauth->google,'">G&#43;</a></p>';}?>
<?php if (!empty($curauth->twitter)) { 
echo'<p>Verfolge auf <a  rel="me"  class="twitt" href="',$curauth->twitter,'">Twitter</a></p>';}?>
<?php if (!empty($curauth->facebook)) { 
echo'<p>Like me  <a  rel="me"  class="facb" href="',$curauth->facebook,'">Facebook</a></p>';}?>
<?php if (!empty($curauth->pinterest)) { 
echo'<p>Pin me  <a  rel="me"  class="pin" href="',$curauth->pinterest,'">Pinterest</a></p>';}?>


<?php if (!empty($curauth->xing)) { 
echo'<p>Kontakt bei  <a rel="me" class="xing" href="',$curauth->xing,'">XING</a></p>';}?>
<?php if (!empty($curauth->linkedin)) { 
echo'<p>Kontakt bei  <a rel="me" class="linked" href="',$curauth->linkedin,'">LinkedIn</a></p>';}?>
</div></article>

Du siehst hier ziemlich gut in dem Code was Du ändern kannst – bist Du php Unerfahren, dann ändere eines lade das Template hoch und schau, ob ein Fehler kam.
Wenn ja, dann geh wieder zum Original zurück und schau ganz genau zuerst den Code an.

die Anzahl der Artikel eines Autors frei wählen

Mir diesem Loop kannst Du die Anzahl der Artikel frei wählen, denn manchmal zeigt man pro Archiv oder Kategorie eine andere Anzahl an Artikel an, als man hier haben mag.

Und dieser Loop funktioniert mit der Weiterblätterei // Pagination einwandfrei!

 <?php 
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_query();
    $wp_query->query(array('showposts' =>10,
              'post_type' =>post, 
              'author' => $curauth->ID, 
              'paged' => $paged ));
 while ($wp_query->have_posts()) : $wp_query->the_post();
?>

Das was Du anzeigen magst ....

<?php endwhile;  ?>
 <?php $wp_query = null; $wp_query = $temp;?> 

Bei showposts kannst Du Deine Anzahl eintragen. „-1“ zeigt alle Artikel an, die der Autor je geschrieben hat.

Statische Seiten des Autors anzeigen mit oder ohne Navigation unterhalb

Manchmal magst Du die statischen Seiten anzeigen, die ein Autor geschrieben hat.

Achtung: zeigst Du nur statische Seiten an, kannst Du auch die Pagination nutzen.
Aber Artikel und statische Seiten „paginiert“ ergibt Chaos.


<?php 
$wp_query = null; $wp_query = $temp;
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_query();
$wp_query->query(array('showposts' => 10,
          'post_type' =>page, 
          'author' => $curauth->ID, 
          'paged' => $paged ));?>

<header class="page-header">
<h3>Seiten von  <?php echo $curauth->first_name; ?></h3></header>
 

 <!--dein html-->
 <?php while ($wp_query->have_posts()) : $wp_query->the_post();?>

 <!-- das was du anzeigen magst von den Seiten -->

<?php endwhile;  $wp_query = null; $wp_query = $temp; ?>
 <!--dein html ende-->


die Navigation für die vorherigen und nächsten Artikel


<nav id="nav-below">
<p><span class="alignright"> 
   <?php  previous_posts_link( '| Neuere Eintr&auml;ge &raquo;') ; ?>
</span><span class="alignleft">
<?php next_posts_link( '&laquo; vorherige Eintr&auml;ge |' ) ; ?>
</span> </p></nav>
 

CSS Klassen zum Designen der Autoren Seite

Das Bild – der Avatar
folgende CSS Klassen stehen da zur Verfügung: .avatar .avatar-80 (abhängig von der Größe des Avatars) .photo .avatar-default
Da man meist die Klasse .avatar bereits bei den Kommentaren angesprochen hat, empfiehlt es sich hier auf die übergeordnete CSS Klasse zurückzugreifen. In dem Fall .page-header.

Das ganze sieht in der Style.css dann so aus.


.page-header .avatar{}


Und die CSS Klassen bei den Links sind für Hintergrundbilder in einem CSS Sprite eine gute Hilfe.


a.website{}
a.website2{}
a.website3{}
a.gplus{}
a.twitt{}
a.facb{}
a.pin{}
a.xing{}
a.linked{}


Download:author.php

Artikelhistorie:
Erstveröffentlichung: 17. August 2011

und die Autorin des Artikels freut sich übers Twittern, +1 en und weitersagen
13

13 Beiträge zu “Autoren und ihre Profilseite in WP

  1. Kommentar Autor
    Michael
    Kommentar

    Danke für den guten Eintrag. Wirklich gut geschrieben. Sehr verständlich. Selbst für den „Laien“ find ich.

    Gruß:Michael

  2. Kommentar Autor
    Chris Beyeler
    Kommentar

    Danke für den super Artikel. Das habe ich schon lange gesucht. Ich werde versuchen es einzubauen!

  3. Kommentar Autor
    Marcel
    Kommentar

    Danke für diesen Beitrag, aber mir ist ein Sicherheitsleck in der Autoren-URL aufgefallen. Ist es möglich die Autoren-URL als realen Namen auszugeben?

    Ich gehe mal davon aus, dass dein Login der Autoren-URL Entspricht? ;-)

  4. Kommentar Autor
    Monika
    Kommentar

    hi Marcel, mein Login entspricht keineswegs der Autorenurl ;)
    user_login sollte und muss nicht user_nicename sein ;) und beides muss nicht mit dem angezeigten Namen übereinstimmen
    also drei verschiedene Dinge, sollten zur Sicherheit schon reichen …

  5. Kommentar Autor
    Monika
    Kommentar

    nein @Webberei warum soll das Futsch sein?
    Es ist immer wieder da, weil es doch in der Datenbank dann steht.

  6. Kommentar Autor
    Dom
    Kommentar

    Vielen Dank, sowas habe ich lange schon gesucht, das werde ich gleich mal einbauen ;)

  7. Kommentar Autor
    Markus
    Kommentar

    Wieder mal ein klasse Tipp von Dir, Monika :-)

    Ich habe das bei mir schon länger umgesetzt, indem ich folgenden Code in die functions.php schreibe:

    /** Zusätzliche Kontaktfelder für die Userprofile, Dank an Pascal Birchler vom Schweizer WordPress Magazin */
    function wpm_add_contactmethods( $contactmethods ) {
    	// add ICQ
    	$contactmethods['icq'] = 'ICQ';
    
    	// add Skype
    	$contactmethods['skype'] = 'Skype';
    
    	// add Twitter
    	$contactmethods['twitter'] = 'Twitter';
    	
    	// add identi.ca
    	$contactmethods['identica'] = 'Identi.ca';
    	
    	// add Facebook
    	$contactmethods['facebook'] = 'Facebook';
    	
    	// add Google+
    	$contactmethods['googleplus'] = 'Google+ Profile-ID';
    	
    	// add Linux Counter UID
    	$contactmethods['linuxcounter'] = 'Linux Counter UID';
    	
    	// add Flattr
    	$contactmethods['flattr'] = 'Flattr';
    
    	return $contactmethods;
    }
    add_filter(
    'user_contactmethods','wpm_add_contactmethods',10,1
    );
    

    Was da nun abgefragt wird und eingegeben werden kann, ist natürlich wie auch in Deinem Beispiel sehr flexibel.

    Insgesamt hab ich das für einen Multiautoren-Blog umgesetzt, und frage die Daten dann um die ID des Autors ergänzt ab, und wiederhole das dann für alle Autoren. Hab ich mal hier beschrieben:
    http://www.cowboy-of-bottrop.de/2012/01/22/autoren-infos-aus-der-datenbank/

  8. Kommentar Autor
    Andreas Zech | webMarketing-Berater
    Kommentar

    Toller Beitrag !

    Wenn Du jetzt mir sagen könntest, wo ich den URL-Link author ändern kann, wäre das wunderbar. Das sieht sonst einfach zu englisch aus.

  9. Kommentar Autor
    Frank
    Kommentar

    Hallo Monika, eine ausführliche Anleitung, nur leider komme ich damit nicht klar.
    Ich kann in meiner Seite einfügen was und wie ich will – es fehlt regelmäßig ein Teil der Ausgabe.

    Wenn es für dich OK wäre, mir dabei zu helfen, so wäre das super.
    Das Gerüst der Seite steht: tekshrek.com/authors.

    Es sollen die Autoren, deren aktuellsten 5 Artikel und das Autorenfeld angezeigt werden.
    Also so, wie es oben schon beschrieben ist.

    Danke und viele Grüße
    Frank

  10. Kommentar Autor
    Katjana
    Kommentar

    Hallo Monika,
    danke für das Tutorium. Ich bin ein kompletter Neuling in Sache WordPress und bin daher ziemlich unwissen. Jedoch habe ich eine Frage, wäre es denn möglich, dass man gleich zwei Profilbilder hat. Also ein kleines, welches auf der Teamseite erscheint und wenn man auf eine volle Profilansicht klickt, das ein etwas größeres bzw. auch anderes Profilbild dann genutzt werden kann? Ich habe eine kleine Teamseite und darum wäre es mir wichtig es so zu handhaben.

    Und dann habe ich noch eine ganz bescheidene Frage, wie bekomme ich die URL zu meiner kompletten Profilseite heraus?

    Liebe Grüße und besten Dank im Voraus
    Katjana

  11. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Tatjana
    ich bin erst jetzt wieder daheim, daher kommt meine Antwort später:
    das Autorenbild wird zu99% anhand der EMail Adresse des Benutzers genommen.
    Datenbanken sind doof, gibt man ihnen dann 2 Bilder zu einer Emailadresse hat die Datenbank keine Ahnung mehr welches nun wann wo erscheinen sollte. D.h. eine simple Lösung gibts für 2 Autorenbilder nicht.
    Die volle URL zur kompletten Profilseite…
    ich vermute du meinst das Frontend, also zb sowas wie domainname/author/name.
    diese URL zeigen die Standardthemes an, daran kannst du sehen wie diese URl aufgebaut ist

    lg