Plugin WordPress : comment créer un widget de barre latérale personnalisé pour la biographie de votre auteur

J’ai récemment déplacé la biographie de mon auteur dans la barre latérale pour la rendre plus visible pour les lecteurs, en particulier pour les articles longs où l’expertise de l’auteur est importante. WordPress inclut d’excellents champs d’auteur intégrés, mais il n’existait pas de moyen propre et flexible de les afficher dans un widget, du moins pas sans écrire un balisage personnalisé à chaque fois ou sans s’appuyer sur une fonctionnalité de thème qui pourrait tomber en panne plus tard. Je voulais quelque chose de simple, extensible et garanti de s’afficher uniquement lorsqu’un seul message est affiché.

Widget de la barre latérale de la biographie de l’auteur

Le plugin suivant résout ce problème. Il enregistre un widget de barre latérale léger qui extrait les détails de l’auteur de la publication actuelle et les publie à l’aide de chaînes de substitution. Ces chaînes me permettent de concevoir la mise en page comme je le souhaite tout en gardant la logique abstraite en toute sécurité. Mieux encore, je peux ajouter de nouveaux remplacements de jetons à l’avenir, tels que des profils sociaux ou des champs personnalisés, sans avoir à recoder le widget lui-même.

<?php
/*
Plugin Name: Author Bio Sidebar Widget
Description: Sidebar widget that outputs the current post author’s bio using substitution strings, only on single posts.
Version: 1.0.0
Author: Douglas Karr
Author URl: https://dknewmedia.com
License: GPL2+
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Helper: Build token map for the author.
 *
 * This function is filterable, so additional tokens can be added without
 * modifying the widget itself.
 */
function dk_author_bio_widget_get_tokens( $author_id, $args = array() ) {
    $args = wp_parse_args(
        $args,
        array(
            'avatar_size' => 96,
        )
    );

    $display_name = get_the_author_meta( 'display_name', $author_id );
    $bio_raw      = get_the_author_meta( 'description', $author_id );
    $bio_clean    = wp_kses_post( $bio_raw );
    $bio          = wpautop( $bio_clean );

    $author_url   = get_author_posts_url( $author_id );

    $tokens = array(
        '{avatar}'       => get_avatar(
            $author_id,
            (int) $args['avatar_size'],
            '',
            $display_name,
            array( 'class' => 'author-bio-widget-avatar' )
        ),
        '{display_name}' => esc_html( $display_name ),
        '{bio}'          => $bio,
        '{author_url}'   => esc_url( $author_url ),
        '{author_link}'  => sprintf(
            '<a href="https://martech.zone/wordpress-how-to-build-a-author-bio-sidebar-widget/%s">%s</a>',
            esc_url( $author_url ),
            esc_html( $display_name )
        ),
        '{user_nicename}' => esc_html( get_the_author_meta( 'user_nicename', $author_id ) ),
        '{user_email}'    => antispambot( get_the_author_meta( 'user_email', $author_id ) ),
    );

    /**
     * Filter: dk_author_bio_widget_tokens
     *
     * Allows adding or modifying tokens without changing the widget code.
     *
     * Example:
     * add_filter( 'dk_author_bio_widget_tokens', function( $tokens, $author_id, $args ) {
     *     $tokens['{twitter}'] = esc_html( get_the_author_meta( 'twitter', $author_id ) );
     *     return $tokens;
     * }, 10, 3 );
     */
    return apply_filters( 'dk_author_bio_widget_tokens', $tokens, $author_id, $args );
}

/**
 * Author Bio Sidebar Widget.
 */
