WordPress manuell: Autorenbox ohne Plugin erstellen

Sehr viele Blogs haben heutzutage eine Autorenbox am Ende ihrer Artikel, um wichtige Informationen über den Autor eines Artikels zu zeigen. Das ist zu einem der größten Trends überhaupt in WordPress-Blogs geworden. In diesem Artikel werden wir zeigen, wie man eine solche Autorenbox relativ einfach ohne Zuhilfenahme eines Plugins erstellt. Zum Erstellen der Box werden wir WordPress-eigene Features benutzen, die zudem noch nach eigenem Belieben erweitert werden können.

Das Grundgerüst unserer Autorenbox

Zur Erstellung und Anzeige der Autorenbox werden wir die Daten aus dem jeweiligen Benutzerprofil auslesen, die wir mittels eines Code-Snippets noch etwas ergänzen, um auch Links zu Social Media-Diensten, wie zum Beispiel Twitter, Facebook und Google+ anzeigen zu können.

Manage WordPress Contact Fields

Dieses Snippet schreiben Sie bitte in die functions.php des betreffenden Themes (wp-content/themes/Ihr Theme).

/**
 * Manage WordPress contact fields.
 * Usage:
require './class.TTT_Contactfields.php';

$TTT_Contactfields = new TTT_Contactfields(
    array (
        'Twitter'
    ,    'Facebook'
    ,    'Xing'
    ,    'Country'
    ,    'City'
    ,    'Latitude'
    ,    'Longitude'
    )
);
 * @author "Thomas Scholz" http://toscho.de
 * @version 1.0
 * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
 */

$TTT_Contactfields = new TTT_Contactfields(
    array (
        'Twitter'
    ,    'Facebook'
    ,    'GooglePlus'
    )
);

class TTT_Contactfields {
    public
        $new_fields
    ,    $active_fields
    ,    $replace
    ;

    /**
     * @param array $fields New fields: array ('Twitter', 'Facebook')
     * @param bool $replace Replace default fields?
     */
    public function __construct($fields, $replace = TRUE)
    {
        foreach ( $fields as $field )
        {
            $this->new_fields[ mb_strtolower($field, 'utf-8') ] = $field;
        }

        $this->replace = (bool) $replace;

        add_filter('user_contactmethods', array( $this, 'add_fields' ) );
    }

    /**
     * Changes the contact fields.
     * @param  $original_fields Original WP fields
     * @return array
     */
    public function add_fields($original_fields)
    {
        if ( $this->replace )
        {
            $this->active_fields = $this->new_fields;
            return $this->new_fields;
        }

        $this->active_fields = array_merge($original_fields, $this->new_fields);
        return $this->active_fields;
    }

    /**
     * Helper function for your theme
     * @return array The currently active fields.
     */
    public function get_active_fields()
    {
        return $this->active_fields;
    }
}

Der Code ergänzt das Userprofil (Benutzer => Dein Profil) um die Möglichkeit der Anzeige der Twitter-, Facebook- und Google+ Profile.

Ein weiteres kleines Code-Snippet liest die Daten aus dem Benutzerprofil aus und sorgt für die Anzeige des Autorenprofils als Box unter dem Beitrag. Auch dieses kleine Snippet schreiben Sie bitte in die functions.php des Themes.

/**
 * WordPress Author Box.
 * Usage: Call this function with <?php andys_author_box(); ?> wherever you want to display the box (posts and/or pages)
 * @author "Andreas Hecht" http://www.hechtmediaarts.com
 * @version 1.0
 * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
 */

function andys_author_box() {
  ?>

<?php if ( get_the_author_meta( 'description' ) ) : ?>
<div>
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'revothemes_author_bio_avatar_size', 60 ) ); ?>
<div>
<h3><?php echo _e('Author: ', 'andysthemes'); the_author(); ?></h3>
<p><?php the_author_meta( 'description' ); ?></p>
<div>
<?php if ( get_the_author_meta( 'user_url' ) ) :  ?>
<p><a href="<?php the_author_meta('user_url'); ?>"><?php echo _e('Website', 'andysthemes'); ?></a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'twitter' ) ) :  ?>
<p>&nbsp;|&nbsp;<a href="https://twitter.com/<?php the_author_meta('twitter'); ?>">Twitter</a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'facebook' ) ) :  ?>
<p>&nbsp;|&nbsp;<a href="http://www.facebook.com/<?php the_author_meta('facebook'); ?>">Facebook</a></p>
<?php endif; ?>
<?php if ( get_the_author_meta( 'googleplus' ) ) :  ?>
<p>&nbsp;|&nbsp;<a href="https://profiles.google.com/<?php the_author_meta('googleplus'); ?>">Google+</a></p>
<?php endif; ?>
</div><!-- end .authorsites -->
</div><!-- end .author-description -->
</div><!-- end .author-info -->
<?php endif; // get_the_author_meta( 'description' ) ?>

<?php
}

Dieser wohldurchdachte kleine Schnipsel sorgt für die Anzeige eines Gravatars, der biographischen Angaben und der Felder für Webseite, Twitter, Facebook und Google+.

Im Theme angezeigt wird die Autorenbox jedoch nur, wenn auch das Feld für die biographischen Angaben ausgefüllt ist. Ebenfalls werden auch die anderen Felder nur bei Bedarf angezeigt, also wenn sie ausgefüllt sind.

Das Design der Autorenbox

Damit unsere neue Autorenbox schick aussieht, bedarf es eines gewissen Styling. Also fügen wir noch einige Zeilen CSS der style.css hinzu (wp-content => themes => Dein Theme => style.css) unseres Themes hinzu.

/* Author Info Box */
.author-info {
    position: relative;
    background: #f2f2f2;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 20px 0px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.author-info img.avatar {
    float: left;
    padding: 3px;
    border: 1px solid #ccc;
    position: relative;
}
.author-info .author-description {
    padding-left: 80px;
}
.author-info h3 {
    margin: 0px 0px 5px 0px;
    font-size: 14px;
}
.author-info p {
    margin: 0px;
    font-size: 12px;
    line-height: 1.4em;
    color: #555;
}
.authorsites p {
    float: left;
    margin-top: 5px;
}

Autorenbox in das Theme einfügen und aufrufen

Als abschließende Arbeit bleibt nur noch der Aufruf der Autorenbox an der richtigen Stelle im Theme. Hierzu öffnen wir die single.php (wp-content / themes / Dein Theme => single.php) und suchen folgende Stelle:

<?php the_content(); ?>

Bei einigen Themes kann sich dieser Tag durchaus auch in einer anderen Datei befinden, wie zum Beispiel loop.php oder content-single.php. Wo genau man suchen muß, hängt vom jeweiligen Theme ab, jedoch ist ein kurzes Studium der single.php immer aufschlussreich.

Haben wir den Content-Tag gefunden, wird nun genau darunter der Tag eingefügt, der für den Aufruf der Autorenbox sorgt:

<?php andys_author_box(); ?>

Mit diesem Tag lässt sich die Autorenbox an jeder beliebigen Stelle im Loop aufrufen, oder auch in anderen Dateien wie der page.php, die für die Darstellung der Seiten zuständig ist. Der folgende Screenshot zeigt, wie das Benutzerprofil ausgefüllt werden muss.

Unsere fertige Autorenbox sieht nun wie folgt aus:

Fazit

Mit relativ wenig Aufwand und vor allem ohne Plugin haben wir nun eine professionell aussehende Autorenbox geschaffen, die einem Blog den letzten Schliff geben kann.

(dpe)