Advertisement
  1. Code
  2. Theme Development

Разработка вашей первой темы на WordPress: День первый

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Developing Your First WordPress Theme.
Developing Your First WordPress Theme: Day 2 of 3

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

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


Темы WordPress

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

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

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

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


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

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

Этот урок ориентирован на создание из существующего HTML / CSS-дизайна и преобразование его в живую, «дышащую» тему WordPress. Скорее всего, вам нужен будет дизайн, который вы сможете преобразовать,  если у вас его нет, мы предоставим простой образец, над которым будем работать во второй части.

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

Общий дизайн

Этот момент немного сложно описать, но тема должна выглядеть хорошо разработанной  и соответствовать современным стандартам дизайна. Я имею в виду, что важно знать тенденции и требования современного веб-дизайна. Сегодня замена шрифтов, градиенты CSS3, прозрачные блоки и «кричащие фоны» - это онлайн-мода, но 10 лет назад обычным явлением было иметь эффект  курсора мышки, анимированные gifs и пылающий текст ...

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

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

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

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

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

Комментарии и поддержка обратной связи

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

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

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

С тех пор, как появилась WordPress 2.7, вложенные комментарии стали основной функцией. Они  позволяют пользователям не только оставлять комментарии  на сообщение или страницы, но также отвечать на комментарий других пользователей, как на сайтах Tuts + (как показано выше). Вложенные комментарии немного сложны для реализации, чем большинство других функций, но это отличная функция, особенно, если они работают правильно и могут значительно увеличить ценность темы, они способствуют активности комментариев – что очень нравиться блоггерам.

Gravatars

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

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

Избранные сообщения и аватары

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

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

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

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

Пользовательские сообщения

Конечно, не все, что публикуется в блоге, это просто сообщения. Блоггеры могут также размещать мультимедийные файлы, такие как видео и аудио с Vimeo, YouTube. Отличным  примером такого рода интеграции является одна из последних тем под названием Gridlocked:

Gridlocked использует персонализированный тип сообщений  (в этом случае пост-тип - это сообщение Vimeo), который красиво встраивает видео с vimeo в тему. Некоторые другие параметры поддерживают  видео с YouTube, аудиоплеер и пост-аватары. Все они (с использованием соответствующего пользовательского типа сообщений) отлично смотрятся по всей ширине без полей или дополнений в верхней части макета.

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


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

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

header.php

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

sidebar.php

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

footer.php

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

page.php

Используется для отображения одной страницы - не путать с сообщением.

single.php

Почтовый файл, используемый для отображения одного сообщения в блоге, но очень похоже на страницу page.php по коду.

index.php

Как вы догадались, данный файл проделывает кусок работы по блогу: отображение сообщений, результатов поиска, сообщений об ошибках и т. д.

functions.php

Файл  functions  может быть новым для вас. Здесь хранятся специальные функции темы - чаще всего это функции регистрации областей для виджетов

comments.php

Отображает цикл, подобный index.php, который выполняет итерацию комментариев. Это также относится и к трекбэкам, вложенным комментариям и другим связанным функциям.

Тема может использовать больше или меньше файлов, перечисленные нами  файлы являются наиболее распространенными почти для каждой темы. Какие файлы использовать - это, по сути, решение разработчика - например, могут быть vimeo.php, youtube.php и audio.php, которые отображают  соответствующие типы сообщений, а не весь код, связанный только с page.php или single .php.


Настройка темы на странице параметров

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

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

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

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


На следующей неделе

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.