Как создать WordPress тему из HTML шаблона. Часть 1 — Введение

как создать тему wordpress

Это первая часть руководства по созданию темы WordPress из HTML-шаблона. Следуя инструкциям в следующих статьях, вы узнаете, как превратить HTML-шаблон в полностью функциональную и рабочую тему для WordPress.

Но если вы не имеете представления, с чем работаете, и все, что вы делаете, это просто копирование и вставка фрагментов кода, найденных в интернете, которые вы не понимаете, очень легко совершить ошибки и чрезвычайно сложно исправить их самостоятельно.

По этой причине в этой части мы поговорим о ключевых особенностях WordPress в целом и представим различные рабочие части темы WordPress.

Прежде чем вы начнете читать это введение, в идеале у вас должно быть представление о принципах работы с HTML / CSS и, по крайней мере, базовое понимание PHP.

Цикл WordPress

Давайте начнем с того, что WordPress полностью поддерживает: цикл WordPress, также известный как «The Loop», представляет собой блок кода PHP, используемый для отображения записей или страниц в WordPress.

Используя альтернативный синтаксис PHP, цикл выглядит так:

Это обычный способ написания цикла в наши дни. Но, используя более старомодный способ кодирования, цикл выглядит следующим образом:

Циклы вызывают предварительно написанные функции PHP в WordPress, которые выводят определенные записи.

Have posts обращается к базе данных, и спрашивает, есть ли доступный контент. Поскольку он использует условие PHP if, если есть доступный контент, он переходит к следующему шагу, тогда как если нет никакого контента, то ничего не происходит, соответственно цикл воспроизводит код else. В этом случае он просто отображает текст «Извините, записей не найдено».

Использование выражения while в PHP создает цикл, который продолжает делать что-либо, пока указанное вами условие истинно. В нашем случае нами указано условие — «have_posts», что означает, что до тех пор, пока в базе данных есть записи, они будут выводиться через код внутри этого предложения.

The_post, вызывает другую функцию PHP в WordPress, которая просто перекликается с соответствующей записью из базы данных.

Более подробно о цикле вы можете прочитать здесь.

Основные файлы темы WordPress

Далее давайте взглянем на основные необходимые файлы любой темы WordPress. Когда вы создаете дочернюю тему, вам нужны только style.css и functions.php. Когда вы создаете совершенно новую тему, теоретически вам нужен еще один файл, index.php.

Index.php

Это резервная страница по умолчанию для всех возможных страниц, которые человек может посетить на вашем сайте WordPress. Если нет доступных файлов page.php или post.php, это шаблон, который WP будет использовать для вывода содержимого посещаемого URL-адреса.

Тем не менее, большинство тем используют множество своих шаблонов помимо шаблонов WordPress.

Functions.php

Это файл, куда заносятся необходимые скрипты, функциональность, необходимая для вашей темы WordPress. Например, если вы хотите работать с настройщиком WordPress, вам нужно сделать это из файла functions.php, а также с вашими файлами шаблонов.

Позже в серии статей вы увидите, как добавить «изображение заголовка» и другие настраиваемые аспекты в тему WordPress, и в полной мере использовать настройщик WP как разработчик.

Style.css

Шаблоны WordPress, как и большинство современных веб-сайтов, в значительной степени зависят от CSS. И в этом файле будет CSS вашей темы. (Если вы не знаете, что такое CSS, вам следует, по крайней мере, ознакомиться с HTML / CSS, прежде чем продолжить изучать это руководство).

Базовая архитектура сайта

Вместо того, чтобы создавать каждый шаблон страницы с нуля, темы WordPress обычно работают с различными блоками, которые вы объединяете вместе. Минимальный набор:

  • header.php;
  • sidebar.php;
  • footer.php.

Идея заключается в том, что эти в эти блоки заносятся значительные участки кода, и могут быть включены практически в любой шаблон страницы. Помимо этого вы получаете очень чистый код, так что его легче редактировать по ходу разработки.

Все, что вам нужно сделать, чтобы вызвать шаблон, — это использовать функцию get_. Если вы хотите вызвать файл sidebar.php в определенном месте вашего шаблона страницы, вам нужно всего лишь ввести этот фрагмент:

Вы также можете создать несколько шаблонов sidebar, header или footer с разными именами. Но обязательно следуйте правилу именования шаблонов “header-ADDEDWORD.php”. Например, можно создать “header-fullwidth.php”, чтобы показать шапку на всю ширину страницы. Вызов этого файла будет выглядеть так:

Многие современные темы WordPress имеют разные части шаблонов для их собственных шаблонов. Например, новая официальная тема WorPress Twenty Seveteen имеет целые наборы для footer, header, navigation, page, post

создание темы для wordpress

Подробнее о архитектуре сайта в WordPress вы можете прочитать здесь.

Иерархия шаблонов

Иерархия шаблонов —  способ, которым WordPress решает, какой шаблон использовать для вывода контента на определенной постоянной ссылке (url). В основном существуют определенные файлы шаблонов, которые WordPress использует в разных ситуациях по-разному. Обычно это определяется тем, что постоянная ссылка включена для посетителя и какой контент должен отображаться.

В качестве примера, чтобы показать, как работает иерархия шаблонов: если посетитель переходит к отдельной записи, WP сначала ищет файл single-post.php. Это файл шаблона, предназначенный для показа стандартных отдельных записей, поэтому он имеет приоритет.

Если файл single-post.php отсутствует, WordPress будет искать файл single.php. Это файл, используемый для отображения любой отдельной записи, пользовательской или стандартной.

Если нет файла single.php, он будет искать файл singular.php. Это файл, используемый для отображения любого отдельного сообщения или страницы.

Наконец, если нет файла singular.php, WP по умолчанию будет использовать файл index.php, который является последним средством, используемым для отображения всего содержимого.

Процесс тот же, независимо от того, какую запись или страницу посетит пользователь. Например, если пользователь посещает страницу, WP ищет файл page.php. В противном случае, если отображается одна страница, она подтягивает соответствующий файл шаблона страницы. Если сообщения отображаются, он ищет файл home.php. Наконец, если файла home.php нет, WP по умолчанию снова будет индексировать index.php. Я уверен, что вы начинаете понимать, почему именно файл index.php абсолютно необходим.

Есть очень хороший сервис для наглядной демонстрации иерархии шаблонов WP — wphierarchy.com.

Перейдем к делу

Теперь, когда вы знакомы с большинством основных шаблонов темы WordPress, давайте приступим. Начиная с следующей части мы создадим основную тему WordPress, которая использует все стили CSS из исходного HTML-шаблона.

Добавить комментарий