Написание AMP темы на движке WordPress особых знаний php и html языка не требуется. Но базовое знание html разметки очень пригодится. В данной статье разберем главные части темы WordPress без которых нам не обойтись для построения нашей собственной AMP темы для WordPress. Настроим файл styles.css и активируем тему.
Структура AMP страниц
Давайте вкратце разберем из чего же состоит любая тема WordPress. Возьмем самые главные части без которых не отобразятся amp-страницы и без чего не активируется Amp тема.
- Header.php (шапка сайта) — файл хранящий html разметку для отображения верхней части страницы сайта. Отвечает за такие функции как вывод логотипа, меню, формы поиска, мета описания для поисковиков, подключений стилей и скриптов.
- Single.php — используется как шаблон для вывода содержания одиночных записей блога из любых категорий сайта. По сути single.php и page.php — одинаковые.
- Arhive.php — выводит на станицу записи категорий, список всех имеющихся рубрик, меток и тегов.
- Index.php — по умолчанию отображает главную страницу сайта. Можно настроить вывод всех записей по мере их публикации, либо настроить по своему усмотрению и желаниям. Так как главная страница всегда посещаемая — к настройке нужно подойти более ответственно.
- Footer.php (подвал сайта) — завершающая часть страницы служит для размещения кода счетчика посещения сайта, текущий год, информацию о правообладателя. В некоторых темах размещается краткая навигация административной части и контактная информация обратной связи.
- Functions.php — в этом файле записаны встроенные функции WordPress, а также свои собственные php-функции, которые определяют правильность работы и загружается каждый раз, во время просмотра внешней части сайта. В отличие от плагинов, содержимое functions.php применяется только к той теме, к которой он принадлежит.
- Styles.css — файл стилей темы без которого не возможна активация любой темы, а также в нём прописаны все стили для визуального отображения сайта на любых устройствах и браузерах.
Создание темы для Amp страниц
Возьмём любую стандартную тему WordPress, например TwentySixteen, и будем её дополнять а также изменять имеющиеся файлы до полного соответствия AMP страницы. Можно взять любую несложную тему либо с генерировать базовую тему wordpress на сервере underscores.me . Вводим произвольное название будущей темы и в считанные секунды она уже у вас в папке «Загрузки» на локальном диске. Распаковываем ее в папку «themes» WordPress и тема готова к редактированию.
Из скаченного архива берем те файлы, которые рассматривали выше и приступаем к редактированию. Остальные можно смело удалять либо перенести в другую папку нужные нам файлы темы. Должен получится такой набор файлов:
- styles.css
- functions.php
- arhive.php
- footer.php
- header.php
- index.php
- page.php
- single.php
Styles.css AMP темы WordPress
Теоретическую основу о построении AMP страниц можно ознакомится на официальном сайте разработчика. Так как amp-страницы не поддерживают подключения стилей из файлов, то если мы удалим файл styles.php из нашего набора файлов — наша тема не запустится!!! В такой ситуации поступим следующим образом.
Файл styles.php нам нужен только для активации темы. Так что удаляем все последующее содержимое файла после таких строчек:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* Theme Name: Twenty Sixteen Theme URI: https://wordpress.org/themes/twentysixteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere. Version: 1.9 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog Text Domain: twentysixteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ |
Теперь можно немного видоизменить наше полученное содержание. Дать название темы, автора, описание темы, версию, теги и т.д. Вы можете придумать свое описание, но при этом придерживаться правилам по редактированию файла темы.
Неправильный шаг может поломать ваш сайт. Прежде чем делать правки советую делать копию редактируемого файла.
У меня получился файл с таким содержанием:
1 2 3 4 5 6 7 8 9 10 11 12 | /* Theme Name: AMP Theme URI: https://mrwp.ru/ Author: Mr. Wordpress Author URI: https://mrwp.ru/ Description: Wordpress Тема под AMP страницы для информационного сайта СЕЗОН№1 Version: 1.0 License: GNU General Public License v2 or later License URI: License Tags: amp, blog, google Text Domain: amp */ |
Сохраняем файл, переходим в раздел «Темы», активируем нашу созданную тему. Я добавил обложку темы для более приятного отображения. Скачал картинку в формате png и добавил в папку где лежит наш измененный файл style.css и все остальные файлы.
В следующей статье подробно разберем файл header.php wordpress где находится и какие php функции содержит. Так как файл шапки сайта для amp страниц содержит всю важную и основную информацию, то скорее всего займет несколько этапов разбора. Подправим код и протестируем на отображение в различных разрешений. А также проверим через amp валидатор и исправим все ошибки по мере их возникновения.
Если вы хотите добавить или создать AMP-версию сайта, но затрудняетесь это сделать — пишите нам в чат Telegram. А может ваш сайт вообще не адаптирован под мобильные устройства? Тогда тем более пишите, посоветуем, что можно сделать.
А продолжение? 🙁
Продолжение статьи по теме создания своей AMP темы на WordPress здесь