Как использовать AMP с WordPress

AMP — это совместная работа, которая обещает лучшую производительность загрузки страниц для сайтов в мобильной среде. Но, как вы можете узнать из нашего предыдущего урока, вам придется пожертвовать модными вещами со своего веб-сайта и строго следовать правилам, соблюдать руководящие принципы и проверять страницы. Похоже, многое нужно сделать, не так ли?

К счастью, если вы создали свой сайт с помощью WordPress, вы можете сразу же применить AMP к своему сайту, используя плагин под названием AMP-WP, Он поставляется с большим количеством функций, чем кажется на первый взгляд. Итак, давайте посмотрим, как это работает.

Читайте также: 10 важных компонентов ускоренных мобильных страниц (AMP), которые вы должны знать

активация
Для начала войдите на свой сайт, перейдите в Плагины> Добавить новый экран. Поиск «AMP; установить и активировать один из Automattic,
После активации вы можете просмотреть сообщение, преобразованное в AMP, добавив / amp / trail в конце URL-адреса записи (например, http://wp.com/post/amp/) или с помощью? Amp = 1 (например, http : //wp.com/post/? amp = 1) если вы не используете милые постоянные ссылки особенность на вашем сайте.
И, как вы можете видеть выше, посту были даны основные стили, которые вы можете дополнительно настроить.
Отметить
Есть несколько вещей, которые вы должны знать о состоянии плагина на данный момент:

• Архивы — категория, тег и пользовательская таксономия — в настоящее время не поддерживаются. Они не будут преобразованы в AMP-совместимый формат. Тем не менее, пользовательские типы постов могут быть инициированы в AMP через фильтр.
• Он не добавляет новый экран настроек на панели инструментов. Настройка выполняется на уровне кода с помощью действий, фильтров, класса.
• Плагин в настоящее время не включает в себя все пользовательские элементы AMP, такие как amp-analytics и amp-ad из коробки. Если вам нужны эти элементы, вы должны будете включить их, подключив Действия или Фильтры плагина.

Читайте также: Как использовать WordPress Action Hooks в настройке темы

настройка

Плагин предоставляет множество действий и фильтров, которые обеспечивают гибкость настройки стилей, содержимого страницы и даже HTML-разметки страницы AMP в целом.
Стили
Я уверен, что это одна вещь, которую вы хотите изменить сразу после активации плагина, например, изменение цвета фона заголовка, семейства шрифтов и размера шрифта для лучшего соответствия бренду и индивидуальности вашего сайта.

Для этого мы можем использовать действие amp_post_template_css в файле functions.php нашей темы.
function theme_amp_custom_styles () {?>
nav.amp-wp-title-bar {
цвет фона: оранжевый;
}
элемент, и переопределяет предыдущие правила стиля. Следовательно, оранжевый цвет фона теперь применяется к заголовку.
Вы можете продолжить писать правила стиля, как обычно. Но имейте в виду несколько ограниченийи держите размеры стилей ниже 50Кб. Если вы сомневаетесь, пожалуйста, обратитесь к нашей предыдущей статье о том, как проверить ваши страницы AMP.
шаблонирование
Если вам, кажется, нужно многое изменить, помимо стиля, вы можете попробовать настроить весь шаблон. Плагин amp-wp предоставляет ряд встроенных шаблоныа именно:

• Заголовок-bar.php
• мета-author.php
• мета-taxonomy.php
• мета-time.php
• single.php
• style.php

Эти шаблоны очень похожи на обычные Иерархия шаблонов WordPress,

Каждый из этих шаблонов можно использовать, указав файл с тем же именем в папке / amp / в теме. Как только эти файлы будут созданы, плагин подберет их вместо файлов по умолчанию и позволит нам полностью изменить вывод этих шаблонов.

две тысячи двенадчать
40── 404.php
Amp── amp
Meta ├── meta-author.php
Meta ├── meta-taxonomy.php
Single ├── single.php
Style └── style.php

Вы можете переписать все стили через файл style.php или изменить всю структуру страницы AMP в соответствии с вашими потребностями с помощью single.php. Тем не менее, вам придется сохранить изменения, чтобы соответствовать правилам AMP.
Список крючков и фильтров
Как упоминалось ранее, этот плагин поставляется с рядом действий и фильтров. Невозможно осветить каждую из этих статей. Но мы можем пойти с таблицей, резюме, а также с фрагментами, которые вам нужны:
действия
Amp_init; действие полезно для плагинов, которые полагаются на AMP для их работы; он запускается, когда плагин уже запущен.
function amp_customizer_support_init () {
require_once dirname (__FILE__). ‘/Amp-customizer-class.php’;
}
add_action (‘amp_init’, ‘amp_customizer_support_init’);
Подобно действию wp_head, мы можем использовать amp_post_template_head для включения дополнительных элементов в тег head на страницах AMP, таких как мета, стиль или сценарий.

function theme_amp_google_fonts () {?>

<? php}
add_action (‘amp_post_template_footer’, ‘theme_amp_end_credit’);
фильтры

amp_content_max_width используется для установки максимальной ширины страницы AMP. Ширина также будет использоваться для установки ширины встроенных элементов, таких как видео на Youtube.
function theme_amp_content_width () {
возврат 700;
}
add_filter (‘amp_content_max_width’, ‘theme_amp_content_width’);
amp_site_icon_url используется для установки значка — значок и значок Apple — URL. Значение по умолчанию падает до изображение загружено через интерфейс иконки сайта, который был представлен в версии 4.3,

function theme_amp_site_icon_url () {
    вернуть get_template_directory_uri (). ‘/Images/site-icon.png’;
}
add_filter (‘amp_site_icon_url’, ‘theme_amp_site_icon_url’);
Параметр amp_post_template_meta_parts предназначен для случаев, когда необходимо настроить вывод метаданных сообщения, например имя автора, категорию и отметка времени, С помощью этого фильтра вы можете изменить порядок по умолчанию или удалить одну из мета со страницы AMP.
function theme_amp_meta ($ meta) {

foreach (array_keys ($ meta, ‘meta-time’, true) как $ key) {
unset ($ meta[ $key ] );
}

вернуть $ meta;
};
add_filter (‘amp_post_template_meta_parts’, ‘theme_amp_meta’);

amp_post_template_metadata предназначен для настройки структуры данных Schema.org на страницах AMP. В следующем примере показано, как мы предоставляем логотип сайта, который будет отображаться в карусели AMP в результатах поиска Google, и удаляем измененную временную метку страницы.
function amp_schema_json ($ metadata) {

unset ($ метаданные[ ‘dateModified’ ] );

$ метаданных[ ‘publisher’ ][ ‘logo’ ] = массив (
‘@type’ => ‘ImageObject’,
‘url’ => get_template_directory_uri (). ‘/Images/logo.png’,
‘высота’ => 60,
‘ширина’ => 325,
);
вернуть $ метаданные;
}
add_filter (‘amp_post_template_metadata’, ‘amp_schema_json’, 30, 2);
amp_post_template_file это альтернативный способ переопределения файлов шаблонов. Это полезно, если вы предпочитаете размещать файлы пользовательских шаблонов AMP в другом каталоге, кроме / amp /.
function theme_custom_template ($ file, $ type, $ post) {
    if (‘meta-author’ === $ type) {
        $ file = get_template_directory_uri (). ‘/Partial/amp-meta-author.php’;
    }
    вернуть $ file;
}
add_filter (‘amp_post_template_file’, ‘theme_custom_template’, 10, 3);
amp_query_var используется для изменения конечной точки страницы AMP, когда включена постоянная ссылка URL. По умолчанию установлено значение / amp /. Учитывая следующее, страницу AMP теперь можно получить, добавив / m / в URL (например, www.example.com/post-slug/m/).
function custom_amp_endpoint ($ amp) {
    вернуть ‘м’;
}
add_filter (‘amp_query_var’, ‘custom_amp_endpoint’);