Пользователи WordPress обычно выбирают готовую AMP тему, но также можете создать собственную тему. В этой статье продолжим рассматривать предыдущую статью как написать свою AMP тему WordPress, а если точнее, то создание основного файла header.php и все что с ни связано.
На данный момент наша тема не предлагает никаких пользовательских стилей и макетов, но тем не менее может быть активирована и использована. Чтобы разработать AMP тему WordPress, нужно разделить всё на разделы. В этом нет необходимости, так как можно делать все в index.php, но хорошая практика программирования предполагает модульность.
Поэтому мы и разделим всю нашу работу на три раздела, а именно. верхний и нижний колонтитулы и контент. В соответствии с этими разделами, создадим эти файлы, а именно header.php, footer.php и content.php. Что облегчит написанию и читаемости кода темы в дальнейшем в случае ее изменения.
Amp файл Header.php — Шапка сайта
Если посмотрим на исходный код файла header стандартной темы, то увидим, что функция wp_head() выдает множество стандартных тегов WordPress в <head>, таких как CSS, JavaScript linkи metaтеги.
Для примера наш файл amp темы header.php будет делать следующее;
- Определять все мета теги ссылки внутри
<head>для HTML. - Отображать брендинг сайта — логотип либо имя и описание.
- Обеспечит навигацию по разным страницам сайта.
Давайте закодируем созданный файл header будущей AMP темы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> // Начало html документа <html ⚡> // ⚡ - обязательный тег для загрузки и распознавания AMP страниц (можно заменить на - amp) <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="icon" href=/favicon.png' type="image/png" /> <title> < ? php echo get_bloginfo("name"); ? > </title> <meta name="description" content='' /> <meta name="keywords" content='' /> <link rel="canonical" href="< ? php echo esc_url (home_url ());? >" /> <style amp-custom> Здесь пользовательские стили страниц </style> <script async src = "https://cdn.ampproject.org/v0.js"> </ script> <script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </script> <script async custom-element = "amp-ad" src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> <script async custom-element = "amp-sidebar" src = "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"> </script> </head> <body> <header> // Шапка сайта включает Логотип и кнопку меню </header> <amp-sidebar id="nav-sidebar1" layout="nodisplay" side="left"> // боковая колонка для вывода меню </amp-sidebar> <div id="article"> // Далее вывод контента в файле index.php |
Одна вещь, на которую я хочу обратить ваше внимание. Вы можете видеть, насколько «жестко» закодирован файл header.php для нашего будущего сайта на собственной WordPress теме AMP. Это означает, что я сократил код до минимума оставив только самое важное для понимания общей картины. С полным содержанием файла с комментариями к коду можете ознакомиться кликнув по ссылке: header.php.
Часто на боковых панелях отображаются ссылки на архивы, последние сообщения, учетные записи в социальных сетях, рекламные объявления и т. д. В нашем случае мы будем использовать в качестве навигации по сайту. Все таки AMP — это страницы для мобильных пользователей.
Ограничение в разметке AMP
Как видно из приложенного файла вся разметка использует подмножество HTML тегов с несколькими добавочными amp расширениями. Прежде чем приступить к разработке шаблона AMP, полезно знать несколько вещей об ограничениях, которые Google ввел в AMP для поддержания оптимальной производительности:
- Страницы AMP не могут содержать сценарии на стороне клиента, за исключением особых случаев. Любое использование
jQueryилиJavaScriptприведет к неверному шаблону AMP! - CSS может располагаться в теге
<style amp-custom></style>внутри<head>. Можно использоватьclassиidв своем HTML, но нельзя использовать встроенные CSS. Размер CSS также ограничен 50 килобайтами. Кроме того, некоторые стили CSS запрещены для производительности. - AMP использует свой собственный язык разметки AMP-HTML. Это означает, что некоторые теги HTML запрещены, в то время как другие должны быть преобразованы. Плагины автоматически преобразует HTML теги (например,
<img>становится<amp-img>) и удаляет запрещенные теги такие какembedилиframe. В нашем случае мы должны их преобразовать сами. Можете найти полный список запрещенных тегов HTML здесь. - Если хотите загружать вещи извне в своем контенте, то вам нужно использовать
httpsпротокол. Так как в дальнейшем будут ошибки при проверке кода в онлайн валидаторе AMP.
Вывод
Таким образом, наша тема будет иметь предопределенные стили, отзывчивость, и мы все равно сможем ее стилизовать дальше. На картинке ниже пример того что в итоге должно получиться.
Разработка темы WordPress — это долгая, утомительная, никогда не заканчивающаяся, но большая проблема программирования. Процесс разработки полностью зависит от того, как вы хотите, чтобы ваша тема выглядела.
На этом заканчиваю этот пост, но вам нужно знать, что многое еще предстоит узнать о WordPress. Надеюсь, что это краткое введение дало вам лучшее представление о том, как начать создавать AMP тему WordPress, соответствующую всем требованиям и стандартам. Далее в очереди разработки файл footer.php для AMP WordPress.
Если было что-то, чего вы не поняли, упомяните об этом в комментариях и удачного программирования!
