Руководство для начинающих по разработке темы WordPress
Приветствую, друзья!
В этом руководстве я с вами обсужу, как начать работу с темой WordPress. Затем я шаг за шагом проведу вас через процесс создания совершенно новой пользовательской темы.
Если вы хотите, чтобы что-то было сделано правильно, вам, возможно, придется сделать это самостоятельно. Несмотря на то, что доступно множество тем WordPress, найти ту, которая будет иметь именно тот внешний вид и функциональность, которые вам нужны, может быть сложно. На самом деле, у вас может возникнуть желание создать собственную тему. Однако начинать с разработки тем может показаться ошеломляющим, особенно для новичка.
К счастью, создание собственной темы для WordPress является относительно простым процессом. Это также не требует больших технических знаний или опыта в веб-разработке. Кроме того, создание собственной темы может стоить затраченных усилий, поскольку ваш сайт будет выглядеть и работать правильно.
Введение в разработку WordPress Theme
Вы хотите, чтобы ваш сайт выглядел великолепно и имел все необходимые функциональные возможности, поэтому вы должны проверить каталог тем WordPress. К сожалению, ничто из того, что вы видите, не отвечает всем вашим требованиям, и вы не хотите идти на компромисс со своим видением. Может быть, вы хотите что-то уникальное, что выделит ваш сайт, или вы просто не хотите тратить деньги на премиальную тему.
На этом этапе вы можете начать создавать свою собственную тему. К счастью, разработка темы для WordPress — не такая уж сложная задача, как вы можете себе представить. Благодаря удобству платформы и многочисленным доступным инструментам, почти каждый может создать собственную тему.
Я проведу вас через процесс создания вашей первой темы. Для начала вам понадобятся две вещи:
* Сразу хочу обрадовать вас, что при покупке хостинга от TimeWeb и оплаты на год — домен вам дается в подарок, можете сэкономить немного). Покупая хостинг через мою партнерскую ссылку я помогу вам настроить хостинг и установить WordPress.
Вам также будет полезно иметь опыт работы с локальными промежуточными средами, поскольку вы будете использовать их для создания своей темы. Наличие некоторого понимания CSS и PHP также поможет (это будет очень огромным плюсом).
Наконец, есть один важный инструмент, который вам нужен, который значительно облегчит процесс создания темы: начальная тема.
Что такое стартовая тема (и почему вы должны ее использовать)
Начальная (стартовая) тема — это пустая тема WordPress, которую вы можете использовать для создания своей собственной темы. Использование стартовой темы позволяет вам построить прочную основу, не беспокоясь о сложностях, связанных с написанием темы с нуля. Это также поможет вам понять, как работает WordPress, показывая вам базовую структуру темы и то, как все ее части работают вместе.
Существует множество отличных сервисов для создания начальных тем, в том числе Underscores, FoundationPress, UnderStrap и Bones (это только некоторые из них).
Я буду использовать Underscores для нашего примера ниже. Это хороший выбор для начинающих, так как он содержит только основы. Кроме того, эта начальная тема разработана Automattic, что делает ее более безопасной, совместимой и хорошо поддерживаемой в долгосрочной перспективе.
Как разработать свою первую тему WordPress (за 5 шагов)
После подготовки вы наконец-то готовы приступить к созданию своей первой темы. Как я уже упоминал, мы будем использовать начальную тему для этого прохождения.
Однако, если вы хотите попробовать создать все самостоятельно без шаблона, вы можете это сделать. Имейте в виду, что для этого потребуется гораздо больше навыков программирования и понимания веб-разработки.
Шаг 1: Настройте локальную среду
Первое, что вам нужно сделать, это создать локальную среду разработки. Фактически это сервер, который вы устанавливаете на свой компьютер, который вы можете использовать для разработки и управления локальными сайтами WordPress. Локальный сайт — это безопасный способ разработки темы, никак не влияющий на ваш живой сайт.
Существует множество способов создания локальной среды, но я собираюсь использовать OpenServer (и вам его советую). Это быстрый, простой и бесплатный способ установки локальной версии WordPress, совместимый с Windows. Для начала выберите «PREMIUM» версию OpenServer (вам должно ее хватить за глаза), дождитесь скачивания, а затем установите это ПО себе на компьютер.
После того, как все будет установлено, вы можете запустить его.
Это простой процесс, и ваш локальный сайт WordPress будет готов через несколько минут. После установки ваш новый сайт будет выглядеть и работать точно так же, как живой веб-сайт WordPress.
Шаг 2: Загрузите и установите стартовую тему
Как и большинство начальных тем, с Underscores очень легко начать работу. На самом деле, все, что вам нужно сделать, это зайти на сайт и ввести название своей темы. Очень легко!
Если вы хотите, вы также можете нажать на «Advanced Options» (Дополнительные параметры) для дальнейшей настройки базовой темы. Здесь вы можете заполнить дополнительную информацию, такую как имя автора и дать описание темы.
Там также есть _sassify! опция, которая добавит файлы Syntaxically Awesome StyleSheets (SASS) в вашу тему. SASS — это язык предварительной обработки для CSS, который позволяет вам использовать переменные, вложения, математические операторы и многое другое.
Когда вы сделали свой выбор, вы можете нажать «Generate», чтобы загрузить ZIP-файл, содержащий вашу начальную тему. Это ядро, вокруг которого вы будете разрабатывать свою собственную тему, поэтому установите ее на свой локальный сайт. После того, как вы установили свою тему, вы можете просмотреть свой сайт, чтобы увидеть, как он выглядит. Сейчас это очень просто, но это ненадолго!
Шаг 3: понять, как работает WordPress за кулисами
Прежде чем вы сможете настроить свою тему, вам необходимо понять назначение ее компонентов и то, как они сочетаются друг с другом. Во-первых, давайте обсудим файлы шаблонов, которые являются основными строительными блоками темы WordPress. Эти файлы определяют макет и внешний вид контента на вашем сайте. Например: header.php используется для создания шапки сайта, а comments.php позволяет отображать комментарии.
WordPress определяет, какие файлы шаблонов использовать на каждой странице, просматривая иерархию шаблонов. Это порядок, в котором WordPress будет искать подходящие файлы шаблонов при каждой загрузке страницы на вашем сайте. Например, если вы посещаете URL-адрес http://example.com/post/this-post, WordPress будет искать следующие файлы шаблонов в следующем порядке:
- Файлы, которые соответствуют слагу, такие как этот пост.
- Файлы, соответствующие идентификатору записи.
- Общий файл с одним сообщением, например single.php.
- Архивный файл, такой как archive.php.
- Index.php файл.
Поскольку файл index.php требуется для всех тем, он используется по умолчанию, если другой файл не найден. Underscores уже содержит наиболее распространенные файлы шаблонов, и они будут работать прямо из коробки. Однако вы можете поэкспериментировать с их редактированием, если хотите почувствовать, как они работают вместе.
Еще один важный элемент, который вам нужно понять, это The Loop (Цикл WordPress). Это код, который WordPress использует для отображения контента, поэтому во многих отношениях это сердце вашего сайта. Он отображается во всех файлах шаблонов, в которых отображается содержимое публикации, например index.php или sidebar.php.
Цикл — сложная тема, о которой я рекомендую вам прочитать подробнее, если вы хотите лучше понять, как WordPress отображает содержимое публикации. К счастью, благодаря Underscores цикл уже будет интегрирован в вашу тему, так что пока не нужно беспокоиться об этом.
Шаг 4: Настройте тему
Легко представить, что темы предназначены исключительно для косметических целей, но на самом деле они оказывают огромное влияние на функциональность вашего сайта. Давайте посмотрим, как вы можете сделать несколько основных настроек.
Добавьте функциональность с помощью «Hooks»
Hooks* (что в переводе означает «крючки, зацепы») — это фрагменты кода, вставленные в файлы шаблонов, которые позволяют запускать действия PHP в различных областях сайта, вставлять стили и отображать другую информацию. Большинство хуков реализованы непосредственно в ядре WordPress, но некоторые полезны и для разработчиков тем.
* Руководство для начинающих по добавлению собственных хуков
Давайте рассмотрим некоторые из наиболее распространенных хуков и то, для чего они могут использоваться:
- wp_head() — добавляется к элементу «head» в header.php и включает стили, сценарии и другую информацию, которая запускается при загрузке сайта.
- wp_footer() — добавлен в footer.php прямо перед тегом «/body». Это часто используется для вставки кода Google Analytics.
- wp_meta() — обычно появляется в sidebar.php для включения дополнительных скриптов (таких как облако тегов и другие).
- comment_form() — добавляется в comments.php непосредственно перед закрывающим тегом «/div» файла для отображения данных комментариев.
Они уже будут включены в вашу тему от Underscores. Тем не менее, я по-прежнему рекомендую вам посетить базу данных хуков (естественно, на английском), чтобы увидеть все доступные хуки и узнать о них больше.
Добавьте стили с помощью CSS
Каскадные таблицы стилей (CSS) — это то, что определяет внешний вид всего контента на вашем сайте. В WordPress это достигается с помощью файла style.css. Этот файл уже включен в вашу тему, но на данный момент он содержит только базовый стиль по умолчанию.
Если вам нужен быстрый пример того, как работает CSS, вы можете отредактировать любой из стилей здесь и сохранить файл, чтобы увидеть эффекты. Например, вы можете найти следующий код (обычно в строке 485):
a {
color: royalblue;
}
Это контролирует цвет не посещенных гиперссылок, которые по умолчанию имеют цвет «royalblue»:
Давайте посмотрим, что произойдет, если мы попытаемся изменить это, заменив его следующим кодом:
a {
color: red;
}
Сохраните файл и проверьте ваш локальный сайт сейчас. Как и следовало ожидать, все непосещенные ссылки теперь будут ярко-красного цвета:
Вы можете заметить, что посещенная ссылка вверху не изменила цвет. Это потому, что на самом деле это регулируется следующим разделом в таблице стилей:
a:visited {
color: purple;
}
Это очень простой пример того, как редактирование style.css повлияет на внешний вид вашего сайта. CSS — это обширная тема, которую я рекомендую вам изучить, если вы хотите больше узнать о создании веб-дизайна. Есть много ресурсов на эту тему для начинающих.
Шаг 5: Экспортируйте тему и загрузите ее на свой сайт
Когда вы закончите возиться со своей темой, пришло время убедиться, что она работает правильно. Вы можете убедиться в этом, протестировав тему. Чтобы быстро убедиться, что ваша тема будет работать хорошо в большинстве случаев, вы можете использовать данные тестовых модулей. Это набор фиктивных данных, которые вы можете загрузить на свой сайт, содержащий множество различных стилей и контента. Это позволит вам увидеть, как ваша тема справляется с непредсказуемыми данными.
Когда вы тщательно проверите свою тему и убедитесь, что она соответствует требуемым стандартам, теперь остается только экспортировать ее. Самый простой способ сделать это — просто найти, где веб-сайт установлен на вашем локальном компьютере, скорее всего, в папке с именем «OSPanel», в папке «domains» по умолчанию, название вашего локального сайта. Откройте папку веб-сайта и перейдите в «/wp-content/themes/», где вы найдете свою тему.
Теперь вы можете использовать инструмент сжатия, такой как WinRAR, для создания ZIP-файла на основе папки. Просто щелкните правой кнопкой мыши папку и выберите параметр, который позволяет вам сжать ее, например, «Добавить в архив».
Когда папка будет заархивирована, она будет готова для загрузки и установки на любом сайте WordPress, так же как вы установили тему Underscores в начале. Если вы особенно довольны результатом, вы можете даже отправить свою тему в каталог тем WordPress.
Заключение
Создание собственной темы WordPress с нуля — это не маленький подвиг. Однако этот процесс может оказаться не таким сложным, как вы могли себе представить ранее. Разбивая процесс на этапы и используя информацию на сайте документации Кодекса, почти каждый может создать новую тему.
Ну а если вам не охота, некогда или не охота забивать себе голову — обратитесь ко мне, и я вам сделаю классную, легкую и функциональную тему WordPress, которая принесет вам полное удовлетворение.
Думаю, эта статья будет очень полезна новичкам, которые хотят научиться разрабатывать темы WordPress с нуля.
Ну а у меня на этом все — до скорых встреч!