Убудова WordPress: Як стварыць уласны віджэт бакавой панэлі для біяграфіі вашага аўтара

Снежань 01, 2025

6 хвілін чытання

Убудова WordPress: Як стварыць уласны віджэт бакавой панэлі для біяграфіі вашага аўтара

Нядаўна я перамясціў біяграфію свайго аўтара на бакавую панэль, каб зрабіць яе больш бачнай для чытачоў, асабліва ў доўгіх артыкулах, дзе мае значэнне вопыт аўтара. WordPress уключае выдатныя ўбудаваныя палі аўтара, але не было зразумелага і гнуткага спосабу іх вываду ў віджэце — прынамсі, без неабходнасці кожны раз пісаць уласную разметку або спадзявацца на функцыю тэмы, якая пазней можа выйсці з ладу. Мне хацелася чагосьці простага, пашыральнага і гарантавана адлюстроўвальнага толькі пры адлюстраванні аднаго паведамлення.

Віджэт бакавой панэлі біяграфіі аўтара

Наступны плагін вырашае гэтую праблему. Ён рэгіструе лёгкі віджэт бакавой панэлі, які атрымлівае інфармацыю пра аўтара бягучага паведамлення і публікуе іх з дапамогай радкоў падстаноўкі. Гэтыя радкі дазваляюць мне распрацоўваць макет так, як я хачу, захоўваючы пры гэтым бяспечную абстрактнасць логікі. Больш за тое, я магу дадаваць новыя замены токенаў у будучыні, такія як сацыяльныя профілі або карыстальніцкія палі, без неабходнасці перакадаваць сам віджэт.

<?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="%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' );

Як усталяваць віджэт бакавой панэлі аўтара ў WordPress

Стварыце файл плагіна. Скапіруйце прыведзены вышэй код у новы файл з назвай author-bio-sidebar-widget.php.
Загрузіце яго ў WordPress. Змесціце файл у тэчку wp-content/plugins/author-bio-sidebar-widget на вашым сайце.
Актывуйце плагін. Пасля загрузкі перайдзіце на экран убудоў у адміністрацыйнай панэлі WordPress і актывуйце іх, як і любы стандартны плагін. Нічога дадатковага наладжваць за кулісамі не трэба.

Пасля актывацыі віджэт стане даступны ў Знешні выгляд → Віджэты, дзе ён паводзіць сябе як любы віджэт WordPress. Перацягніце яго на бакавую панэль, якая з'яўляецца ў шаблонах асобных паведамленняў. Паколькі віджэт настроены для адлюстравання толькі ў асобных паведамленнях, вам не трэба турбавацца аб тым, што ён з'явіцца на старонках архіва, галоўнай старонцы або ў карыстальніцкіх тыпах паведамленняў — ён ціха застаецца схаваным усюды астатняе.

Бакавая панэль блога: віджэт бакавой панэлі біяграфіі аўтара

Сам інтэрфейс віджэта наўмысна мінімалістычны. Ён прапануе поле загалоўка, дадатковы памер аватара і поле шаблону, якое дазваляе мне фармаваць вынік па сваім жаданні. Сапраўдная моц заключаецца ў радках падстаноўкі:

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

{аватар} Адлюстроўвае аватар аўтара ў памеры, вызначаным у наладах віджэта.
{дысплейнае_імя} Выводзіць публічнае імя аўтара.
{біяграфія} Устаўляе біяграфічнае апісанне аўтара з яго профілю WordPress з належным фарматаваннем.
{url_аўтара} Выводзіць URL-адрас старонкі архіва аўтара, што дазваляе пры неабходнасці ствараць уласную разметку спасылак.
{спасылка_аўтара} Аўтаматычна выводзіць імя аўтара ў выглядзе спасылкі на старонку яго архіва, па якой можна перайсці.
{імя_карыстальніка} Уключае імя аўтара (URL-зразумелы тэкст, які выкарыстоўваецца ў спасылцы на архіў).
{электронная пошта карыстальніка} Выводзіць адрас электроннай пошты аўтара ў заблытаным фармаце з дапамогай функцыі antispambot() ад WordPress. Токены, такія як {avatar}, {display_name}, {bio}, {author_link} і {author_url}, аўтаматычна замяняюцца адпаведнымі дадзенымі аўтара. Калі я хачу наладзіць макет або ўвесці структуру HTML — загалоўкі, абзацы, абгорткі ці нават дапаможныя класы — я магу гэта зрабіць, і віджэт дынамічна запоўніць усё.

Больш за ўсё мне падабаецца тое, што дадатковыя палі можна дадаваць пазней з дапамогай простага фільтра. Калі я дадаю палі сацыяльнага профілю або карыстальніцкія метададзеныя, я магу рэгістраваць новыя токены, не змяняючы асноўны код віджэта. Гэта робіць віджэт гатовым да будучыні і гарантуе, што біяграфія аўтара заўсёды адлюстроўвае тую інфармацыю, якую я хачу вылучыць.

Пасля размяшчэння віджэта і налады шаблону біяграфія аўтара аўтаматычна абнаўляецца для кожнага паведамлення, каб адлюстраваць таго, хто яго напісаў. У выніку атрымліваецца паслядоўнае і бачнае размяшчэнне біяграфіі, якое ўмацоўвае давер і бачнасць на ўсім сайце.

Купіце плагін WordPress за 10 долараў ЗША