Как добавить поддержку AMP в WordPress: подробный разбор и практические решения

Автор: Маргарита Волкова | Опубликовано: 25.12.2025

Что такое AMP и зачем он нужен для WordPress-сайтов

AMP (Accelerated Mobile Pages) — это технология, созданная Google для ускорения загрузки мобильных страниц. Важность AMP для WordPress-сайтов заключается в улучшении скорости загрузки и повышении удобства для мобильных пользователей, что положительно влияет на SEO и поведенческие факторы.

AMP делает страницы легче, ограничивая использование тяжёлого JavaScript и CSS, что значительно ускоряет загрузку. В результате посетители получают быстрый доступ к контенту, а поисковые системы лучше ранжируют страницы.

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

Основные способы добавления AMP в WordPress

Официальный плагин AMP от команды WordPress

Самый простой способ — установить официальный плагин AMP. Он автоматически создаёт AMP-версии страниц, постов и категорий.

Преимущества:
— простая настройка;
— совместимость с большинством тем и плагинов;
— поддержка нескольких режимов: классический, стандартный, транзитный.

Недостатки:
— ограниченная гибкость в кастомизации;
— возможны конфликты с некоторыми плагинами, использующими сложные скрипты.

Плагины с расширенными возможностями AMP

Для более продвинутой настройки можно использовать плагины, например, Clearfy Pro, который помимо оптимизации и безопасности, предлагает инструменты для управления AMP и устранения конфликтов.

Также полезны плагины, которые интегрируются с AMP и улучшают совместимость с визуальными редакторами и кастомными шорткодами.

Как решить основные проблемы при внедрении AMP в WordPress

Проблема 1: Несовместимость AMP с кастомными шорткодами и виджетами

Многие шорткоды и виджеты используют JavaScript или сложный CSS, что AMP запрещает. Чтобы решить проблему, можно создать адаптированные версии шорткодов, которые будут корректно работать в AMP-страницах.

Пример функции, адаптирующей шорткод для AMP на wpnote.ru:

function wpnote_amp_shortcode_handler($atts) {
    if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
        return '<div>AMP-совместимый контент</div>';
    } else {
        return wpnote_original_shortcode_handler($atts);
    }
}

Здесь is_amp_endpoint() проверяет, показывается ли страница в AMP, и в зависимости от этого выводится упрощённый контент.

Проблема 2: Ошибки валидации AMP-страниц

Ошибки валидации — частая проблема, которая мешает страницам попадать в индекс Google как AMP. Для их проверки используйте инструменты:
— Google AMP Test;
— консоль разработчика Chrome (вкладка Console);
— плагины для отладки AMP.

Основные ошибки: запрещённый JavaScript, inline-стили, невалидные теги. Их нужно исправлять, удаляя или заменяя на разрешённые аналоги.

Проблема 3: Стилизованные блоки и их адаптация под AMP

AMP ограничивает CSS до 50 КБ и запрещает некоторые свойства. Чтобы стилизовать элементы, используйте только разрешённые свойства и минимизируйте CSS.

Рекомендуется использовать встроенные стили в <style amp-custom>. Вот пример минимального стиля для AMP:

<style amp-custom>
  .wpnote-amp-box {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
  }
</style>

Практическое руководство: добавляем AMP-поддержку с кастомизацией

1. Устанавливаем официальный плагин AMP:

function wpnote_install_amp_plugin() {
    if ( !is_plugin_active( 'amp/amp.php' ) ) {
        include_once ABSPATH . 'wp-admin/includes/plugin.php';
        activate_plugin( 'amp/amp.php' );
    }
}

2. Создаем адаптированный шорткод, который будет корректно работать в AMP:

add_shortcode('wpnote_button', 'wpnote_amp_button_shortcode');
function wpnote_amp_button_shortcode($atts) {
    $atts = shortcode_atts( array('text' => 'Нажми меня'), $atts );
    if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
        return '<button style="background:#0073aa;color:#fff;padding:10px 20px;border:none;border-radius:4px;">' . esc_html($atts['text']) . '</button>';
    } else {
        return '<button class="wpnote-button">' . esc_html($atts['text']) . '</button>';
    }
}

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

function wpnote_amp_add_styles() {
    if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
        echo '<style amp-custom> .wpnote-button { background-color:#0073aa; color:#fff; padding:10px 20px; border:none; border-radius:4px; cursor:pointer; } </style>';
    }
}
add_action('wp_head', 'wpnote_amp_add_styles');