Пишем AMP тему для WordPress

amp тема wordpress AMP

Написание AMP темы на движке WordPress особых знаний php и html языка не требуется. Но базовое знание html разметки очень пригодится. В данной статье разберем главные части темы WordPress без которых нам не обойтись для построения нашей собственной AMP темы для WordPress. Настроим файл styles.css и активируем тему.

Структура AMP страниц

Давайте вкратце разберем из чего же состоит любая тема WordPress. Возьмем самые главные части без которых не отобразятся amp-страницы и без чего не активируется Amp тема.

  1. Header.php (шапка сайта) — файл хранящий html разметку для отображения верхней части страницы сайта. Отвечает за такие функции как вывод логотипа, меню, формы поиска, мета описания для поисковиков, подключений стилей и скриптов.
  2. Single.php — используется как шаблон для вывода содержания одиночных записей блога из любых категорий сайта. По сути single.php и page.php — одинаковые.
  3. Arhive.php — выводит на станицу записи категорий, список всех имеющихся рубрик, меток и тегов.
  4. Index.php — по умолчанию отображает главную страницу сайта. Можно настроить вывод всех записей по мере их публикации, либо настроить по своему усмотрению и желаниям. Так как главная страница всегда посещаемая — к настройке нужно подойти более ответственно.
  5. Footer.php (подвал сайта) — завершающая часть страницы служит для размещения кода счетчика посещения сайта, текущий год, информацию о правообладателя. В некоторых темах размещается краткая навигация административной части и контактная информация обратной связи.
  6. Functions.php — в этом файле записаны встроенные функции WordPress, а также свои собственные php-функции, которые определяют правильность работы и загружается каждый раз, во время просмотра внешней части сайта. В отличие от плагинов, содержимое functions.php применяется только к той теме, к которой он принадлежит.
  7. 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 нам нужен только для активации темы. Так что удаляем все последующее содержимое файла после таких строчек:

Теперь можно немного видоизменить наше полученное содержание. Дать название темы, автора, описание темы, версию, теги и т.д.  Вы можете придумать свое описание, но при этом придерживаться правилам по редактированию файла темы.

Неправильный шаг может поломать ваш сайт. Прежде чем делать правки советую делать копию редактируемого файла.

У меня получился файл с таким содержанием:

Сохраняем файл, переходим в раздел «Темы», активируем нашу созданную тему. Я добавил обложку темы для более приятного отображения. Скачал картинку в формате png и добавил в папку где лежит наш измененный файл style.css и все остальные файлы.

amp тема для wordpress

В следующей статье подробно разберем файл header.php wordpress где находится и какие php функции содержит. Так как файл шапки сайта для amp страниц содержит всю важную и основную информацию, то скорее всего займет несколько этапов разбора. Подправим код и протестируем на отображение в различных разрешений. А также проверим через amp валидатор и исправим все ошибки по мере их возникновения.

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

Оцените статью
Добавить комментарий

  1. Владимир

    А продолжение? 🙁

    Ответить
    1. Алекс автор

      Продолжение статьи по теме создания своей AMP темы на WordPress здесь

      Ответить