Betriebssysteme, Programme & Web

WordPress: Autor-Box einfügen

Seit kurzem haben wir unter den Artikeln eine Autor-Box eingefügt. Bei unserem Template ließ sich diese ganz einfach in den Optionen aktivieren, diese Option gibt es jedoch nicht bei allen Templates, daher habe ich eine Möglichkeit für euch, mit der ihr auch so eine Box bei euch einfügen könnt. Das ist schnell gemacht und lockt Gastautoren an, die in ihrer Beschreibung etwas über andere Projekte von sich schreiben und einen Backlink mit reinpacken. So kannst du deinen Blog beliebter bei anderen Bloggern machen und gleichzeitig mehr Content erhalten.

Beispiel für eine Autor-Box

autor-box

Autor-Box in euer Template einfügen

Zunächst muss folgender Code in das gewünschte Template eingefügt werden, damit die Informationen an der gewünschten Stelle eingefügt werden. Die gängigsten Postionen sind vermutlich in den Templates single.php, loop-single.php, page.php oder archive.php

Dort müsst ihr einfach folgenden Code einfügen, je nachdem wo ihr die Box haben wollt, probiert es einfach mal aus:

<!-- Über den Autoren -->
<div class="author-box">
 <div class="author-image"><?php echo get_avatar( get_the_author_email(), '80' ); ?></div>
 <div class="author-name"><?php the_author_meta( "display_name" ); ?></div>
 <div class="author-info"><?php the_author_meta( "user_description" ); ?></div>
 <div class="clear"></div>
</div>
<!-- Ende über den Autoren -->

Formatieren mit CSS

Bis jetzt sieht die Autor-Box noch nicht sehr ansehnlich aus, daher wollen wir sie nun noch mit CSS formatieren. Dazu öffnet ihr die style.css eures Templates und schreibt dort eine CSS-Formatierung eurer Wahl rein, ihr müsst nur darauf achten, dass die richtigen CSS Variablen definiert werden. Ich habe hier eine Formatierung als Beispiel für euch vorbereitet:

.author-box {
 margin: 10px 0;
 padding: 10px;
 background: ##E9ECF5;
}
.author-image{
 float: left;
 margin-right: 10px;
}
.author-name {
 font-weight: bold;
 margin: 5px 0;
}

 

Nach diesem kurzen Tutorial habt ihr eine Autor-Box in eurem Template, wenn es diese vorher noch nicht gab. Ihr könnt sie anpassen und an die gewünschte Stelle setzen, je nachdem wie ihr es möchtet. Ich hoffe euch hat das Tutorial weiter geholfen und wenn es noch Fragen gibt, könnt ihr diese natürlich gerne stellen.

Simon Lüthje

Ich bin der Gründer dieses Blogs und interessiere mich für alles was mit Technik zu tun hat, bin jedoch auch dem Zocken nicht abgeneigt. Geboren wurde ich in Hamburg, wohne nun jedoch in Berlin.

Ähnliche Artikel

19 Kommentare

    1. Hallo Mose,
      versuch es mal mit einer festen Breite für .author-box. Ansonsten poste mir mal den Link zu deiner Seite und sag mir wie genau du das haben möchtest, dann schau ich mir das mal an.

  1. Hallo Mose,
    die schnellste Lösung ist wohl wenn du author-image in author-info schiebst.

    Anders geht es auch mit Anpassung der CSS, dafür habe ich jedoch grade keine Zeit, da ich noch auf der Arbeit bin.

    Der Unterschied liegt daran, dass die Autorbox responsiv ist, wenn man es denn richtig macht. 🙂

  2. Ja, vielen Dank. Jetzt muss ich das aber noch so anpassen, dass das Bild nicht direkt in dem Text hängt, aber das müsste ich schaffen. Vielen Dank.

    Wie hast du das realisiert, dass da drüber noch das Author Info (in der schönen Schrift) steht bzw. dass dies außerhalb der Box ist?

    Gruß Mose

    1. Bei mir ist das mit einem h2-Tag geschrieben. Einfach über innerhalb des Haupt-DIVs über den Ausgaben. Musst du mal gucken wie das bei dir am besten passt.

    1. Danke für das Lob und den Like. 😉

      Also eine Überschrift kannst du z. B. hinter schreiben. Einfach mit h2-Tags umgeben und das passt. Damit die Box nicht soviel Freiraum bildet musst du die Paddings bearbeiten.

  3. Also ich bekomme die Box leider nicht kleiner 🙁 zudem hätte ich gerne einen dünnen Rahmen um die Box und der Text sollte nicht unter dem Bild verlaufen…

    Hast du noch ne Lösung?

    P.S. Öffne mal den Link 😉

    Danke

    Mose

  4. .single .author-info hat padding 50px 0 0
    .author-info hat padding 30px 0 10px
    .post-navigation hat padding 20px 0

    Wenn du die paddings veränderst/entfernst sollte das passen.

    Einen Rahmen bekommst du z.B. durch „border: 1px solid black“ bei author.info.

    und wenn du unter dem Bild kein Text haben möchtest musst du eigentlich alles ein wenig umbauen und das doch wieder außerhalb des Containers packen. xD Die schnelle Lösung wäre sonst author.image ein „height: 130px“ zu verpassen. Bei 1920×1080 passt das dann perfekt, bei kleineren Auflösungen sieht das aber ein wenig komisch aus. Da lass ich aber mal deiner Kreativität sonst freien Lauf. 😛

Schreibe einen Kommentar

Schaltfläche "Zurück zum Anfang"