Sidebar
ein-/ausblenden

WordPress 2.5: Gravatare einfach nutzen

Plugin für WordPress SEO

Anzeige

default Gravatar

Die kommende Version 2.5 von WordPress hat den Gravatar-Dienst in den Core-Daten integriert. Einerseits nutzt man dies, um die Kommentarübersicht im Backend zu verschönern, andererseits kann man natürlich diese Funktion in das eigene Template integrieren und muss nicht Plugins nutzen oder andere Wege gehen.

Dazu genügt das Einfügen des folgenden Syntax und schon wird das kleine Bildchen ausgegeben.


<?php if(function_exists('get_avatar')) {
	echo get_avatar( $comment );
} ?>

Die Funktion get_avatar() (/wp-includes/pluggable.php) kann drei Parameter aufnehmen und so kann man recht gut Einfluss nehmen.

  • $id_or_email Mailadresse oder ID des Users, Kommentators
  • $size Größe des Gravatars in Pixel
  • $default Standardbild, wenn kein Gravatar dem User zugeordnet werden kann

get_avatar( $id_or_email, $size = '96', $default = '' )

Als Standard-Gravatar wird http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536 geladen, dass ist das Icon für die Mail-Adresse unknown@gravatar.com (MD5 verschlüsselt: d516503a11cd5ca435acc9bb6523536). Die Größe beträgt im Standard 96 Pixel. Es muss also lediglich der erste Parameter bzw. die Variable übergeben werden.

Die Ausgabe sind dann wie folgt aus.


<img alt='' src='http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96' class='avatar avatar-96 avatar-default' height='96' width='96' />

Somit kann mittels CSS auf das Design Einfluss genommen werden. Die Class avatar steht übergreifend bereit. Ebenso steht eine class mit der Größe des Gravatar bereit: avatar-GRÖßE. Vielfältige Formatierungen sind also möglich.

Wie einbauen?

Da immer wieder Nachfragen kommen, hier eine kurze Möglichkeit die Funktion einzubauen, für nicht PHPler.

Grundsätzlich muss der Code in die comments.php, die sorgt für die Ausgabe und das Formular der Kommentare. Natürlich kann das anders sein, bei dem einen oder anderen Theme, aber die Masse wird wohl so aussehen.

Die Funktion muss in die Ausgabe jedes einzelnen Kommentars, das bedeutet, dass sie in der Schleife <?php foreach ($comments as $comment) : > hinterlegt sein muss.
In der Regel nach dem li-Punkt, der die Ausgabe des einzelnen Kommentars ausgibt.

Suche:


  <ol class="commentlist">

    <?php foreach ($comments as $comment) : ?>

       <li &t;?php echo $oddcomment; ?&gt;id="comment-&alt;?php comment_ID() ?&gt;">

Ersetze:


  <ol class="commentlist"<

    <?php foreach ($comments as $comment) : ?>

      <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"<
        <?php echo get_avatar( $comment, 32 ); ?>

Einige Thems kommen ohne eine Liste aus (ol oder ul); die Ausgabe wird dort via div erzeugt. Wichtig ist nur, es muss in der Schleife sein.


<?php foreach ($comments as $comment) : ?>
. . .
<?php endforeach; /* end for each comment */ ?>

Formatierung via CSS

Die Formatierung könnte dann wie folgt aussehen. Dieser Syntax gehört in die style.css des verwendeten Themes.


.commentlist li .avatar {
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
	}
Artikel #618, 27. März 2008 · Tipps, WordPress · 48 Kommentare · Kommentar schreiben
Tags: , , ,
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

«
»

