Как добавить текстовый и визуальный список в WordPress без плагинов

В этой статье расскажем, как добавить в записи или на страницу WordPress удобные списки с кастомным оформлением, не используя плагины. Часто стандартные списки, которые предоставляет редактор Gutenberg, выглядят слишком просто и не всегда подходят под дизайн сайта. Мы рассмотрим, как создавать текстовые и визуальные списки с помощью HTML, CSS и небольших PHP-функций, чтобы гибко управлять их выводом в шаблонах или через шорткоды.

Почему стоит использовать кастомные списки в WordPress

Стандартные списки в WordPress — это обычные <ul> и <ol> с маркерами и цифрами. Их оформление ограничено стилями темы, и чтобы изменить внешний вид, часто приходится править стили или использовать плагины, которые могут замедлять сайт. К тому же плагины для списков не всегда дают нужный визуальный результат, особенно если нужен необычный дизайн.

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

Создание текстового и визуального списка через шорткод

Чтобы удобно вставлять кастомные списки в записи и страницы, создадим шорткод с параметрами для управления элементами и стилями. Добавьте следующий код в functions.php вашей темы или в функциональный плагин:

function wpwp_custom_list_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'type' => 'text', // text или visual
        'items' => '', // элементы списка через запятую
        'color' => '#000', // цвет маркера
    ), $atts, 'wpwp_list');

    if (empty($atts['items'])) return '';

    $items = explode(',', $atts['items']);
    $type = $atts['type'];
    $color = esc_attr($atts['color']);

    $output = '';
    if ($type === 'visual') {
        $output .= '<ul class="wpwp-visual-list">';
        foreach ($items as $item) {
            $item = trim($item);
            $output .= '<li><span class="wpwp-icon" style="color:'. $color .';">✔</span> ' . esc_html($item) . '</li>';
        }
        $output .= '</ul>';
    } else { // text
        $output .= '<ul class="wpwp-text-list">';
        foreach ($items as $item) {
            $output .= '<li>' . esc_html(trim($item)) . '</li>';
        }
        $output .= '</ul>';
    }

    return $output;
}
add_shortcode('wpwp_list', 'wpwp_custom_list_shortcode');

Теперь в записи можно вставить:

[wpwp_list type="visual" color="#2a9d8f" items="Первый пункт, Второй пункт, Третий пункт"]

Или простой текстовый список:

[wpwp_list type="text" items="Пункт один, Пункт два, Пункт три"]

Добавление CSS для стилизации списков

Чтобы списки выглядели красиво и были адаптивными, добавим стили. Их можно вставить в файл style.css вашей темы или через кастомайзер в раздел «Дополнительные стили».

.wpwp-text-list {
    list-style-type: disc;
    padding-left: 20px;
    color: #333;
    font-size: 16px;
}
.wpwp-text-list li {
    margin-bottom: 8px;
}
.wpwp-visual-list {
    list-style: none;
    padding-left: 0;
}
.wpwp-visual-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #222;
}
.wpwp-visual-list .wpwp-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

Объяснение стилей

Для текстового списка мы используем стандартные маркеры disc и отступ слева, чтобы список выглядел привычно и читабельно. Для визуального списка маркеры убраны (list-style: none), вместо них добавлен кастомный значок через абсолютное позиционирование и цвет, который задаётся параметром шорткода.

Вы можете заменить ✔ (галочку) на любой другой символ или даже иконку SVG, если хотите более сложный дизайн.

Использование кастомного списка в шаблонах темы

Если нужно вывести список не в записи, а прямо в шаблоне, можно использовать функцию шорткода напрямую. Например, чтобы вывести визуальный список в footer.php, добавьте:

echo do_shortcode('[wpwp_list type="visual" color="#e76f51" items="Пункт А, Пункт B, Пункт C"]');

Так вы сохраняете удобство редактирования элементов через шорткод, но выводите список там, где нужно, без избыточного HTML.

Пример расширения для динамических списков

Если список формируется динамически, например, на основе массива, можно написать вспомогательную функцию:

function wpwp_generate_list_from_array($items_array, $type = 'text', $color = '#000') {
    $items_str = implode(',', $items_array);
    return do_shortcode('[wpwp_list type="' . $type . '" color="' . $color . '" items="' . $items_str . '"]');
}

И тогда вызвать:

$my_items = array('Элемент 1', 'Элемент 2', 'Элемент 3');
echo wpwp_generate_list_from_array($my_items, 'visual', '#264653');

Советы по улучшению и адаптации списков

1. Чтобы добавить анимацию появления элементов, можно подключить CSS-переходы или использовать JavaScript. Например, плавное появление списка при прокрутке.

2. Для SEO важно, чтобы списки оставались в HTML, а не формировались через canvas или JS, так как поисковики лучше индексируют именно текстовые списки.

3. Если используете тему Reboot или JournalX от WPSHOP, добавьте CSS в кастомные стили темы через ее настройки, чтобы сохранить совместимость при обновлениях.

Альтернативы с плагинами

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