Репозиторий
https://github.com/ampirecity/AMPWPBasics2
Чему я научусь?
Настройка логотипа навигации «Вернуться на главную» в заголовке с помощью AMP-Img;
Настройка меню AMP с помощью AMP-боковой панели;
Добавление хлебных крошек в пользовательскую тему AMP Wordpress.
Требования:
• Подготовленная версия WordPress для разработки AMP на выбранном вами сервере;
• Плагин AMP для Wordpress;
• Базовые знания CSS и HTML;
• Базовые знания PHP.
Сложность:
Новичок
Полезные ссылки:
Подготовленная версия Wordpress AMP: https://github.com/ampirecity/AMPWPBasics1
Часть 1: Настройка Wordpress для пользовательской темы AMP: https://medium.com/@ctdots/amp-wordpress- basics-1-setting-up-wordpress-for-a-custom-theme-992ad8261fd6?source=friends_link&sk=b94f7acc354903361a1e1d288d2bd4a5
AMProject: https://www.ampproject.org/docs/reference/components/amp -sidebar
AMPbyExample: https://ampbyexample.com/components/amp-sidebar/
Совет для профессионалов: начните разработку веб-страницы с навигацией
Есть много способов начать разработку веб-сайта, и некоторые из них проще, чем другие. Большинство проектов в моей профессиональной карьере были связаны с проектированием, а не с реализацией, поэтому я работал со многими разными разработчиками и видел много разных подходов. Основная ошибка, которую я видел, — это разработка веб-страницы страница за страницей, что приводит к большому беспорядку в CSS.
Что я предпочитаю, так это разработку от НИЗКОЙ до ВЫСОКОЙ точности, или, если быть более точным, от абстрактных/универсальных до конкретных частей веб-сайта. Для такой методики разработки настройка навигации в первую очередь оказалась очень удобной. В этом уроке мы узнаем, как это реализовать, начнем с самого простого.
Настройка логотипа домашней навигации в шапке
Эта часть особенно проста, просто оберните логотип веб-сайта HTML-тегом <a>, указывающим на URL-адрес вашей домашней страницы, внутри вашего заголовка. PHP-код для создания домашнего URL-адреса:
="<?php echo esc_url( home_url( '/' ) ); ?Не забывайте, что на веб-сайте AMP требуется тег amp-img вместо тега img. Собрав все вместе, кнопку «Домой» на логотипе можно создать с помощью такого простого кода:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<amp-img class="home-button" src="<?php bloginfo('stylesheet_directory') ?>/images/safari-logo.png" width="150" height="70" alt="safari.lt logotype"></amp-img>
</a>
Настройка меню AMP через боковую панель AMP
Чтобы перемещаться по веб-сайту, вам нужно иметь страницы для навигации. Это можно сделать, добавив столько страниц, сколько вы хотите, в панели администратора Wordpress. Создание страниц для AMP не требует особого подхода.
Перед настройкой меню в Wordpress для вашей пользовательской темы AMP необходимо сначала зарегистрировать его. В моем случае я хочу зарегистрировать два разных места для меню: боковое меню AMP для основной навигации; Меню нижнего колонтитула AMP для будущего развития. Этого можно добиться в файле functions.php с помощью следующих нескольких строк:
// Register Wordpress menus
function register_my_menus() {
register_nav_menus(
array(
'amp-footer-menu' => __( 'AMP Footer Menu' ),
'amp-sidebar-menu' => __( 'AMP Sidebar Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );После этого на вкладке «Внешний вид» панели администратора Wordpress появится опция «Меню», где вы можете создать меню и разместить его на позициях, которые мы только что создали в нашем functions.php.
Добавление меню Wordpress в пользовательскую тему AMP
Теперь, когда мы создали наше главное меню и добавили его в меню боковой панели AMP, мы можем добавить его в нашу пользовательскую тему AMP, просто вызвав его в header.php, что выведет код на все страницы веб-сайта.
<amp-sidebar id="sidebar" layout="nodisplay" side="right">
<?php wp_nav_menu(array('theme_location' => 'amp-sidebar-menu', 'container_class' => 'sidebar')); ?>
</amp-sidebar>Как видите, layout=”nodisplay” указывает, что боковая панель по умолчанию скрыта, поэтому вам нужна кнопка для ее отображения. Этого можно добиться, добавив on=’tap:sidebar.toggle’ к любому элементу, чтобы открыть или закрыть боковую панель. Если от элемента требуется только открытие или закрытие сайдбара, то конкретно добавить .open или .close вместо .toggle.
Пока весь код с сайдбаром и кнопками его открытия/закрытия, вместе с нашим меню Wordpress и логотипом возврата домой должно выглядеть примерно так:
<header> <div class="amp-logo"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <amp-img class="home-button" src="<?php bloginfo('stylesheet_directory') ?>/images/safari-logo.png" width="150" height="70" alt="safari.lt logotype"></amp-img> </a> </div><div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger"> <span></span> <span></span> <span></span> </div> </header><amp-sidebar id="sidebar" layout="nodisplay" side="right"> <div role="button" aria-label="close sidebar" on="tap:sidebar.toggle" tabindex="0" class="close-sidebar">✕</div> <?php wp_nav_menu(array('theme_location' => 'amp-sidebar-menu', 'container_class' => 'sidebar')); ?> </amp-sidebar>
Активация боковой панели AMP для пользовательской темы
Теперь, когда у нас есть код, осталось активировать боковую панель AMP. Одним из преимуществ установки плагина AMP для Wordpress является то, что вам не нужно добавлять какие-либо необходимые сценарии AMP, как в этом случае — amp-sidebar-0.1.js. Плагин сделает это за вас, как только обнаружит боковую панель в вашем коде. Без плагина этого можно добиться, добавив этот код в ваш заголовок:
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>Добавление хлебных крошек в пользовательскую тему AMP Wordpress.
Когда все остальное на месте, осталось добавить хлебные крошки в нашу пользовательскую тему AMP Wordpress, прежде чем мы закончим. Внедрение хлебных крошек в Wordpress не требует ничего дополнительного, чтобы веб-сайт был готов к AMP. В базе Wordpress не установлены хлебные крошки, поэтому нужно либо установить плагин, либо написать для него код.
Поскольку я использую плагин Yoast SEO на каждом веб-сайте, которым управляю, я также использую его для создания хлебных крошек для веб-сайта. Это можно сделать в два простых шага:
Во-первых, нам нужно активировать хлебные крошки в плагине Yoast SEO.
Во-вторых, нам нужно вызвать хлебные крошки в том месте, где мы хотим, чтобы они были. Обычная практика — под заголовком, над содержимым, то есть в конце нашего header.php.
<div class="content-wrapper container">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
..и мы закончили! Не забудьте закрыть. обертка контента на footer.php 😉
Первоначально опубликовано 01.04.2019
Версии:
Wordpress 5.1
AMP 1.02