39 Kommentare und 9 Trackbacks zu „WordPress 2.5: Gravatare einfach nutzen“

  1. 1
    Kommentar von caschy
    27. März 2008 um 09:31

    Das Plugin "Easy Gravatars" ist bisher die wirklich einfachste Möglichkeit, die ich für mich fand - denn da muss _nichts_ geändert werden. Zumindest nicht in den von mir betreuten Blogs.
    http://dougal.gunters.org/

  2. 2
    Kommentar von Tony
    27. März 2008 um 10:51

    danke für den Beitrag!

    Hoffe die DE Version von 2.5 erscheint bald mal.

    mfg

  3. 3
    Kommentar von ricarda
    27. März 2008 um 14:01

    Bin zurück, hoffe habt ein nettes Osterfest verbracht, Energie getankt, damit noch viel neues von Euch kommt. Gute Artikel, sehr gut zu lesen;-)

  4. 4
    Kommentar von Markus
    27. März 2008 um 18:32

    Die Ausgabe sind dann wie folgt aus.
    <img alt='' src='http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96' class='avatar avatar-96 avatar-default' height='96' width='96' />


    Ich gehe dann aber mal davon aus, dass bis zum Final der Code auch noch valide wird? Also vor allem doppelte Anführungszeichen für die Werte. Andererseits, diesen Lapsus leistet sich WP in der aktuellen Version auch noch, wenn man z.B. Grafiken aus dem Upload/der Galerie in den Editor sendet.

  5. 5
    Pingback von Gesicht zeigen! » HVBX Blog
    31. März 2008 um 22:51
  6. 6
    Pingback von WordPress 2.5 Kompatibel? - [UpDate] : macreloaded[dot]com
    3. April 2008 um 20:36
  7. 7
    Pingback von Leere Signifikanten » Blogarchiv » Wordpress 2.5, ein persönliches Review
    7. April 2008 um 13:34
  8. 8
    Kommentar von ml
    11. April 2008 um 10:15

    Ich weiß immer noch nicht so recht, in welche Datei und an welche Stelle ich das Codeschnippsel einfügen muss. comments.php? Und an welcher stelle? Ich habe zwar das Prinzip verstanden, in den recent comments und im backend funktioniert das mit den Gravataren auch - nur halt auf der single.php bzw. in der comments.php - da mangelts noch :(

  9. 9
    Kommentar von Frank Bültge
    11. April 2008 um 12:00

    @ml: ich habe es mal exemplarisch erweitert, hoffe, dass es dir hilft.

  10. 10
    Kommentar von ml
    11. April 2008 um 15:53

    Damit geht es, vielen Dank.

  11. 11
    Kommentar von Frank Bültge
    14. April 2008 um 08:13

    Hallo,

    kann ich auf diese Weise einen Gravatar auch in die Single.php einbauen? Ich möchte für ein Magazin gerne auch in den Artikeln den Gravatar haben.

    Vielen Dank für Antwort.

    Beste Grüße
    Frank

  12. 12
    Kommentar von Frank Bültge
    14. April 2008 um 10:15

    @Frank: Die Funktion funktioniert immer im Loop, also auch in der single.php. Die Variable $comment muss in dem fall nur aus einem anderen Hintergrund gefüllt werden. Ich mache mal einen kleinen Artikel dazu fertig.

  13. 13
    Pingback von WP: Autoren mit Gravatar identifizieren - bueltge.de [by:ltge.de]
    14. April 2008 um 10:45
  14. 14
    Pingback von Gravatar-Funktion von Wordpress 2.5 nutzen
    14. April 2008 um 12:19
  15. 15
    Pingback von willsagen.de » Die Welt ein bisschen bunter machen.
    15. April 2008 um 12:24
  16. 16
    Pingback von » Gravatare einfach benutzen » BlogPimp
    15. April 2008 um 18:40
  17. 17
    Pingback von Nachtrag: Gravatars mit WordPress nutzen | Thomas Troppers Blog
    16. April 2008 um 09:36
  18. 18
    Kommentar von Ilja
    18. April 2008 um 12:36

    sehr netter Beitrag. Finde den Einsatz von Gravataren super, eine Bereicherung für jedes Blog.

  19. 19
    Kommentar von bee
    20. April 2008 um 14:26

    Herzlichen Dank! Ich steig grad auf WordPress um und das hier hat mir sehr geholfen.

    Eine Frage hätte ich noch: Was muss ich machen, damit das Gravatar nicht allein in einer Zeile steht und der Text darunter beginnt, sondern um den Gravatar herumfließt?

    Herzlichen Dank
    bee

  20. 20
    Kommentar von Frank Bültge
    20. April 2008 um 20:53

    bee » Dazu ist eine Formatierung via CSS nötig.

    .avatar {
float: left;
}
  21. 21
    Kommentar von bee
    22. April 2008 um 13:52

    Klappt, herzlichen Dank dir!

  22. 22
    Kommentar von nitnat
    24. April 2008 um 22:48

    toller artikel! eine frage habe ich aber noch:
    wie kann ich denn das Standardbild als relativen Bildpfad laden? Ich habe folgendes probiert:

    echo get_avatar( $comment, 40, '/images/avatar-default.jpg' );

    Funzt natürlich nicht.

  23. 23
    Kommentar von Jared
    28. April 2008 um 21:57

    Hallo Frank ;-)

    das würde mich auch interessieren!
    Kann man WordPress denn ein Standardbild geben? Also wenn jemand keinen Gravatar mit seiner Mailaddy verknüpft hat?
    Das würd mein neues Layout nicht ganz so sehr "sprengen" ;-)

    lg
    Jared

  24. 24
    Kommentar von Frank Bültge
    29. April 2008 um 08:25

    ja, lediglich den Paramter $default pflegen, wie oben beschrieben.
    $default = '/zum_bild/tets.jpg'

  25. 25
    Kommentar von nitnat
    29. April 2008 um 18:03

    $default = '/zum_bild/tets.jpg'

    funkioniert eben leider nicht.

    Dann erscheint nämlich folgendes in der Ausgabe an der Stelle des Standardbildes:
    http://www.gravatar.com/avatar/220ec4b21a1a87217c4418cb59c14465?s=40&d=/zum_bild/tets.jpg&r=G

    Mit einem absoluten Bildpfad wird das Bild richtig dargestellt. Deshalb auch meine Frage, ob es auch mit einem relativen Pfad machbar wäre.

  26. 26
    Kommentar von Frank Bültge
    29. April 2008 um 20:09

    @nitnat: versuche mal:

    <?php $gravatar_default = get_option('siteurl') . '/wp-content/pfad_zum_bild/images/avatar.gif'; ?>
