Browse By

Как и зачем создавать собственные темы WordPress

Доступны тысячи тем WordPress, но что, если вы не можете найти именно то, что хотите для своего собственного веб-сайта или для своих клиентов? Сделай сам — всегда вариант, и создание собственной темы WordPress дает некоторые преимущества, которые не всегда предоставляют готовые шаблоны.

Создание собственной темы WordPress означает, что вы можете включать именно те функции, которые нужны вашему сайту, и только эти функции. Это означает, что вам не придется перебирать десятки функций готового шаблона, чтобы найти нужные разделы, когда придет время обновления.

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

Какие навыки и знания вам понадобятся для создания тем WordPress?

Это зависит от того, потому что создание темы для базового блога отличается от создания темы электронной коммерции. Однако независимо от того, какую тему WordPress вы хотите создать, полезно знать немного PHP , потому что без него вы практически не сможете построить.

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

Вам также понадобится терпение, чтобы во время работы искать информацию в разделе разработки тем Кодекса WordPress и отвечать на все мелкие вопросы, которые возникают в процессе создания.

Обладая некоторыми ноу-хау PHP и знаниями WordPress, можно создавать простые пользовательские темы, даже если вы не умеете кодировать. Это потому, что есть ресурсы, которые вы можете использовать для поиска фрагментов кода, необходимых для добавления функциональности и функций в вашу тему.

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

Сколько времени нужно, чтобы создать тему WordPress?

Точное количество времени, которое вам понадобится, зависит от сложности идеи вашей темы и уровня ваших навыков. Примерно от сорока до шестидесяти часов.

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

Готовы создать тему WordPress?

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

1. Спланируйте и создайте каркас своей темы.

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

Вам понадобится несколько инструментов для планирования и корректировки каркаса:

  • Блокнот для набросков. Прежде чем приступить к цифровому дизайну, нарисуйте на бумаге то, что вы хотите. Я использую записную книжку с точечной сеткой, чтобы выяснить, например, что я хочу на своей домашней странице и куда будет помещен этот контент. Как только я разложу эти блоки и получу концепцию, пора создавать цифровой каркас.
  • Приложение для создания цифровых каркасов. Adobe Illustrator — хороший выбор, если у вас есть опыт в дизайне, потому что он позволяет легко выкладывать объекты, но есть и другие инструменты для создания каркасов. Вы даже можете использовать приложение для рисования на планшете или телефоне или «Вставить»> «Фигуры» в Word. Если вы можете использовать приложение для трассировки блоков, вы можете использовать его для создания простого каркаса.

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

4. Вытяните все зависимости, которые вы хотите для своей темы.

Если вы хотите добавить боковые панели, скрипты, таблицы стилей или другие функции, это то, где это можно сделать. Здесь вы можете найти функции постановки в очередь, которые необходимы для любых библиотек, которые вам понадобятся, например, Bootstrap, jQuery, Font Awesome, а также для любых файлов зависимостей на основе JavaScript или CSS.

Если ваш каркас требует наличия нескольких боковых панелей, например боковой панели социальных сетей на главной странице и боковой панели «Последние сообщения» на странице блога, вы зарегистрируете эти разные боковые панели в файле функций. Вы еще не закончили сбор ресурсов кода. Библиотека Google jQuery дает вам ссылку на размещенные библиотеки JavaScript, которые вы можете загрузить на свой сайт. Они уже подключены к CDN (сети доставки контента), которая помогает вашему сайту загружаться быстрее.

Совет от профессионалов: Иногда вам нужно загрузить их напрямую и добавить в папку в _s. Например, если вы работаете с сайтом, который требует соответствия требованиям PCI (безопасность необходима, если ваш сайт обрабатывает платежи по карте), все сторонние зависимости должны быть загружены непосредственно с вашего веб-сервера. Вы можете добавить их в папку / inc.

5. Создайте свой интерфейсный функционал.

Что вы хотите разместить на своем сайте? На этом этапе вы его создаете.

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

Все, что между ними, например меню и боковые панели, может различаться в зависимости от шаблона страницы. На этом этапе вы можете создать свой основной шаблон индекса (index.php), затем шаблон отдельного сообщения (single.php), затем архивы и любые дополнительные шаблоны страниц, которые вам нужны. Вы можете использовать иерархию шаблонов тем WordPress в качестве руководства.

На этом этапе вы можете ожидать, что отправите некоторое время со ссылкой на кодекс, чтобы ответить на такие вопросы, как «Как мне назвать заголовок страницы?» и «Как мне вызвать этот список категорий и заставить его отображаться?» У WordPress очень хорошая документация, но вы можете рассчитывать на то, что во время работы вы будете часто переключаться вперед и назад.

6. Создайте свой шаблон темы.

Когда ваш код и внешний интерфейс объединены, пришло время стиля! Лучше всего начинать вашу таблицу стилей с мобильной версии вашей темы WordPress, потому что это основополагающий минимальный набор стилей.

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

Это медиа-запросы, которые вы разместите в конце своей таблицы стилей для мобильных устройств, чтобы ориентироваться на эти постепенно увеличивающиеся устройства («…» — это код стиля):

Работа в этом порядке помогает сохранить ваш код в чистоте и гарантирует что ваша тема хорошо смотрится на всех типах устройств.

Совет от профессионалов: Если вы используете Bootstrap, вы можете задать некоторые позиции при программировании макета и функциональности (шаг 5). Это потому, что Bootstrap имеет встроенные классы, которые вы можете добавлять в теги для более быстрого форматирования. Вы также можете использовать Bootstrap для блокировки элементов страницы, поэтому вам придется меньше стилизовать и тратить меньше времени на ручное позиционирование всех элементов в шаблоне

7. Протестируйте свой шаблон темы.

Вы можете создать тестовую среду, настроив субдомены на хостинге вашего веб-сайта, или вы можете получить VPS-хостинг для отдельной частной песочницы. Существует также приложение под названием VVV, которое вы можете загрузить с GitHub и использовать для создания тестового сайта локально на своем компьютере.

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

8. Опубликуйте свою тему WordPress!

Когда вы закончите тестирование с помощью VVV, заархивируйте папку темы, как и любую другую папку на вашем компьютере (щелкните правой кнопкой мыши «сжать» или «архивировать»), чтобы создать версию темы, которую вы можете загрузить через дашборд. Если у вас есть FTP-доступ к вашему серверу, вы также можете использовать FTP-загрузчик. Затем перейдите в раздел «Темы» на панели инструментов WordPress, запустите предварительный просмотр в реальном времени, а когда будете готовы, сохраните и активируйте новую тему.

Готовы начать создавать и тестировать свои собственные темы WordPress? Получите нужную песочницу с нашими планами хостинга VPS.

Саманта Сопер — внештатный специалист по UX-стратегии, интерфейсный разработчик и креативный консультант, работающий с предприятиями и некоммерческими организациями любого размера, помогая управлять их присутствием в Интернете. и опыт бренда. Она также занимается иллюстрацией и графикой. Ссылки по теме: samsoper.art/links/