WordPress: как добавить и обновлять своё изображение автора в блоках Gutenberg

Автор: Лев Сорокин | Опубликовано: 07.01.2026

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

Почему стандартный способ вывода изображения автора в WordPress не всегда подходит

По умолчанию WordPress использует Gravatar для отображения аватарки автора. Это значит, что пользователь должен зарегистрироваться на gravatar.com и привязать туда свой email, чтобы картинка отображалась в комментариях и на сайте. Но иногда нужно:

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

В таких случаях стандартный функционал не подойдет и нужно делать кастомное решение.

Добавляем поле изображения автора через пользовательские метаполя

Для начала создадим метабокс для пользователя, в котором можно будет загрузить и сохранить изображение. В WordPress пользователи не имеют собственных метаполей из коробки, но мы можем добавить их с помощью хуков.

Создание метабокса для загрузки фото автора

В functions.php вашей темы или в отдельном плагине добавьте следующий код:

function wpsnippets_show_user_avatar_field( $user ) {
    ?>
    <h3>Изображение автора</h3>
    <table class="form-table">
        <tr>
            <th><label for="wpsnippets_user_avatar">Фото автора</label></th>
            <td>
                <input type="hidden" name="wpsnippets_user_avatar" id="wpsnippets_user_avatar" value="<?php echo esc_attr( get_user_meta( $user->ID, 'wpsnippets_user_avatar', true ) ); ?>" />
                <img id="wpsnippets_user_avatar_preview" src="<?php echo esc_url( get_user_meta( $user->ID, 'wpsnippets_user_avatar', true ) ); ?>" style="max-width:100px; max-height:100px; display:block; margin-bottom:10px;" />
                <button class="button" id="wpsnippets_upload_avatar_button" type="button">Загрузить фото</button>
                <button class="button" id="wpsnippets_remove_avatar_button" type="button">Удалить фото</button>
                <p class="description">Рекомендуется изображение размером не более 200x200 пикселей.</p>
            </td>
        </tr>
    </table>
    <script>
    jQuery(document).ready(function($){
        var mediaUploader;
        $('#wpsnippets_upload_avatar_button').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: 'Выберите фото автора',
                button: { text: 'Выбрать' },
                multiple: false
            });
            mediaUploader.on('select', function() {
                attachment = mediaUploader.state().get('selection').first().toJSON();
                $('#wpsnippets_user_avatar').val(attachment.url);
                $('#wpsnippets_user_avatar_preview').attr('src', attachment.url);
            });
            mediaUploader.open();
        });
        $('#wpsnippets_remove_avatar_button').click(function(e){
            e.preventDefault();
            $('#wpsnippets_user_avatar').val('');
            $('#wpsnippets_user_avatar_preview').attr('src', '');
        });
    });
    </script>
    <?php
}
add_action( 'show_user_profile', 'wpsnippets_show_user_avatar_field' );
add_action( 'edit_user_profile', 'wpsnippets_show_user_avatar_field' );

function wpsnippets_save_user_avatar_field( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    if ( isset( $_POST['wpsnippets_user_avatar'] ) ) {
        update_user_meta( $user_id, 'wpsnippets_user_avatar', esc_url_raw( $_POST['wpsnippets_user_avatar'] ) );
    }
}
add_action( 'personal_options_update', 'wpsnippets_save_user_avatar_field' );
add_action( 'edit_user_profile_update', 'wpsnippets_save_user_avatar_field' );

Этот код добавляет в профиль пользователя поле с кнопкой загрузки и предварительным просмотром изображения. Используется медиа-загрузчик WordPress, чтобы удобно выбрать изображение из библиотеки или загрузить новое.

Как вывести кастомное фото автора в шаблоне

Теперь, когда у пользователя есть свое фото, нужно вывести его в теме. Вместо стандартного get_avatar(), который использует Gravatar, мы сделаем функцию, которая сначала проверит наличие локального изображения, а если его нет — вернет стандартный аватар.

Пример функции для вывода изображения автора

function wpsnippets_get_author_avatar( $user_id, $size = 96 ) {
    $custom_avatar = get_user_meta( $user_id, 'wpsnippets_user_avatar', true );
    if ( $custom_avatar ) {
        return '<img src="' . esc_url( $custom_avatar ) . '" alt="Автор" width="' . intval( $size ) . '" height="' . intval( $size ) . '" style="border-radius:50%;" />';
    } else {
        return get_avatar( $user_id, $size );
    }
}

Использовать эту функцию можно в любом месте шаблона:

echo wpsnippets_get_author_avatar( get_the_author_meta('ID'), 100 );

Таким образом, если пользователь загрузил фото, оно отобразится, иначе — будет стандартный gravatar.

Вывод изображения автора в блоках Gutenberg через динамический блок

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

Пример создания динамического блока автора с изображением

Для примера используем PHP и register_block_type с рендер-функцией:

function wpsnippets_register_author_block() {
    register_block_type( 'wpsnippets/author-avatar', array(
        'render_callback' => 'wpsnippets_render_author_avatar_block',
    ) );
}
add_action( 'init', 'wpsnippets_register_author_block' );

function wpsnippets_render_author_avatar_block( $attributes ) {
    if ( !is_singular() ) {
        return '';
    }
    $author_id = get_the_author_meta('ID');
    $avatar_img = wpsnippets_get_author_avatar( $author_id, 150 );
    $author_name = get_the_author();
    return '<div class="wpsnippets-author-block" style="text-align:center;">' .
           $avatar_img .
           '<p>' . esc_html( $author_name ) . '</p>' .
           '</div>';
}

После добавления этого кода блок появится в редакторе Gutenberg и позволит удобно вставлять фото и имя автора в записи без дополнительных настроек.

Плагины для управления и кастомизации изображений авторов

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

Simple Local Avatars — добавляет возможность загрузить локальное изображение аватара в профиль пользователя.
WP User Avatar (ProfilePress) — расширенный плагин с поддержкой различных ролей и кастомизацией.
Clearfy Pro — в пакете оптимизаций и доработок есть функции по кастомизации пользователей и авторов.

При использовании плагинов обращайте внимание на совместимость с вашей темой и версией WordPress.

Советы по оптимизации и безопасности изображений авторов

При работе с пользовательскими изображениями важно:

Ограничивать максимальный размер загружаемых файлов в настройках сервера и WordPress.
Использовать специальные функции WordPress для обработки изображений (wp_handle_upload, wp_get_image_editor), если реализуете загрузку самостоятельно.
Сохранять URL изображений в метаданных пользователя, а не в отдельной таблице.
Обрабатывать и проверять входящие данные через esc_url_raw и другие функции безопасности.

Это поможет избежать проблем с перегрузкой сервера и обеспечит безопасность вашего сайта.

Итог

Добавление и обновление собственного изображения автора в WordPress — задача вполне решаемая с помощью пользовательских метаполей и динамических блоков Gutenberg. Это улучшает визуальную часть сайта и позволяет показывать уникальные данные для каждого автора.

Если хотите еще более продвинутый функционал, советую посмотреть на плагины из набора WPSHOP, которые расширяют возможности работы с профилями и пользовательскими данными.