<?php echo get_avatar( $comment, 32, urlencode($gravatar_default) ); ?>

    Konnte aus Zeitmangel nicht testen.

  27. 27
    Kommentar von nitnat
    29. April 2008 um 23:41

    jo, funktioniert! Allerdings ohne urlencode(), also folgendermaßen:

    <?php $gravatar_default = get_option('siteurl') . '/wp-content/pfad_zum_bild/images/avatar.gif'; ?>
<?php echo get_avatar( $comment, 32, $gravatar_default ); ?>

    herzlichen dank für deine hilfe!

  28. 28
    Kommentar von Jared
    1. Mai 2008 um 11:19

    Stimmt! das klappt super :-)
    Danke für die Hilfe

  29. 29
    Kommentar von Alex
    23. Mai 2008 um 14:55

    Hallo Frank,

    wie kann ich den ein eigenes Gravatar für Trackbacks einbinden? Hab da im Netz nichts zu gefunden...

    Vielen Dank
    Alex

  30. 30
    Kommentar von Andreas
    12. Juni 2008 um 17:34

    Ein super Beitrag! Damit konnte sogar ich als PHP-Anfänger problemlos meine Kommentare um diese "optische Funktion" erweitern. Ich sehe den Gravatar immer als Mehrwert für den User, da jeder nunmal auch gerne sieht, mit wem er kommuniziert. Die weiterführende Kommentare sind das berühmte Tüpfelchen auf dem i. Jetzt konnte ich sogar diesen grauen Standard-Gravatar durch einen besseren ersetzen. Ein dickes Lob in die Runde ;-)

  31. 31
    Kommentar von Peter
    27. Juni 2008 um 18:51

    Hallo Frank,
    dank Deiner Hilfe habe ich es endlich geschafft die Gravatare in den Kommentare einzubauen. Vielen Dank.
    In Kommentar 12 wurde bereits danach gefragt, wie es funktioniert, dass die Gravatare auch in den Artikeln erscheinen. Kannst Du das bitte erklären - bin absoluter PHP Newbie.

  32. 32
    Kommentar von Frank Bültge
    27. Juni 2008 um 22:06

    @Peter: schau in den weiteren Artikel

  33. 33
    Kommentar von Hokey
    9. August 2008 um 09:25

    Großartig! Vielen Dank für die Tipps!

  34. 34
    Pingback von Mitgebloggt » Gravatare in WP 2.5
    12. August 2008 um 09:44
  35. 35
    Kommentar von Mr. Quincy
    9. Dezember 2008 um 17:32

    Ich finde dieses Tutorital super, genauso wie den Rest der Homepage. Schade das er nicht für WordPress 2.6 ist...

  36. 36
    Kommentar von Frank Bültge
    10. Dezember 2008 um 07:43

    @Mr. Quincy: aber sicher geht das auch unter Versionen, die größer sind. Aufwärts ist in der Regel kein Problem, also einfach einbauen.

  37. 37
    Kommentar von Mr. Quincy
    10. Dezember 2008 um 14:01

    ah ok danke

  38. 38
    Kommentar von Bastian
    31. Dezember 2008 um 12:22

    Super Anleitung! Vielen Dank dafür!

  39. 39
    Kommentar von Dave
    6. Februar 2009 um 14:44

    Habe da mal eine Frage. Wie kann man Avatar für Trackbacks sowie Pingbacks auschalten, so das lediglich nur für Kommentare die Gravatar angezeigt werden?

    Hier wird ein Pingback angezeigt: http://www.jazzdrummerworld.com/blog/2009/02/04/finger-drums-der-spass-fur-drummer/#comment-442

    Nun möchte ich gerne das hier kein Gravatar angezeigt wird! Wie kann dies in der comments.php anpassen?

    Danke für die Hilfe...

  40. 40
    Kommentar von Frank Bültge
    6. Februar 2009 um 15:07

    Dazu musst du die comments.php umbauen und nach Pings/trackbacks und Kommentaren filtern, die Ausgabe dann jeweils dafür anpassen. Seit 2.7 ist das etwas anders, und vorher habe ich es mal erklärt.

  41. 41
    Kommentar von Chris Gerlach
    15. April 2009 um 00:02

    Hallo, ich bekomme das mit dem Avatar richtig anzeigen nicht hin. Bin zu lange aus dem 'Geschäft' ^^
    Wie Du siehst verdeckt das Avatar jeden Kommentar. Kannst Du mir da irgendwie helfen?
    Wäre nett ;)

  42. 42
    Kommentar von Alex
    30. April 2009 um 04:10

    ich hab den befehl genau so eingebaut, jedoch wird auf meiner seite für keinen nutzer das gravatar angezeigt :(

  43. 43
    Kommentar von °Tanka°
    15. Juni 2009 um 18:38

    Danke Danke Danke für Ihre Artikel. Nicht nur durch diesen Gravatar-Artikel bin ich etwas schlauer geworden ;-)
    Ich stecke regelrecht im Geburtskanal, was WordPress, PHP und CSS angeht. Als Theme nutze ich wp-andreas09.
    Dank Ihrer Artikel auf diesem Blog habe ich schon etwas auf die Beinchen gebracht. (Fehler habe ich -aus Unwissenheit- noch nicht entdeckt, smile)
    Nochmals: ein ganz ganz dickes Lob für all die Hilfestellungen in diesem Blog!!!
    Lieben Gruss
    Angie

  44. 44
    Kommentar von Uschi
    25. Juli 2009 um 16:41

    .commentlist li .avatar {
    float: right;
    border: 1px solid #eee;
    padding: 2px;
    background: #fff;
    }

  45. 45
    Kommentar von marco
    8. Februar 2010 um 13:08

    hallo frank!
    supi beitrag, gehe aber davon aus das es sich nur auf die besucher-gravatars auswirkt, oder?
    hast du einen tipp wie ich nur meine kommentare (admin) mit einem bild versehen kann?

    danke gruß, marco

  46. 46
    Kommentar von Frank Bültge
    8. Februar 2010 um 13:12

    @marco: dazu musst die die E-Mail abfragen oder via geloggter User (is_user_logged_in()), dann sollte das gehen (Beispiele).

  47. 47
    Kommentar von Toni
    7. September 2010 um 15:14

    Danke für den spitzen Artikel. War genau das was ich gerade gesucht hatte.

  48. 48
    Kommentar von andrea
    10. Oktober 2011 um 14:09

    Vielen dank für diesen tipp, genau, was ich suchte

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.