«
»

WordPress: Autorenbox unter den Artikeln

PostDateIcon 3. Februar 2011 PostAuthorIcon von Dominik

Die letzten Tage habe ich mich damit beschäftig ein paar kleiner Dinge hier im Blog zu ändern. Ich habe bei den Plugins ausgemistet und ich habe die Interne Suche durch die “Benutzerdefinierte Suche von Google” ersetzt.
Und zu guter Letzt habe ich die Autorenbox am Rechten Rand in der Sidebar entfernt. Diese hat mir einfach nicht mehr gefallen und auch zuviel Platz weggenommen.

Ich habe jetzt eine neue Autorenbox unter jedem Artikel. Diese hat mir aber den letzten Nerv geraubt. Ich kenne  mich schon ein wenig mit html, php und CSS aus. Aber mehr so autodiaktisch (hoffentlich habe ich das richtig geschrieben).

Ich hatte Kalliey, einen bekannten Blogger, gefagt der mit dann den Tipp gegeben hatte wo ich den Ansatz dafür finden kann. Leider konnte ich das von da aus nicht 1 zu 1 übernehmen.

Daher musst ich die Box komplett von vorne aufbauen. Auch wollte ich, dass Twitter und Facebook Button mit eingebaut sind. Ich werde den Code hier zu verfügung stellen. Ob er aus Sicht von Programmieren “valide” ist weiß ich nicht und interessiert mich auch nicht. Fakt ist das es so Funktioniert.

Hier mal erst ein kleines Pic von der Box, das Original könnt Ihr ja hier unter dem Artikel begutachten:

So, dann kommen wir zum wesentlichen:

Den Code für die single.php ist wie folgt:

<div id="post-author">

<div class="authorfoto"><?php echo get_avatar(get_the_author_meta('user_email'), $size = 50, $default = '', $alt = 'Dies ist nur ein Gravatar'); ?></div>

<div class="authortext">Servus, ich bin <a href="http://www.oberkircher-blog.de/wer-schreibt-hier/" target="_blank"><strong>Dominik</strong></a>, der Autor dieses Blogs. Ich blogge über alles was im täglichen Leben mein Interesse weckt. Gefallen euch meine Artikel? Dann empfiehlt diese doch einfach weiter.</div>

<div class="authortitle">Weiterempfehlen:</div>

<div class="authortwitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="doob81" data-lang="de">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="authorfb"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>%2F&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=65" style="border: medium none; overflow: hidden; width: 80px; height: 60px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe></div>

</div>

Hier müsst Ihr noch bei data-via=”doob81″ den namen doob81 durch euren Twitternamen austauschen!

Und hier der Code für die style.css:

/*	Author Box	*/

#post-author {
	display:block;
	background:#efefef;
	border:1px solid #ccc;
	padding:30px;
        margin-left:25px;
        width: 550px;
        height:90px;
        background-color: #ffefd5;
}

#post-author .authorfoto {
        float:left;
}
#post-author .authortext {
	width:250px;
        float:left;
        text-align: justify;
        margin-right:30px;
        margin-left:20px;
}

#post-author .authortwitter {
        float:left;
        margin-top:15px;
        margin-right:10px;
}

#post-author .authorfb {
	margin-top:18px;
}
#post-author .authortitle {
	font-weight:bold;
}

Hier könnt Ihr die Größe und Hintergundfarbe der Box anpassen. Außerdem auch wo die Einzelnen Elemente sitzen. Ändert Ihr hier nix, habt Ihr eine 1 zu 1 kopie meiner Box. Den Text habe ich oben absichtlich stehen lassen. Diesen könnt Ihr durch den eigenen Ersetzten.

Für das ändern sind halt ein paar “css” Kenntnisse Vorrausetzung. Ich würde euch jedoch helfen wenn Ihr nicht weiterkommt!

Sollte jemand diese Anleitung nutzen und die Box bei sich einbauen würde ich  mich freuen wenn Ihr den Artikel hier verlinkt ;-)

Schlagworte: , , ,

Dieser Beitrag wurde vor am Donnerstag, 3. Februar 2011 um 18:07 Uhr veröffentlicht und unter Computer & Internet gespeichert. You can follow any responses to this entry through the RSS 2.0 feed. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.

Dies ist nur ein Gravatar
Servus, ich bin Dominik, der Autor dieses Blogs. Ich blogge über alles was im täglichen Leben mein Interesse weckt. Gefallen euch meine Artikel? Dann empfiehlt diese doch einfach weiter.

Ähnliche Artikel:

13 Kommentare zu „WordPress: Autorenbox unter den Artikeln“

  1. Max Lill sagt:
    3. Februar 2011 um 21:49 Uhr

    Ja, ich finde den Ansatz auch sehr gut. Habe ihn zuerst auf der alten Seite von Gründerszene (http://www.gruenderszene.de) gesehen und fand ihn richtig gut. Habe ihn dann relativ einfach in meinen Blog (http://it-wissenschaft.de) rein gecodet. War dank der guten Dokumentation von WordPress auch net allzu schwer.

    Zu deinem Code Beispiel habe ich noch eine Erweiterung:
    Wenn man mehrere Autoren hat, sollte man den Text nicht statisch haben, sondern aus dem Profilfeld “Beschreibung” verwenden. Der Code dazu ist:

  2. Max Lill sagt:
    3. Februar 2011 um 21:50 Uhr

    Okay, der Code wird nicht angezeigt. Dann eben so, wobei die [] spitze Klammern sein sollten
    [?php the_author_meta( 'description' ); ?]

  3. Dominik sagt:
    3. Februar 2011 um 21:53 Uhr

    In meinen Fall ist es so das nur ich schreibe. Aber dein Tipp bleibt hier ja so stehen und jeder kann das entscheiden was für sich die besser Lösung ist.

    Auf jeden Fall mal danke für den Code.

    vg
    Dominik

  4. Weblin Avatar » WordPress: Autorenbox unter den Artikeln > Computer & Internet … sagt:
    4. Februar 2011 um 00:15 Uhr

    [...] den Originalbeitrag weiterlesen: WordPress: Autorenbox unter den Artikeln > Computer & Internet … Medien zum Thema   Medien by [...]

  5. Tim sagt:
    4. Februar 2011 um 10:19 Uhr

    Hallo Dominik,

    Ich habe meine Seite mit Joomla erstell, kann ich das denn trotzdem auch umsetzen? Ich bin da noch ein ziemlicher Neuling!! Hilf mir!

  6. Dominik sagt:
    4. Februar 2011 um 10:25 Uhr

    Ich kenne mich mit Joomla nicht aus. Aber ich denke diese ist auch mit php und css erstellt. Daher sollte es gehen. Einfach mal in einem joomla Forum fragen. Kannst dann ja meinen Artikel da verlinken und die dort fragen ob dies mit Joomla möglich ist!

  7. Daniel sagt:
    4. Februar 2011 um 21:28 Uhr

    Hallo Dominik,

    Ich persönlich würde sagen, dass du in deinem Fall damit nicht so gut fährst, wie mit der Biobox an der Seite. – Die Chance bei kleineren Blogs liegt gerade darin sich menschlich in den Vordergrund zu stellen und so erfährt man erst am Ende des Artikels etwas über dich, sofern man denn bis zum Schluss liest.

    Das ist natürlich nur eine persönliche Meinung.

    LG Daniel

  8. Dominik sagt:
    4. Februar 2011 um 21:36 Uhr

    Die Biobox an der Seite konnte ich einfach nicht mehr sehen. Ich nehme deine Kritik natürlich zur Kenntnis und bin über eine persönliche Meinung auch nicht böse.

    Aber um die Karte mal zurück zuschieben. Bei dir im Blog ist weder an der Seite noch am Ende eines Artikels ein Bild von dir. Ich habe es nicht geschafft innerhalb von 5 Sekunden ein Bild von dir zu finden.

  9. Daniel sagt:
    4. Februar 2011 um 23:21 Uhr

    Hey Dominik,

    Das ist natürlich völlig richtig von dir erkannt. Das Bild wird man in Zukunft auf dem Blog wohl auch nicht finden. – Das war auch keineswegs bös gemeint.

    LG Daniel

  10. Jeffrey sagt:
    11. Februar 2011 um 20:12 Uhr

    Vielen Dank für die super Anleitung! Habe es gleich mal bei mir im Blog umgesetzt. Hat wunderbar funktioniert.

  11. Dominik sagt:
    11. Februar 2011 um 21:38 Uhr

    Das freut mich das du dafür Verwendung finden konntest. Ich habe es mir auch schon angeschaut. Warum hast du eine andere Facebook Box angeschaut?

  12. Jeffrey sagt:
    11. Februar 2011 um 21:49 Uhr

    Wollte nur kurz was testen. Hat sich aber auch erledigt. Daher ist wieder deine Variante drinnen.

  13. Dominik sagt:
    11. Februar 2011 um 21:51 Uhr

    Ah Ok, sieht ja auch besser aus weil es fast die gleiche Grüße wie der Twitter Button hat!

Kommentieren