Создание динамических иконок для статусов публикаций в WordPress

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

Почему важно использовать динамические иконки для статусов

Текстовое обозначение статуса не всегда удобно: оно занимает место и не всегда бросается в глаза. Иконки же обеспечивают мгновенное визуальное восприятие. Динамические иконки позволяют автоматически показывать соответствующую иконку в зависимости от текущего статуса публикации. Это особенно полезно в админ-панели, на фронтенде сайта и в кастомных списках.

Рассмотрим, как реализовать такую функциональность с помощью простого PHP-кода и подключения популярных иконок FontAwesome. В качестве бонуса покажем, как интегрировать решение с плагином Clearfy Pro, который помогает оптимизировать работу сайта.

Подключение FontAwesome для отображения иконок

Для начала подключим библиотеку иконок FontAwesome. Это можно сделать прямо в теме через functions.php:

function wpicons_enqueue_fontawesome() {
    wp_enqueue_style('wpicons-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'wpicons_enqueue_fontawesome');
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');

Этот код подключит стили как в админ-панели, так и на фронтенде сайта.

Функция для вывода иконки по статусу публикации

Создадим функцию wpicons_get_status_icon, которая принимает статус поста и возвращает HTML с иконкой:

function wpicons_get_status_icon($status) {
    $icons = [
        'publish' => '<i class="fas fa-check-circle" style="color:green" title="Опубликовано"></i>',
        'pending' => '<i class="fas fa-clock" style="color:orange" title="В ожидании"></i>',
        'draft' => '<i class="fas fa-pencil-alt" style="color:gray" title="Черновик"></i>',
        'future' => '<i class="fas fa-calendar-alt" style="color:blue" title="Запланировано"></i>',
        'private' => '<i class="fas fa-lock" style="color:red" title="Приватно"></i>',
        'trash' => '<i class="fas fa-trash" style="color:#a00" title="Удалено"></i>',
    ];
    return isset($icons[$status]) ? $icons[$status] : '<i class="fas fa-question-circle" title="Неизвестный статус"></i>';
}

Эта функция возвращает разные иконки с цветовой дифференциацией и всплывающими подсказками.

Добавление иконок в список публикаций в админ-панели

Для удобства редакторов добавим колонку с иконками статусов в таблицу списка постов. Используем хук manage_posts_columns и manage_posts_custom_column:

// Добавляем новую колонку
function wpicons_add_status_icon_column($columns) {
    $columns['status_icon'] = 'Статус';
    return $columns;
}
add_filter('manage_posts_columns', 'wpicons_add_status_icon_column');

// Заполняем колонку иконками
function wpicons_fill_status_icon_column($column, $post_id) {
    if ($column === 'status_icon') {
        $post = get_post($post_id);
        echo wpicons_get_status_icon($post->post_status);
    }
}
add_action('manage_posts_custom_column', 'wpicons_fill_status_icon_column', 10, 2);

После добавления этого кода в functions.php в списке публикаций появится колонка с иконками, которые отражают статус каждого поста.

Использование иконок на фронтенде: визуализация статуса публикации

Иногда полезно показывать статус публикации непосредственно на страницах сайта, например, для черновиков или запланированных постов. Для этого добавим вывод иконки в шаблоне single.php или через фильтр контента:

function wpicons_show_status_icon_frontend($content) {
    if (is_singular('post')) {
        global $post;
        $icon = wpicons_get_status_icon($post->post_status);
        $content = $icon . ' ' . $content;
    }
    return $content;
}
add_filter('the_content', 'wpicons_show_status_icon_frontend');

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

Интеграция с плагином Clearfy Pro: оптимизация работы с иконками

Плагин Clearfy Pro поможет ускорить загрузку иконок и оптимизировать работу сайта. В частности, он позволяет отключить лишние скрипты и стили, а также кешировать CSS, что особенно актуально при использовании FontAwesome.

После установки и активации Clearfy Pro рекомендуется проверить настройки оптимизации CSS и подключение внешних библиотек для максимальной производительности.

Расширение функционала: кастомные статусы и их иконки

WordPress позволяет создавать собственные статусы публикаций. Чтобы добавить иконки для таких кастомных статусов, достаточно расширить массив $icons в функции wpicons_get_status_icon новым ключом и значением:

$icons['my_custom_status'] = '<i class="fas fa-star" style="color:purple" title="Мой статус"></i>';

Так вы можете управлять и визуализировать любой набор статусов в вашем проекте.

Вывод

Использование динамических иконок для статусов публикаций в WordPress улучшает визуальное восприятие и ускоряет работу с контентом. Приведенный пример легко адаптируется под любые задачи и расширяется под кастомные статусы. Подключение FontAwesome и оптимизация через Clearfy Pro сделают ваше решение эффективным и легковесным.