WordPress Hack | Von Haus aus legt WordPress für jeden Autor/Teilnehmer ein eigenes Profil an. Und weil jeder Beitrag mit einem Autor verknüpft wird, kann man die Daten des Autorenprofil ober- oder unterhalb des Beitrages anzeigen. Das personalisiert den jeweiligen Beitrag und macht besonders bei einem Weblog mit mehreren Autoren Sinn. Leider fehlt bisher aus unerklärlichen Gründen ein Feld für die URL zu einem Bild. Mit dem folgenden Hack nutzt man die WordPress-Bordmittel. Plugins und ein Verbiegen von WordPress sind hierbei vollkommen unnötig.
Foto: flickr.com/photos/s4n7y/
Seit ich damals für das DJ Magazine - Gott hab es selig - geschrieben habe, mag ich die Idee, dass ein (Print)Magazin oder Weblog seine Autoren unter jedem Beitrag vorstellt oder versammelt auf einer ganzen Seite.
Und weil auf Phlow auch Autoren außer mir Artikel veröffentlichen, bietet sich die Ausgabe eines Autorenprofils an. Dieses kann der jeweilige Autor selbst pflegen samt Eingabe und Verlinkung seiner Website. Mit WordPress und dem vorhanden Autorenprofil bietet sich die Ausgabe ober- oder unterhalb eines Beitrages an.
Das WordPress-Benutzerprofil beinhaltet Felder für Namen, Nick, URL, Kurzbeschreibung und verschiedene Instant-Messanger-IDs. Wichtig und schön ist neben den Autoreninformationen jedoch auch ein Portrait bzw. ein kleines Avatar-Bild. Warum ein Bilder-Upload oder ein Feld für die URL zu einem Benutzerbild unter WordPress fehlt, ist mir schleierhaft. Anstelle dessen gibt es unnötige Eingabefelder für Instant-Messager wie AIM und so...
Um neben dem Namen und der Beschreibung des Autoren auch ein Bild anzuzeigen, verknüpft Ihr in Euren Templates ein Bild einfach über den folgenden Code:
<img src="<?php bloginfo('template_directory'); ?>/images/autor_id_<?php the_author_ID(); ?>.jpg" />
Der obige Code baut Euch die URL zu einem Bild zusammen. Angenommen Euer eigenes Profil hat die ID 4, dann ladet Ihr ein Bild mit dem Namen autor_id_4.jpg in das Image-Verzeichnis Eures aktiven Themes hoch. Den Link generiert WordPress automatisch mit Hilfe des Befehls <?php bloginfo('template_directory'); ?>.
Um dem Bild noch den Namen des Autoren mitzugeben, fügt Ihr am besten noch den folgenden Code noch ein:
alt="Phlow-Autor <?php the_author() ?>
Damit bleibt alles fein ausgezeichnet. Das Code-Snippet, dass hier auf Phlow und bald auch auf Phlow-Magazine.com zum Einsatz kommt, sieht dann so aus (leicht abgespeckte Version)... Ach und das Ergebnis seht Ihr gleich hier unter dem Beitrag. Zusätzlich steht Euch auch noch die Option unter WordPress zur Verfügung dem Profil einen Link auf eine Übersichtsseite mit sämtlichen Einträgen des jeweiligen Autors beizufügen:
<?php the_author_posts_link(); ?>
<div id="autor-info">
<a href="<?php the_author_url() ?>" title="Website von Autor <?php the_author() ?>"><img alt="Phlow-Autor <?php the_author() ?>" src="<?php bloginfo('template_directory'); ?>/images/images_user/autor_id_<?php the_author_ID(); ?>.jpg" /></a>
Dieser Artikel wurde am <?php the_time('d.F Y') ?> von <a title="Website von <?php the_author() ?>" href="<?php the_author_url() ?>"><strong><?php the_author() ?></strong></a> geschrieben.
<?php the_author_description() ?>
</div>
Dieser Artikel wurde am 6.April 2008 von mo..
mo. ist Journalist, Buchautor und Webdesigner. Neben dem deutschen Phlow-Magazin betreut er auch die englische Edition unter Phlow-Magazine.com. Der Musikliebhaber lebt und liebt (in) Köln. Weitere Artikel von mo..
hey! wo hast du mein bild her? ;D
das titelbild? *hehehe* verrat ich nicht!
Schön, aber bei einem Multi-Autoren-System sollten die Autoren ihre Bilder selbst hochladen können... und denen zu erklären, dass sie dazu Ihre Autoren-ID rausfinden müssen und ein Bild danach benennen sollen ist oft eher schwierig.
@christoph: nene, das hast du falsch verstanden. das muss schon der webmaster selbst machen. aber das ist einmal nur einmal arbeit und die ID steht schon bei wordpress im jeweiligen benutzer-profil. leider muss man das bei wordpress händisch machen, das hier vorgestellte tutorial ist so eine art workaround.
Hallo,
evtl blöde Frage, aber wo und in welcher Datei muss ich den Code einfügen? ;)
Danke
das Code-Snippet fügst du an der stelle ein, an welcher du die informationen sehen willst. in der regel ist das das Template single.php => achte darauf, dass das Code-Snippet innerhalb von the_loop (http://codex.wordpress.org/The_Loop) ist.
mehr erfährst du in der wordpress dokumentation unter http://codex.wordpress.org/ und die tags findest du unter http://codex.wordpress.org/Template_Tags/
Das kann man doch bestimmt mittlerweile mit Gravatar kombinieren, ich bastel mal eine Runde!
Danke.
Twittar ist ein neues Plugin, dass Twitter-Avatare in WordPress-Comments anzeigt wirklich cool, wie ich finde!
Ich werde das umgehend beispielsweise hier implementieren:
http://www.shopbetreiber-blog.de/2008/06/19/magento-konkrete-erfahrungen-und-fallstudie-zur-shopsoftware/
Hallo! Cool, dass du das zur Verfügung stellst. DANKE! DAs kann ich gut gebrauchen.
Ich hab zwei FRagen:
Wo genau muss ich das einbinden? In der Page-Datei oder in der Index-Datei vom Theme?
Zweite Frage: Mich würde noch interessieren, wie muss die CSS Ausgabe dafür aussehen?
[]
Wie hast du da deine CSS Datei dafür definiert. Ich bin da leider noch nicht so fit drin, daher meine, eventuell, etwas blöde frage. *lieb guckt*
Freue mich über Nachricht.
Viele Grüße und vorab schon mal vielen lieben Dank!
OkashiQueen
im single-template sollte das eingebaut werden, am besten direkt unter den artikel.
so wie du willst... um dem
#autor-info { background: #f00; }wenn du den text zwischen den
-tags gestalten willst...
#autor-info p {color: #f0f; }Wie krieg ich denn die Autoren ID raus. ich finde das einfach nicht.
Die oberen Fragen sind nichtig, hab es schon selbst rausgekriegt. ;)
Viele Grüße
OkashiQueen
Oh trotzdem danke, hab es noch gar nicht gelesen gehabt! Danke danke danke... :) Das scheint doch unkomplizierter zu sein: meins sieht jetzt so aus:
#autor-info {
background-color:#D0C09F;
padding:20px;
width:500px;
height:30px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
filter:alpha(opacity=30); /* Für IE */
-moz-opacity:0.3; /* Für Gecko-Browser */
opacity:0.3; /* Für Konqueror, Opera 9+, Safari */
border: 1px solid #000000;
color: #464646;
}
.autor-info:link { text-decoration:none; }
.autor-info:visited { text-decoration:none; color: #006699;}
.autor-info:hover { text-decoration:underline; }
.autor-info:active { text-decoration:none; }
.autor-info:focus { text-decoration:none; }
ist das auch ok? Aber irgendwie wird der Text unterstrichen, obwohl ich das gar nicht will.
wie kann ich das denn ändern?
weiss ich nicht, kann ich dir direkt nicht sagen. dazu müsste ich mir deine webseite und das css genauer anschauen. dafür habe ich aber leider keine zeit, es sei denn du möchtest mich beauftragen ;)
trotzdem danke. :)
die autoren id bekommst du ganz einfach raus, indem du unter benutzer einfach auf einen benutzer klickst. in der adress-zeile siehst du dann die benutzer-id (im unteren beispiel 3):
/wp-admin/user-edit.php?user_id=3Super Sache dein Code-Snippet. Doch ich such genau so was mit einer Avatare Option, sprich das normale Avatare soll von gravatar.com geholt werden wie man es von Kommentaren kennt. Geht dies auch irgend wie??
da kann ich dir auf die schnelle leider keine antwort geben.
Super code, hab ich direkt mal in meinem Blog verwirklicht. Vor allem für regelmäßige Gastautoren eine feine Sache: Ich hatte mich selbst ab und zu bei eigenen Gastbeiträgen gegrämt, wenn die Urheberschaft meiner Beiträge allzu versteckt gekennzeichnet war. So ist das für Gastautoren eine schöne Promotion ...
Ja, so kann man es natürlich auch machen ;o) ...
Aber warum nimmst Du nicht ein fertiges Plugin dafür?
z.B. http://wordpress.org/extend/plugins/add-local-avatar/
Das löst doch das Problem, oder?
Plugins muss man pflegen und bohren evtl. ein Loch in Dein System. Den Code baue ich einmal ein, und habe dann Ruhe.