Как изменить отображение авторского блока в WordPress: практическое руководство

Автор: Валерия Волкова | Опубликовано: 09.02.2026

Авторский блок — важный элемент на страницах записей WordPress, который помогает читателям узнать больше об авторе статьи. Однако стандартное отображение блока часто не удовлетворяет требованиям дизайна или функционала сайта. В этой статье подробно рассмотрим, как изменить отображение авторского блока с помощью кода и плагинов, чтобы сделать его более информативным и стильным.

Что такое авторский блок в WordPress и зачем его менять

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

Изменение авторского блока поможет:

Улучшить взаимодействие с читателями.
Повысить доверие к контенту.
Добавить ссылки на соцсети или личный сайт автора.
Сделать дизайн блока уникальным и гармоничным с сайтом.

Как вывести свой авторский блок — базовый пример кода

Для начала рассмотрим простой способ изменить вывод авторского блока, добавив дополнительные данные и кастомный стиль. Для этого создадим функцию с префиксом wpwebsite_, чтобы избежать конфликтов с другими функциями и подключим её через хук the_content.

function wpwebsite_custom_author_box($content) {
    if (is_single() && is_main_query()) {
        $author_id = get_the_author_meta('ID');
        $author_name = get_the_author();
        $author_bio = get_the_author_meta('description');
        $author_avatar = get_avatar($author_id, 96);
        $author_posts = count_user_posts($author_id);

        $author_social = get_user_meta($author_id, 'wpwebsite_social_links', true);

        $social_links_html = '';
        if (is_array($author_social)) {
            foreach ($author_social as $network => $url) {
                if (!empty($url)) {
                    $social_links_html .= '<a href="' . esc_url($url) . '" target="_blank" rel="nofollow noopener">' . esc_html($network) . '</a> ';
                }
            }
        }

        $author_box = '<div class="wpwebsite-author-box" style="border:1px solid #ddd;padding:15px;margin-top:40px;display:flex;align-items:center;">'
            . '<div class="wpwebsite-author-avatar" style="margin-right:15px;">' . $author_avatar . '</div>'
            . '<div class="wpwebsite-author-info">'
            . '<h4>Об авторе: ' . esc_html($author_name) . '</h4>'
            . '<p>' . esc_html($author_bio) . '</p>'
            . '<p>Опубликовано статей: ' . intval($author_posts) . '</p>'
            . '<p>Соцсети: ' . $social_links_html . '</p>'
            . '</div></div>';

        return $content . $author_box;
    }
    return $content;
}
add_filter('the_content', 'wpwebsite_custom_author_box');

Этот код добавит блок с аватаром, биографией, количеством статей и ссылками на соцсети (если они добавлены в профиле пользователя через meta-поля).

Как добавить соцсети в профиль автора для вывода в авторском блоке

Для того чтобы ссылки на соцсети отображались, их нужно добавить в профиль автора. Можно использовать стандартные пользовательские поля или плагин. Рассмотрим пример добавления самостоятельно через поля в админке:

function wpwebsite_add_social_fields($user) {
    ?>
    <h3>Социальные сети автора</h3>
    <table class="form-table">
        <tr>
            <th><label for="wpwebsite_facebook">Facebook</label></th>
            <td><input type="text" name="wpwebsite_social_links[facebook]" id="wpwebsite_facebook" value="<?php echo esc_attr(get_user_meta($user->ID, 'wpwebsite_social_links', true)['facebook'] ?? ''); ?>" class="regular-text" /></td>
        </tr>
        <tr>
            <th><label for="wpwebsite_twitter">Twitter</label></th>
            <td><input type="text" name="wpwebsite_social_links[twitter]" id="wpwebsite_twitter" value="<?php echo esc_attr(get_user_meta($user->ID, 'wpwebsite_social_links', true)['twitter'] ?? ''); ?>" class="regular-text" /></td>
        </tr>
        <tr>
            <th><label for="wpwebsite_instagram">Instagram</label></th>
            <td><input type="text" name="wpwebsite_social_links[instagram]" id="wpwebsite_instagram" value="<?php echo esc_attr(get_user_meta($user->ID, 'wpwebsite_social_links', true)['instagram'] ?? ''); ?>" class="regular-text" /></td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'wpwebsite_add_social_fields');
add_action('edit_user_profile', 'wpwebsite_add_social_fields');

function wpwebsite_save_social_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    if (isset($_POST['wpwebsite_social_links'])) {
        update_user_meta($user_id, 'wpwebsite_social_links', array_map('sanitize_text_field', $_POST['wpwebsite_social_links']));
    }
}
add_action('personal_options_update', 'wpwebsite_save_social_fields');
add_action('edit_user_profile_update', 'wpwebsite_save_social_fields');

Этот код добавит в профиль пользователя поля для Facebook, Twitter и Instagram, которые потом можно вывести в авторском блоке.

Использование плагинов для кастомизации авторского блока

Если хочется получить гибкие возможности без программирования, можно использовать плагины. Например:

Simple Author Box — простой и популярный плагин для добавления расширенного авторского блока с соцсетями и кастомными стилями.
WP Author Bio — позволяет добавить красивые блоки с биографией, фото и соцсетями.
Clearfy Pro — универсальный плагин с функцией улучшения оформления и управления авторскими блоками.

Плагины позволяют быстро получить нужный результат, но иногда гибкость и уникальность достигается только через собственный код.

Как стилизовать авторский блок через CSS

Добавив HTML блок с классом wpwebsite-author-box, можно легко стилизовать его через CSS:

.wpwebsite-author-box {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.wpwebsite-author-avatar img {
    border-radius: 50%;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.wpwebsite-author-info h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.wpwebsite-author-info p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
}

.wpwebsite-author-info a {
    color: #0073aa;
    text-decoration: none;
    margin-right: 8px;
}

.wpwebsite-author-info a:hover {
    text-decoration: underline;
}

Этот простой CSS сделает авторский блок аккуратным и читабельным.

Советы по улучшению авторского блока и SEO

1. Используйте микроразметку Schema.org (например, Person), чтобы поисковые системы лучше понимали информацию об авторе.

2. Добавляйте ссылки на социальные сети с атрибутами rel="nofollow noopener" для безопасности и SEO.

3. Следите за отзывчивостью блока — он должен корректно отображаться на мобильных устройствах.

4. Если у вас много авторов, подумайте о выводе рейтинга или количества опубликованных материалов для повышения доверия.

Изменение авторского блока — несложная задача, но она существенно повышает качество сайта и взаимодействие с аудиторией. Используйте приведённые примеры и настраивайте под свои нужды!