class DK_Author_Bio_Sidebar_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'dk_author_bio_sidebar_widget',
            __( 'Author Bio Sidebar', 'dk-author-bio-widget' ),
            array(
                'description' => __( 'Shows the current post author bio in the sidebar using substitution strings.', 'dk-author-bio-widget' ),
            )
        );
    }

    /**
     * Frontend display.
     */
    public function widget( $args, $instance ) {
        // Only show on single blog posts.
        if ( ! is_singular( 'post' ) ) {
            return;
        }

        global $post;

        if ( ! $post instanceof WP_Post ) {
            return;
        }

        $author_id = (int) $post->post_author;

        if ( ! $author_id ) {
            return;
        }

        $title       = isset( $instance['title'] ) ? $instance['title'] : '';
        $template    = isset( $instance['template'] ) ? $instance['template'] : '';
        $avatar_size = isset( $instance['avatar_size'] ) ? (int) $instance['avatar_size'] : 96;

        if ( '' === trim( $template ) ) {
            // Default template: avatar, linked name, and bio.
            $template = <<<HTML
{avatar}
<h3 class="author-bio-widget-name">{author_link}</h3>
<div class="author-bio-widget-bio">
    {bio}
</div>
HTML;
        }

        $tokens  = dk_author_bio_widget_get_tokens(
            $author_id,
            array(
                'avatar_size' => $avatar_size,
            )
        );
        $content = strtr( $template, $tokens );

        // Basic safety: allow only safe HTML in final output.
        $content = wp_kses_post( $content );

        echo $args['before_widget'];

        if ( ! empty( $title ) ) {
            echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
        }

        echo '<div class="dk-author-bio-sidebar-widget">';
        echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo '</div>';

        echo $args['after_widget'];
    }

    /**
     * Backend form.
     */
    public function form( $instance ) {
        $title       = isset( $instance['title'] ) ? $instance['title'] : __( 'About the Author', 'dk-author-bio-widget' );
        $template    = isset( $instance['template'] ) ? $instance['template'] : '';
        $avatar_size = isset( $instance['avatar_size'] ) ? (int) $instance['avatar_size'] : 96;

        $field_id_title       = $this->get_field_id( 'title' );
        $field_name_title     = $this->get_field_name( 'title' );
        $field_id_template    = $this->get_field_id( 'template' );
        $field_name_template  = $this->get_field_name( 'template' );
        $field_id_avatar_size = $this->get_field_id( 'avatar_size' );
        $field_name_avatar    = $this->get_field_name( 'avatar_size' );
        ?>
        <p>
            <label for="<?php echo esc_attr( $field_id_title ); ?>">
                <?php esc_html_e( 'Title:', 'dk-author-bio-widget' ); ?>
            </label>
            <input class="widefat"
                   id="<?php echo esc_attr( $field_id_title ); ?>"
                   name="<?php echo esc_attr( $field_name_title ); ?>"
                   type="text"
                   value="<?php echo esc_attr( $title ); ?>" />
        </p>

        <p>
            <label for="<?php echo esc_attr( $field_id_avatar_size ); ?>">
                <?php esc_html_e( 'Avatar size (px):', 'dk-author-bio-widget' ); ?>
            </label>
            <input class="small-text"
                   id="<?php echo esc_attr( $field_id_avatar_size ); ?>"
                   name="<?php echo esc_attr( $field_name_avatar ); ?>"
                   type="number"
                   min="16"
                   value="<?php echo esc_attr( $avatar_size ); ?>" />
        </p>

        <p>
            <label for="<?php echo esc_attr( $field_id_template ); ?>">
                <?php esc_html_e( 'Template:', 'dk-author-bio-widget' ); ?>
            </label>
            <textarea class="widefat"
                      rows="10"
                      id="<?php echo esc_attr( $field_id_template ); ?>"
                      name="<?php echo esc_attr( $field_name_template ); ?>"><?php echo esc_textarea( $template ); ?></textarea>
        </p>

        <p>
            <?php esc_html_e( 'Available substitution strings:', 'dk-author-bio-widget' ); ?><br />
            <code>{avatar}</code> – <?php esc_html_e( 'Author avatar image', 'dk-author-bio-widget' ); ?><br />
            <code>{display_name}</code> – <?php esc_html_e( 'Author display name', 'dk-author-bio-widget' ); ?><br />
            <code>{bio}</code> – <?php esc_html_e( 'Author bio (Biographical Info)', 'dk-author-bio-widget' ); ?><br />
            <code>{author_url}</code> – <?php esc_html_e( 'URL to the author archive page', 'dk-author-bio-widget' ); ?><br />
            <code>{author_link}</code> – <?php esc_html_e( 'Linked author name pointing to the author page', 'dk-author-bio-widget' ); ?><br />
            <code>{user_nicename}</code> – <?php esc_html_e( 'User nicename (slug)', 'dk-author-bio-widget' ); ?><br />
            <code>{user_email}</code> – <?php esc_html_e( 'Author email (obfuscated)', 'dk-author-bio-widget' ); ?><br />
        </p>

        <p>
            <?php esc_html_e( 'Developers can add more tokens with the dk_author_bio_widget_tokens filter.', 'dk-author-bio-widget' ); ?>
        </p>
        <?php
    }

    /**
     * Sanitize and save widget options.
     */
    public function update( $new_instance, $old_instance ) {
        $instance                 = array();
        $instance['title']        = isset( $new_instance['title'] ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['avatar_size']  = isset( $new_instance['avatar_size'] ) ? (int) $new_instance['avatar_size'] : 96;
        $instance['template']     = isset( $new_instance['template'] ) ? $new_instance['template'] : '';

        return $instance;
    }
}

