Посетители вашего сайта получают доступ к его содержимому не только через ПК, но и через мобильные устройства. Если вы являетесь владельцем блога WordPress, то внедрение плагинов WordPress AMP на вашем сайте позволит поставлять контент, оптимизированный для мобильных пользователей.
Чтобы улучшить время загрузки вашего сайта на мобильных устройствах, вам необходимо создать для сайта документы AMP HTML. И это может быть столь же трудоемким процессом, как создание нового сайта полностью. Плагины WordPress AMP были созданы, чтобы позаботиться об этой задаче для вас. Они интегрируют совместимость AMP в существующий веб-сайт WordPress. Плагины AMP обеспечат мобильные функциональные возможности, которые также требуются сайту.
AMP HTML
Страницы сайта WordPress построены с использованием HTML-документов. Чтобы создать записи и страницы AMP, вам нужно создать урезанную версию вашего сайта, HTML AMP.
AMP HTML поддерживает таблицы стилей и javascript на урезанном уровне. Он не реализует все функциональные возможности исходного документа HTML. Во-первых, AMP минимизирует HTML и CSS, удаляя ненужные комментарии к коду. Он удаляет неиспользуемый код и использует более короткие имена переменных и функций. Кроме того, изображения или объявления загружаются только в том случае, если пользователь увидит их.
Поскольку AMP HTML является легким, Google кэширует страницы AMP на своих серверах и быстро обслуживает их.
4 лучших плагинов WordPress AMP
Это список лучших плагинов AMP для WordPress, которые вы можете использовать для интеграции AMP на вашем сайте. Мы рассмотрим основные возможности каждого плагина.
AMP
AMP for WordPress — это бесплатный и простой в использовании официальный плагин AMP для WordPress. Он создает страницы AMP так же, как WordPress создает и обрабатывает свое содержимое, поэтому нет никакого отклонения от стандарта создания контента WordPress.
Плагин также определяет источники ошибок в HTML и определяет ответственные компоненты сайта. Это позволяет принимать корректирующие действия, которые будут исправлять все ошибки.
Плагин AMP для WP (https://wordpress.org/plugins/amp/) совместим с основными темами WordPress. Есть три режима шаблона при использовании этого плагина. Это повлияет на то, как ваш сайт будет отображаться на мобильном устройстве в отношении активной темы WordPress на вашем сайте.
Стандартный режим шаблона
Активная тема интегрирует структуру AMP, таким образом, используя свои стили и шаблоны для отображения ваших веб-страниц. При использовании этого режима нет отдельных версий AMP и без AMP. Это означает, что главный URL-адрес вашего сайта является URL-адресом AMP, а ваш сайт-сайтом AMP в целом.
Переходный режим шаблона
В этом режиме создаются версии вашего сайта с AMP и без AMP. Он использует шаблоны активной темы. Главный URL-адрес будет иметь соответствующий URL-адрес AMP. Этот режим служит для всего сайта AMP, если к нему обращается мобильное устройство.
Режим шаблона чтения
Он генерирует парный контент AMP с использованием упрощенных шаблонов. Эти шаблоны не связаны с внешним видом активной темы на вашем сайте. Этот режим служит только для записей или страниц в качестве AMP, а не для всего сайта.
Чтобы использовать этот плагин, найдите его в консоли поиска в области администрирования WordPress в разделе «Плагины > Добавить новые». Установите и активируйте плагин. Значок усилителя появится на панели управления.
Вы можете настроить плагин для вашего сайта, нажав на значок AMP>Общие.
Затем выберите один из трех режимов шаблона в соответствии с потребностями вашего сайта.
Если вы выберете режим шаблона чтения, вам будут представлены типы контента, которые будут доступны как AMP. Выберите, и сохраните изменения.
Плагин AMP теперь будет отображать ваш сайт на мобильных устройствах.
Плагин WordPress Amp — AMP for WP
AMP for WP (https://wordpress.org/plugins/accelerated-mobile-pages/) имеет широкий спектр функций и возможностей для интеграции AMP на вашем сайте.
После установки и активации плагина вам придется настроить его в соответствии с потребностями вашего сайта.
На экране «общие настройки» у вас есть возможность загрузить логотип на свой сайт. Поддержка AMP дает возможность включить AMP для записей и страниц. Включение AMP для главной страницы направляет пользователя к версии AMP сайта, когда нажимается логотип вашего сайта. Другие настройки на этом экране включают включение усилителя на пользовательской главной странице и включение усилителя на архивных записях (категория и теги).
Раздел дизайн на экране дает вам возможность выбрать тему. Это определит внешний вид вашего мобильного сайта. Вы также можете получить премиум-темы для вашего сайта.
Раздел «header» позволяет выбрать поиск заголовка сайта, когда браузер обслуживает его на мобильном устройстве.
После настройки нажмите кнопку Сохранить изменения, чтобы применить их на вашем сайте.
Давайте посмотрим, как плагин работает на сайте. В области администрирования щелкните Записи>все записи>выберите запись для редактирования.
Прокрутите экран вниз и найдите раздел AMP Page Builder.
- Поставьте галочку напротив Use This Content as AMP Content
- Нажмите на кнопку Copy the Content (копировать содержимое). Плагин копирует и вставляет весь текст сообщения, выбранного в текстовом поле AMP editor.
- Выполните предварительный просмотр страницы АМР.
Вот как запись выглядит без АМР
Вот как выглядит запись с использованием плагина AMP for WP.
Убедитесь, что вы нажали кнопку Обновить, чтобы сохранить изменения.
Читайте также: Как оптимизировать производительность WordPress.
Плагин WordPress Amp — WeeblrAMP CE
С помощью WeeblrAMP (https://wordpress.org/plugins/weeblramp/) вы можете создать версию AMP почти всего вашего сайта, включая страницы, записи, категории и т. д. Этот плагин начинает делать свою работу после установки.
Настройки для плагина делятся на две категории: базовые настройки и кастомные настройки
Базовые настройки заботятся обо всех общих параметрах конфигурации. Это включает в себя выбор страницы, метаданные, настройки SEO и комментарии.
Кастомная настройка связана с визуальным аспектом ваших страниц AMP. Это означает, что вы можете настроить внешний вид, макет страницы, заголовок и стиль страницы.
Установка
Для начала установите и активируйте плагин из админки вашего сайта.
После завершения активации нажмите на weeblrAMP>Настройки
На главной вкладке выберите режим работы. Позже вы можете перейти в «нормальный» режим
Затем выберите тему для своих АМР страниц.
На вкладке выбор страниц выберите записи и страницы, для которых плагин должен создавать версии AMP. Кроме того, включите категории для этого раздела.
Вы можете сделать настройку по своему желанию на всех вкладках настроек и настроить категории. Убедитесь, что вы нажали кнопку Сохранить изменения, чтобы применить эти изменения к плагину.
Теперь, когда у вас есть настроенный плагин AMP, давайте посмотрим, как ваш блог будет отображаться на мобильном устройстве. Открыв запись или страницу в Редакторе, нажмите на значок АМР в правом верхнем углу экрана.
Читайте также: Как добавить микроразметку на ваш сайт WordPress.
Запись будет выглядеть так.
А вот так выглядит запись без АМР.
Вы заметите, что плагин AMP лишил страницу некоторых текстов. Комментарии, последние сообщения и параметры поиска были удалены в представлении AMP mobile display.
Бонус Glue for Yoast SEO & AMP
Glue for Yoast SEO & AMP ( https://wordpress.org/plugins/glue-for-yoast-seo-amp/) плагин улучшает функциональность официального плагина AMP. Он интегрирует Yoast SEO в ваши страницы AMP и обеспечивает простой способ оптимизации ваших страниц AMP для поиска.
Во-первых, установите и активируйте этот плагин.
Чтобы изменить настройки на странице AMP, в области панели администратора перейдите в раздел SEO>AMP.
На вкладке типы записей включите AMP SEO для записей, страниц и мультимедиа.
Сохраните изменения, когда закончите.
На вкладке дизайн можно настроить внешний вид страниц. Вы можете загрузить изображение, которое будет служить в качестве значка усилителя. Вы также можете загрузить изображение по умолчанию, которое будет использоваться, когда запись на вашем сайте AMP не содержит изображения.
Дальнейшая настройка
В разделе «цвета содержимого» вы можете выбрать цвета.
Вы также можете настроить цвета ссылок, включить или отключить подчеркивание для ссылок, выбрать цвет для блочных цитат и многое другое.
После завершения настройки нажмите кнопку Сохранить изменения.