Как добавить аватар автора в мета-информацию Kadence в одиночных записях

В теме Kadence автор записи обычно выводится в мета-информации рядом с датой, временем чтения и другими данными.

Например:

Александр Лаврищев | 4 июня, 2026 | Время чтения: 9 минут

Можно улучшить этот блок и добавить перед именем автора маленький круглый аватар:

[аватар] Александр Лаврищев | 4 июня, 2026 | Время чтения: 9 минут

При этом аватар будет кликабельным и будет вести туда же, куда ведет имя автора.

Решение состоит из двух отдельных сниппетов:

1. Первый сниппет добавляет аватар.
2. Второй сниппет добавляет подчеркивание ссылки автора при наведении.

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

Сначала загрузите аватар в медиабиблиотеку WordPress:

Медиафайлы → Добавить новый

После загрузки скопируйте URL изображения.

Например:

http://wordpressbook.local/wp-content/uploads/2026/06/bez-nazvaniya-512-x-512-piks.png

На живом сайте ссылка будет выглядеть примерно так:

https://example.com/wp-content/uploads/2026/06/avatar.png

Куда вставлять код

Оба сниппета можно добавить через WPCode или Code Snippets.

Для каждого сниппета настройки такие:

Code Type: PHP Snippet
Location: Frontend Only
Auto Insert: Run Everywhere
Status: Active

Сниппет 1. Добавляем аватар перед именем автора

/**
 * Добавляет аватар перед именем автора в одиночной записи Kadence.
 */
add_filter( 'kadence_author_meta_output', function ( $output ) {
    if ( ! is_singular( 'post' ) ) {
        return $output;
    }

    $avatar_url = 'https://wordpressbook.ru/wp-content/uploads/2026/06/bez-nazvaniya-512-x-512-piks.png';

    return preg_replace_callback(
        '/<a\b([^>]*)>(.*?)<\/a>/i',
        function ( $matches ) use ( $avatar_url ) {
            $avatar = '<img class="alx-author-meta-avatar" src="' . esc_url( $avatar_url ) . '" alt="Как добавить аватар автора в мета-информацию Kadence в одиночных записях" loading="lazy" width="24" height="24">';

            return '<a' . $matches[1] . '>' . $avatar . $matches[2] . '</a>';
        },
        $output,
        1
    );
} );

add_action( 'wp_head', function () {
    ?>
    <style>
        .entry-meta .author.vcard a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            vertical-align: middle;
            line-height: 1;
        }

        .entry-meta .alx-author-meta-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
            flex: 0 0 24px;
            display: block;
        }
    </style>
    <?php
} );

В этом коде обязательно замените ссылку:

$avatar_url = 'https://wordpressbook.ru/wp-content/uploads/2026/06/bez-nazvaniya-512-x-512-piks.png';

на URL своего изображения.

Что делает первый сниппет

Тема Kadence выводит автора через фильтр:

kadence_author_meta_output

Фильтр позволяет изменить HTML автора до того, как он появится на странице.

Проверка:

if ( ! is_singular( 'post' ) ) {
    return $output;
}

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

Дальше задается URL аватара:

$avatar_url = '...';

Затем код находит ссылку автора:

<a href="...">Александр Лаврищев</a>

и вставляет внутрь этой ссылки изображение:

<a href="...">
    <img class="alx-author-meta-avatar" src="..." alt="Как добавить аватар автора в мета-информацию Kadence в одиночных записях">
    Александр Лаврищев
</a>

Именно поэтому аватар становится кликабельным и ведет туда же, куда ведет имя автора.

Что делает CSS в первом сниппете

Эта часть ставит аватар и имя автора в одну линию:

display: inline-flex;
align-items: center;
gap: 8px;

gap: 8px задает расстояние между аватаром и именем.

Размер аватара задается здесь:

width: 24px;
height: 24px;

Круглая форма делается через:

border-radius: 50%;

А эта строка нужна, чтобы изображение аккуратно обрезалось внутри круга:

object-fit: cover;

Сниппет 2. Подчеркиваем автора при наведении

Этот сниппет ничего не добавляет в HTML. Он только меняет поведение ссылки автора: когда посетитель наводит мышь на аватар или имя, имя автора подчеркивается.

/**
 * Подчеркивает имя автора при наведении на аватар или имя в мета-информации Kadence.
 */
add_action( 'wp_head', function () {
    if ( ! is_singular( 'post' ) ) {
        return;
    }
    ?>
    <style>
        .entry-meta .author.vcard a {
            text-decoration: none;
        }

        .entry-meta .author.vcard a:hover,
        .entry-meta .author.vcard a:focus {
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .entry-meta .author.vcard a img {
            text-decoration: none;
        }
    </style>
    <?php
} );

Что делает второй сниппет

Проверка:

if ( ! is_singular( 'post' ) ) {
    return;
}

ограничивает стиль только одиночными записями.

Эта часть убирает постоянное подчеркивание:

.entry-meta .author.vcard a {
    text-decoration: none;
}

А эта часть включает подчеркивание при наведении или фокусе:

.entry-meta .author.vcard a:hover,
.entry-meta .author.vcard a:focus {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

text-decoration-thickness задает толщину линии.

text-underline-offset отодвигает линию чуть ниже текста, чтобы подчеркивание выглядело аккуратно.

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

.entry-meta .author.vcard a img {
    text-decoration: none;
}

Почему это работает при наведении на аватар

Аватар вставлен внутрь той же ссылки, что и имя автора:

<a href="...">
    <img ...>
    Александр Лаврищев
</a>

Поэтому, когда пользователь наводит курсор на аватар, браузер считает, что он навел курсор на ссылку автора. Значит, правило a:hover срабатывает и подчеркивает ссылку.

Итог

Первый сниппет добавляет аватар в стандартную мета-информацию Kadence и делает его частью ссылки автора. Второй сниппет аккуратно показывает пользователю, что автор кликабелен: при наведении на аватар или имя появляется подчеркивание.