/**
 * Register the widget.
 */
function dk_register_author_bio_sidebar_widget() {
    register_widget( 'DK_Author_Bio_Sidebar_Widget' );
}
add_action( 'widgets_init', 'dk_register_author_bio_sidebar_widget' );

Comment installer votre widget de barre latérale d’auteur WordPress

1. Créez le fichier du plugin. Copiez le code ci-dessus dans un nouveau fichier nommé author-bio-sidebar-widget.php.
2. Téléchargez-le sur WordPress. Placez le fichier dans le dossier wp-content/plugins/author-bio-sidebar-widget de votre site.
3. Activez le plug-in. Après l’avoir téléchargé, accédez à l’écran Plugins dans l’administrateur WordPress et activez-le comme vous le feriez pour n’importe quel plugin standard. Il n’y a rien de plus à configurer en coulisses.

Après activation, le widget devient disponible sous Apparence → Widgetsoù il se comporte comme n’importe quel widget WordPress natif. Faites-le glisser dans la barre latérale qui apparaît sur vos modèles de publication unique. Étant donné que le widget est codé pour s’afficher uniquement sur des publications individuelles, vous n’avez pas à vous soucier de son apparition sur les pages d’archives, sur la page d’accueil ou sur les types de publications personnalisés : il reste caché partout ailleurs.

L’interface du widget elle-même est intentionnellement minimale. Il fournit un champ de titre, une taille d’avatar facultative et une zone de modèle qui me permet de façonner la sortie comme je le souhaite. Le véritable pouvoir réside dans les chaînes de substitution :

{avatar}
<h3 class="author-bio-widget-name">{author_link}</h3>
<div class="author-bio-widget-bio">
    {bio}
</div>

• {avatar} Affiche l’image de l’avatar de l’auteur à la taille définie dans les paramètres du widget.
• {display_name} Affiche le nom d’affichage public de l’auteur.
• {biographie} Insère la description biographique de l’auteur à partir de son profil WordPress, avec une mise en forme appropriée appliquée.
• {auteur_url} Imprime l’URL de la page d’archives de l’auteur, vous permettant de créer votre propre balisage lié si nécessaire.
• {author_link} Affiche automatiquement le nom d’affichage de l’auteur sous forme de lien cliquable vers sa page d’archives d’auteur.
• {user_nicename} Inclut le joli nom de l’auteur (le slug convivial utilisé dans son lien d’archive).
• {user_email} Affiche l’adresse e-mail de l’auteur dans un format obscurci à l’aide de la fonction antispambot() de WordPress. Les jetons tels que {avatar}, {display_name}, {bio}, {author_link} et {author_url} sont automatiquement remplacés par les données d’auteur correspondantes. Si je souhaite personnaliser la mise en page ou introduire une structure HTML (titres, paragraphes, wrappers ou même classes utilitaires), je le peux, et le widget remplit tout de manière dynamique.

Ce que j’apprécie le plus, c’est que des champs supplémentaires peuvent être introduits ultérieurement via un simple filtre. Si j’ajoute des champs de profil social ou des méta utilisateur personnalisés, je peux enregistrer de nouveaux jetons sans toucher au code principal du widget. Cela rend le widget évolutif et garantit que la biographie de l’auteur reflète toujours les informations que je souhaite mettre en évidence.

Une fois le widget placé et le modèle défini, la biographie de l’auteur est automatiquement mise à jour pour chaque message afin de refléter celui qui l’a écrit. Le résultat est un placement bio cohérent et proéminent qui renforce la confiance et la visibilité sur l’ensemble du site.