Как добавить метки в карточки постов темы Kadence

33
Александр Лаврищев 2 минут

В теме Kadence метки обычно видны в одиночной записи, но в карточках архива они могут не выводиться. Например, карточка в блоге показывает: А меток под карточкой нет. Можно добавить метки вручную через небольшой PHP-сниппет и привести их к единому стилю с метками в виджете или одиночной записи. Что получится В карточке архива под ссылкой «Читайте…

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

Заголовок
Дата
Отрывок
Читайте далее

А меток под карточкой нет.

Можно добавить метки вручную через небольшой PHP-сниппет и привести их к единому стилю с метками в виджете или одиночной записи.

Что получится

В карточке архива под ссылкой «Читайте далее» появятся метки записи:

Kadence (6)

Где:

Kadence — название метки
(6) — количество записей с этой меткой
Пример, как теперь выглядит карточка с метками
Пример, как теперь выглядит карточка с метками

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

Удобнее всего использовать WPCode или Code Snippets.

Для PHP-кода:

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

Для CSS:

Внешний вид → Настроить → Дополнительные стили

PHP-код для вывода меток

/**
 * Выводит метки с количеством записей в архивных карточках Kadence.
 */
add_action( 'kadence_loop_entry_content', function () {
    if ( ! is_home() && ! is_archive() && ! is_search() ) {
        return;
    }

    $tags = get_the_tags();

    if ( empty( $tags ) || is_wp_error( $tags ) ) {
        return;
    }

    echo '<div class="archive-card-tags">';

    foreach ( $tags as $tag ) {
        printf(
            '<a href="%s" rel="tag">%s <span class="archive-card-tag-count">(%d)</span></a>',
            esc_url( get_tag_link( $tag ) ),
            esc_html( $tag->name ),
            (int) $tag->count
        );
    }

    echo '</div>';
}, 99 );

Что делает PHP-код

Код использует хук Kadence:

kadence_loop_entry_content

Этот хук срабатывает внутри карточки записи в архиве.

Проверка:

if ( ! is_home() && ! is_archive() && ! is_search() ) {
    return;
}

нужна, чтобы метки выводились только:

на странице блога
в архивах
в поиске

На обычных страницах и в одиночных записях этот код не работает.

Функция:

get_the_tags()

получает метки текущей записи.

Если у записи меток нет, код ничего не выводит:

if ( empty( $tags ) || is_wp_error( $tags ) ) {
    return;
}

Дальше для каждой метки создается ссылка:

<a href="...">Kadence <span>(6)</span></a>

Число в скобках берется из:

$tag->count

Это количество записей, привязанных к этой метке.

CSS для оформления меток

#archive-container article.loop-entry {
    position: relative;
}

#archive-container article.loop-entry .entry-content-wrap {
    padding-bottom: 52px;
}

#archive-container article.loop-entry .archive-card-tags {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 1.7rem;
    z-index: 2;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    line-height: 1.2;
}

#archive-container article.loop-entry .archive-card-tags a {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--global-palette1);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

#archive-container article.loop-entry .archive-card-tags a:hover {
    color: var(--global-palette2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#archive-container article.loop-entry .archive-card-tag-count {
    margin-left: 3px;
}

Что делает CSS

Эта часть делает карточку точкой привязки:

#archive-container article.loop-entry {
    position: relative;
}

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

Эта часть оставляет место под метки:

#archive-container article.loop-entry .entry-content-wrap {
    padding-bottom: 52px;
}

Если не оставить нижний отступ, метки могут налезть на текст или ссылку «Читайте далее».

Блок меток прикрепляется к нижней части карточки:

position: absolute;
bottom: 1.7rem;

Левый отступ совпадает с внутренним отступом карточки:

left: 2rem;
right: 2rem;

Сами метки сделаны маленькими текстовыми ссылками:

font-size: 12px;
font-weight: 400;

При наведении появляется подчеркивание:

text-decoration: underline;
text-underline-offset: 3px;

Вы можете свои стили добавить, естественно.

Как привести метки к одному стилю

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

.single-post .entry-tags,
.single-post .tags-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 24px;
}

.single-post .entry-tags a,
.single-post .tags-links a {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--global-palette1);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.single-post .entry-tags a:hover,
.single-post .tags-links a:hover {
    color: var(--global-palette2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

Бонусный материал: как опустить «Читайте далее» к низу карточки

Чтобы карточка выглядела еще аккуратнее, можно прижать к нижней части не только метки, но и ссылку «Читайте далее».

Тогда структура карточки будет смотреться профессиональнее:

Заголовок
Мета-информация
Отрывок

Читайте далее
Метки

Для этого добавьте CSS:

#archive-container article.loop-entry {
    position: relative;
}

#archive-container article.loop-entry .entry-content-wrap {
    padding-bottom: 96px;
}

#archive-container article.loop-entry .more-link-wrap {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 4.2rem;
    z-index: 2;
    margin: 0;
}

#archive-container article.loop-entry .archive-card-tags {
    bottom: 1.7rem;
}

Если в вашей разметке ссылка «Читайте далее» находится не в .more-link-wrap, можно использовать более широкий вариант:

#archive-container article.loop-entry .entry-content-wrap > a.more-link,
#archive-container article.loop-entry a.post-more-link,
#archive-container article.loop-entry .more-link-wrap {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 4.2rem;
    z-index: 2;
    margin: 0;
}

Здесь:

bottom: 4.2rem;

задает положение ссылки «Читайте далее».

А:

bottom: 1.7rem;

задает положение меток.

Если ссылка и метки стоят слишком далеко друг от друга, можно уменьшить расстояние:

#archive-container article.loop-entry .more-link-wrap {
    bottom: 3.8rem;
}

#archive-container article.loop-entry .archive-card-tags {
    bottom: 1.5rem;
}

Если текст начинает налезать на нижний блок, увеличьте нижний отступ:

#archive-container article.loop-entry .entry-content-wrap {
    padding-bottom: 110px;
}

Что можно настроить

Если метки слишком высоко или низко, меняйте:

bottom: 1.7rem;

Если нужно больше места под метки:

padding-bottom: 60px;

Если нужно меньше:

padding-bottom: 44px;

Если текст слишком крупный:

font-size: 11px;

Если слишком мелкий:

font-size: 13px;

Итог

Чтобы добавить метки в карточки постов Kadence, нужно:

  1. Вывести метки через хук kadence_loop_entry_content.
  2. Получить метки текущей записи через get_the_tags().
  3. Добавить количество записей через $tag->count.
  4. Оформить метки через CSS.
  5. При необходимости привести метки в одиночной записи к тому же стилю.
  6. Дополнительно можно прижать «Читайте далее» и метки к нижней части карточки.

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *