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

В работе с WordPress часто возникает необходимость добавить новые атрибуты к HTML-элементам, которые выводятся с определёнными CSS-классами. Например, нужно добавить data-атрибуты, aria-атрибуты для доступности или настроить поведение элементов через JavaScript. Вместо установки дополнительных плагинов, которые могут замедлить сайт и усложнить поддержку, лучше сделать это через функции темы или кастомный плагин.

Почему важно добавлять атрибуты без плагинов

Использование лишних плагинов для мелких изменений приводит к росту нагрузки на сайт и может вызвать конфликты. Управление атрибутами через код даёт полный контроль, повышает безопасность и производительность. Кроме того, это позволяет глубже понимать, как устроен WordPress и его вывод контента.

В этом руководстве рассмотрим, как добавить атрибуты к элементам с нужными CSS-классами с помощью фильтров, хуков и JavaScript, а также как сделать это универсально и удобно.

Добавление атрибутов через фильтр wp_nav_menu_items и nav_menu_link_attributes

Один из частых случаев — модификация меню WordPress. Если нужно добавить, например, data-toggle="dropdown" или aria-haspopup="true" к ссылкам меню с определённым классом, можно использовать фильтр nav_menu_link_attributes. Он позволяет менять атрибуты <a> в меню.

function wpkit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    if ( in_array( 'menu-item-has-children', $item->classes ) ) {
        $atts['aria-haspopup'] = 'true';
        $atts['data-toggle'] = 'dropdown';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'wpkit_nav_menu_link_attributes', 10, 4 );

Здесь мы проверяем, есть ли у пункта меню класс menu-item-has-children, и если да, добавляем необходимые атрибуты. Такой подход можно расширять, добавляя любые атрибуты по условиям.

Пример с добавлением кастомного атрибута для всех ссылок с определённым классом

function wpkit_add_custom_data_attribute( $atts, $item, $args, $depth ) {
    if ( in_array( 'custom-class', $item->classes ) ) {
        $atts['data-custom'] = 'example';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'wpkit_add_custom_data_attribute', 10, 4 );

Добавление атрибутов к контенту через фильтр the_content

Если необходимо добавить атрибуты к элементам внутри поста, например, к <img> или <a>, можно использовать фильтр the_content с регулярными выражениями или DOMDocument.

Пример добавления атрибута loading="lazy" ко всем изображениям в контенте:

function wpkit_add_lazy_loading_to_images( $content ) {
    return preg_replace('/<img(.*?)>/i', '<img loading="lazy" $1>', $content);
}
add_filter( 'the_content', 'wpkit_add_lazy_loading_to_images' );

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

Добавление атрибутов к виджетам и другим элементам через JavaScript

Иногда проще и безопаснее добавить атрибуты через JavaScript, особенно если элементы формируются динамически или через сторонние плагины.

Пример скрипта, который добавляет data-tooltip="info" всем элементам с классом .wpkit-tooltip:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.wpkit-tooltip');
    elems.forEach(function(elem) {
        elem.setAttribute('data-tooltip', 'info');
    });
});

Этот код можно добавить в файл functions.php темы через wp_enqueue_script или в кастомный плагин.

Как зарегистрировать и подключить кастомный JavaScript в теме WordPress

Чтобы подключить собственный JS-файл, добавьте в functions.php следующий код:

function wpkit_enqueue_custom_scripts() {
    wp_enqueue_script( 'wpkit-custom', get_template_directory_uri() . '/js/wpkit-custom.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpkit_enqueue_custom_scripts' );

Создайте файл wpkit-custom.js в папке js вашей темы и вставьте туда необходимый JavaScript.

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

Фильтр post_class позволяет добавлять CSS-классы к HTML-блоку поста. Для добавления атрибутов, которые не являются классами, нужно использовать JavaScript или изменять шаблон напрямую.

function wpkit_add_custom_post_class( $classes ) {
    $classes[] = 'wpkit-custom-class';
    return $classes;
}
add_filter( 'post_class', 'wpkit_add_custom_post_class' );

Этот код добавит класс wpkit-custom-class ко всем постам. Для добавления атрибутов, например data-id, можно изменить шаблон content.php вашей темы или использовать JavaScript.

Пример комплексного решения: добавляем data-атрибут и класс к кнопкам в контенте

Допустим, нужно добавить всем кнопкам в постах класс wpkit-button и атрибут data-action="click". Для этого используем фильтр the_content с DOMDocument:

function wpkit_add_attributes_to_buttons( $content ) {
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content);
    $buttons = $dom->getElementsByTagName('button');
    foreach ( $buttons as $button ) {
        $existing_class = $button->getAttribute('class');
        $button->setAttribute('class', trim($existing_class . ' wpkit-button'));
        $button->setAttribute('data-action', 'click');
    }
    $html = $dom->saveHTML();
    // Удаляем добавленный XML-префикс
    $html = preg_replace('~^.*?<body>(.*)</body>.*?$~s', '$1', $html);
    return $html;
}
add_filter( 'the_content', 'wpkit_add_attributes_to_buttons' );

Такой подход универсален и безопасен для сложного HTML контента.

Полезные плагины для работы с классами и атрибутами (если всё-таки потребуется)

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

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

Но если нужна лёгкая и быстрая настройка — лучше делать через код, как показано выше.