Как изменить вывод атрибутов в WordPress

В WordPress нередко возникает необходимость изменить вывод атрибутов HTML-элементов для улучшения SEO, стилизации или функционала. Это может касаться атрибутов ссылок, изображений, форм или любых других элементов, которые генерируются динамически. В этой статье мы подробно разберем, как именно можно управлять выводом атрибутов в WordPress, используя хуки, фильтры и собственный код. Приведем примеры популярных плагинов и создадим свои функции с префиксом wpbono_, чтобы избежать конфликтов.

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

Атрибуты HTML — это мощный инструмент для улучшения взаимодействия сайта с пользователем и поисковыми системами. Например, добавление rel="nofollow" к ссылкам, указание alt и title к изображениям, настройка aria атрибутов для доступности — всё это влияет на качество сайта.

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

Расскажем о нескольких способах, как это сделать.

Изменение атрибутов ссылок с помощью фильтров

Чаще всего нужно изменить атрибуты ссылок, например в меню или в контенте. Для этого WordPress предоставляет фильтр wp_nav_menu_objects для меню и the_content для контента.

Изменение атрибутов ссылок в меню

Чтобы добавить атрибут rel="nofollow" ко всем ссылкам в меню, используем фильтр wp_nav_menu_objects. Вот пример функции:

function wpbono_add_nofollow_to_menu_links( $items ) {
    foreach ( $items as &$item ) {
        if ( empty( $item->attr_title ) ) {
            $item->attr_title = '';
        }
        // Добавляем rel="nofollow"
        if ( strpos( $item->xfn, 'nofollow' ) === false ) {
            $item->xfn .= ' nofollow';
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpbono_add_nofollow_to_menu_links' );

Здесь мы проходим по всем элементам меню и добавляем к атрибуту rel значение nofollow. Свойство xfn отвечает за атрибут rel для меню.

Изменение атрибутов ссылок в контенте

Если нужно добавить атрибуты к ссылкам внутри постов, проще всего использовать фильтр the_content. Например, добавим target="_blank" rel="noopener noreferrer" ко всем внешним ссылкам:

function wpbono_add_target_rel_to_external_links( $content ) {
    // Используем DOMDocument для парсинга HTML
    if ( empty( $content ) ) {
        return $content;
    }
    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    libxml_clear_errors();

    $links = $dom->getElementsByTagName('a');
    foreach ( $links as $link ) {
        $href = $link->getAttribute('href');
        if ( strpos( $href, home_url() ) === false && preg_match('/^https?:\/\//', $href) ) {
            $link->setAttribute('target', '_blank');
            $link->setAttribute('rel', 'noopener noreferrer');
        }
    }

    return $dom->saveHTML();
}
add_filter( 'the_content', 'wpbono_add_target_rel_to_external_links' );

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

Изменение атрибутов изображений с помощью фильтров

Изображения в WordPress генерируются с атрибутами srcset, sizes, alt и другими. Иногда нужно изменить эти атрибуты для SEO или адаптивности.

Добавление или изменение атрибута alt

Атрибут alt важен для SEO и доступности. Чтобы задать свой альтернативный текст, можно использовать фильтр wp_get_attachment_image_attributes:

function wpbono_custom_alt_text( $attr, $attachment ) {
    if ( empty( $attr['alt'] ) ) {
        $attr['alt'] = 'Описание изображения на сайте wpbono.ru';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpbono_custom_alt_text', 10, 2 );

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

Удаление атрибута srcset

Иногда srcset мешает, например, при кастомной обработке изображений. Для удаления атрибута используйте:

function wpbono_remove_srcset( $sources ) {
    return false;
}
add_filter( 'wp_calculate_image_srcset', 'wpbono_remove_srcset' );

Это полностью отключит srcset.

Работа с атрибутами форм и кнопок

Для кастомизации форм часто нужно менять атрибуты input, button и form. WordPress не предоставляет универсальных фильтров, поэтому приходится редактировать вывод формы вручную или использовать хуки конкретных плагинов.

Пример кастомного фильтра для формы комментариев

Добавим атрибут autocomplete="off" для поля email в форме комментариев:

function wpbono_comment_form_fields_autocomplete( $fields ) {
    if ( isset( $fields['email'] ) ) {
        $fields['email'] = str_replace(
            '<input',
            '<input autocomplete="off"',
            $fields['email']
        );
    }
    return $fields;
}
add_filter( 'comment_form_default_fields', 'wpbono_comment_form_fields_autocomplete' );

Таким образом мы контролируем атрибуты без изменения шаблонов.

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

Для тех, кто не хочет писать код, есть готовые решения:

• WP External Links (nofollow, noopener & new window): легко добавляет атрибуты к внешним ссылкам.
• Attribute Manager: позволяет управлять любыми атрибутами HTML через админку.
• Image Attributes Pro: автоматизирует заполнение alt, title и других атрибутов изображений.

Выбор зависит от задач и уровня навыков.

Заключение по изменению атрибутов в WordPress

Управление атрибутами — важная и частая задача, которую можно решать через фильтры и хуки WordPress, не трогая исходники. Это повышает безопасность, SEO и удобство пользователей. Мы рассмотрели, как менять атрибуты ссылок, изображений и форм, привели практические примеры и готовые плагины для упрощения работы.