Создаем свою собственную WordPress-тему за 3 дня: день первый

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

Темы WordPress

Добро пожаловать в первую часть статей, посвященных созданию тем WordPress. Темы – один из самых привлекательных и интересных компонентов WordPress. Установка и настройка тем является значимым фактором, приведшим к такой высокой популярности данной CMS: на одном лишь сайте WordPress.com хранится более 20 миллионов блогов.

Из тех миллионов людей, которые используют WordPress, лишь малая часть действительно представляет себе, как сделать шаблон для веб-сайта, не говоря уже о создании темы для WordPress. Также скорее всего пользователи WordPress не знают, что значат такие термины, как «FTP» или «закачка». Благодаря встроенным поисковым механизмам и присутствию установщика тем пользователям не нужно углубляться в детали того, как работают темы – людям даже не надо знать, как закачать эти темы в свой хостинг-аккаунт.

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

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

Что делает тему WordPress хорошей темой?

Создать наспех WordPress-тему достаточно просто, но будет ли такая тема хорошей? Нет. Качественная тема должна быть спланированной, подготовленной и эффективной. Многие люди живут с продаж своих тем, поскольку знают, как сделать темы хорошими, и понимают, как применить свои знания на практике – талант, который вы желаете получить.

Серия статей будет касаться получения существующего, закодированного в CSS/HTML дизайна и преобразования его в живую, дышащую тему WordPress. Очевидно, это означает, что у вас должен быть под рукой дизайн, который можно будет конвертировать, однако не волнуйтесь – мы реализуем простой дизайн во второй части.

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

Целостный дизайн

Этот пункт затруднительно описать словами. Тема должна выглядеть качественно – в соответствии с существующими стандартами современного дизайна. Под этим я подразумеваю то, что очень важно знать тенденции и предпочтения современного веб-дизайна. Сегодня замена шрифтов, CSS3 градиенты, прозрачные панели и нойзовые бэкграунды являются модным трендом, однако 10 лет назад все было очень банально – достаточно было иметь специальные следы курсора, анимированные gif’ы и горящий текст…

Многие ли из вас содрогнулись, увидев это? Конечно, все эти уловки и тренды выходят за рамки нашей серии статей – вы всегда сами вправе выбирать привлекательный дизайн. Хорошая идея – получить обратную связь от сообществ таких сайтов, как Dribbble или Forrst, где всегда сидят опытные дизайнеры тем и разработчики.

Поддержка виджетов

То, что обобщает многие популярные темы – поддержка виджетов. Для тех, кто жил в пещере все эти годы: виджеты – это небольшие, настраиваемые дополнения, которые часто отображаются в сайдбаре или футере темы. Виджеты – еще одна прекрасная особенность расширения WordPress, что делает эту CMS такой популярной.

Большинство тем поставляется вместе с произвольными виджетами, встроенными конкретно к определенной теме. WordPress также включает в себя набор встроенных стандартных виджетов, таких как календарь, поиск и архивы. Через консоль можно настроить показ виджетов и области, в которых они будут выводиться (сайдбар, футер или любая другая область сайта).

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

Поддержка комментариев и обратных ссылок

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

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

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

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

Граватары

Глобально распознаваемые аватары – прекрасная возможность, которую стоит добавить к любой теме. Я уверен, что вы, вероятно, сталкивались с ними, хотя термин может показаться вам поначалу незнакомым; граватар – это аватар, связанный с вашей электронной почтой. Каждый раз, когда вы комментируете блог, рядом с вашим комментарием будет выводиться аватар, который вы задали.

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

Популярные записи и миниатюры

Если вы заглянете на раскрученный рынок, такой как ThemeForest, и просмотрите популярные темы недели, то увидите, что практически все они имеют некоторый тип миниатюр записей. Давайте посмотрим на одну из популярных тем, доступных на ThemeForest – Striking:

Каждый пост включает в себя изображение с определенной шириной и высотой. Это изображение и является миниатюрой. Добавляя такую миниатюру, мы разбиваем сплошной текст и даем странице прекрасное представление. Естественно, миниатюры могут быть самыми разными, а не только такими, как в указанной теме. Их вывод может быть реализован по-разному.

Еще один прекрасный способ вывода записей – это использование раздела популярных записей. Зачастую такой раздел присутствует в многочисленных журнальных темах (мы не будем использовать данную секцию в своей теме), придавая теме дополнительный уровень функциональности. Вот пример:

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

Произвольные типы записей

Естественно, не все, что публикуется в блоге, представляет собой текстовые записи. Блоггеры могут также публиковать некоторые типы медиафайлов — видео, аудио и т.д. Неплохой пример данной интеграции предлагает тема Gridlocked:

Тема использует произвольные типы записей, которые позволяют красиво внедрять в тему различные типы медиа (в данном примере – произвольный тип записей под vimeo ролики). Тема поддерживает YouTube-видео, аудио-плеер и миниатюры записей. Все это выглядит прекрасно в полноэкранном представлении.

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

Компоненты темы

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

• header.php – обычно данный файл содержит в себе начальную часть нашей темы. Также он является постоянным местом для размещения функции wp_head(), которая является одним из самых важных хуков в WordPress.
• sidebar.php – дополнительный файл, требуемый при вызове get_sidebar(). Вы можете использовать данный файл для создания сайдбара, навигации или любого другого подобного компонента темы. Также в этом файле обычно содержится код, который отвечает за запуск виджетов, если ваша тема поддерживает их.
• footer.php – конец нашей темы. В этом файле можно зарегистрировать дополнительную область для вывода виджетов. Естественно, вы можете выводить виджеты в любых местах, но футер и сайдбар являются наиболее частыми вариантами для этого.
• page.php – используется для вывода на экран отдельной страницы – не путать с записями.
• single.php – файл для вывода записи, используется для отображения отдельной записи в блоге. Очень похож на page.php по своему коду.
• index.php – как вы могли бы предположить, файл отвечает за выполнение всей необходимой функциональности для главной страницы: здесь происходит отображение записей, поисковых результатов, обслуживаются сообщения об ошибках и т.д.
• functions.php – в этом файле хранятся функции темы.
• comments.php – отображает цикл, который напоминает index.php, но работает уже для комментариев. Здесь реализуется такая функциональность, как обратные ссылки, древовидные комментарии и т.д.

В теме может использоваться неограниченное количество разных файлов, но это – базовые файлы, которые наиболее часто встречаются в темах. Файловая структура темы по большей части зависит от разработчиков – к примеру, могут быть такие файлы, как vimeo.php, youtube.php и audio.php, выводящие свои типы записей.

Страницы настроек темы

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

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

• Цветовая схема
• Логотип (текст или изображение)
• Фавикон
• Информация для постинга в социальные сети
• Различные опции стилизации
• И многое другое

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