Начинаем создавать тему

Урок 1

  Получите бесплатный доступ к первым 3-м урокам курса, для этого зарегистрируйтесь или войдите.

Урок 1

Первые шаги при создании темы WordPress на основе готовой вёрстки

В этом уроке мы делаем первые шаги по переносу нашей обычной HTML + CSS вёрстки на WordPress тему.

В процессе курса я рекомендую вам использовать свою вёрстку, но если такой вариант для вас пока что трудноват, то скачивайте мою, на которой я и буду всё показывать.

Вот она:

Для доступа к файлам вёрстки необходимо приобрести курс.

Что такое стартовые темы и для чего они нужны

Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css

Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS 😅

Первоначально стартовые темы задуманы для упрощения этого процесса – чтобы вам вроде как пришлось меньше писать один и тот же код. Вроде как. Когда я только начинал свою карьеру в создании WordPress-тем, и когда даже не знал о существовании стартовых тем (а может их и вовсе не было), я задумывался о создании своего собственного «темплейта», то есть стартовой темы, при помощи которой я бы мог сэкономить себе время.

Сейчас в мире не существует такой стартовой темы, которая бы подошла под мои уникальные ежедневные задачи, да и как вы убедитесь в процессе этого курса, они также не подходят и для переноса вёрстки на WordPress. Опс. Меня за это захейтят.

Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.

Сайт темы Underscores (underscores.me), вам достаточно ввести название темы и кликнуть кнопку Generate, после чего тема скачается.

Параметры темы

В самом начале урока я создал файл style.css и вставил туда следующий код:

/*
 * Theme name: Тема для курса
 * Author: Миша
 * Author URI: https://misha.blog
 */

Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:

Description
Описание темы, которое будет отображаться в админке.
Version
Версия темы, например 1.0
License
Тут можете указать название лицензии, под которой распространяется тема, обратите только внимание, что WordPress требует лицензию GPL
License URI
Можно указать ссылку на лицензию.
Tags
Если планируете загрузить тему на официальный репозиторий тем WordPress, здесь потребуется указать теги, по которым можно будет найти вашу тему. Список тегов можно найти тут.

Есть ещё параметры Template и Text Domain, но о них мы поговорим в следующих уроках.

Изображение темы

В видеоуроке я быстро сделал скриншот главной страницы вёрстки и закинул его в папку с темой с названием screenshot.png – и этот скриншот сразу же стал изображением темы:

Изображение превью темы WordPress

Однако вы заметили, что он не идеально подошёл по размерам, чтобы это исправить, вам следует использовать рекомендуемое разрешение 1200x900px.

Функции PHP и WordPress

В этом уроке для динамического вывода содержимого, мы использовали функции WordPress (они описаны чуть ниже) и одну функцию PHP – date(). Для вывода текущего года.

Тут я прежде всего рекомендую вам почитать моё руководство по PHP для начинающих, чтобы немного разобраться в теме.

Функции WordPress, использованные в этом уроке

В конце каждого урока моего курса вы встретите такой раздел со ссылками на подробную документацию всех использованных в уроке функций.

  • wp_head() и wp_footer() – эти функции – основа любой темы WordPress, именно благодаря им плагины могут вклинивать свои собственные стили, скрипты, код яндекс метрики в наш сайт.
  • get_stylesheet_directory_uri() – функция позволяет вернуть динамически абсолютный URL папки с текущей темой. Тут также хочу обратить ваше внимание на функцию get_stylesheet_uri().
  • bloginfo() – при помощи этой функции мы выводили кодировку сайта, название и описание, но она также может получать и другую информацию, об этом читайте в её документации.
  • wp_get_document_title() – относительно новая функция, которая способна динамически выводить тайтл страниц сайта.
  • language_attributes() – выводит атрибут lang для тега <html> с текущим языком сайта.

Что делать, если админ-панель наехала на вёрстку сайта?

После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.

Админ панель WordPress перекрывает фиксированное меню в вёрстке

Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.

В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php:

add_filter( 'show_admin_bar', '__return_false');

Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?

В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0, верно?

  • Высота админ панель для десктопа 32px, значит мы меняем упомянутое выше свойство на top:32px.
  • Высота админ бара для мобайл (менее 782px) 46px, а значит меняем свойство меню на top:46px.

После добавления соответствующих CSS-стилей вы можете заметить, что изменения применяются даже тогда, когда админ-панель не отображается на сайте! (например для незарегистрированных пользователей). Что делать?

  1. Добавьте к тегу <body> функцию body_class() примерно так: <body <?php body_class() ?>> – суть этой функции в том, что она добавляет различные CSS-классы в зависимости от того, зареган пользователь или нет, от того, на какой странице мы находимся и так далее.
  2. Используйте появившийся класс в теге <body> – .admin-bar, для того, чтобы применять соответствующие стили только для ситуаций, когда админ бар отображается на сайте.

Также можете почитать на моём сайте урок, в котором я переносил админ бар в нижнюю часть страницы.

Что делать, если в процессе выполнения этого урока у вас всё сломалось и отображается белый экран?

Если вы делали шаги в этом уроке, но после того, как вставили или изменили какой-то код, у вас стал отображаться белый экран, и вы не знаете из-за чего, то вы можете поступить следующим образом:

  1. Открываем файл wp-config.php, который лежит в корне вашей установки WordPress
  2. Ищем там параметр WP_DEBUG и устанавливает его равным true (таким его и можно оставить до конца нашего курса).
  3. После этого вместо вашего белого экрана у вас будет отображаться, какие ошибки возникли в процессе с указанием того, на какой строке и в каком файле находится ошибка в коде.
  4. Исправляете и продолжаем 😁

Будет ли домашнее задание?

Лучше всего, если после просмотра урока вы будете повторять мои шаги с той же вёрсткой, которую вы можете скачать в предыдущем уроке.

Конечно, вы можете взять любую другую, возможно даже ту, которую вам нужно сделать для заказчика! С одной стороны так будет даже лучше, но и тяжелее конечно.