Создание простой темы для WordPress > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Создание простой темы для WordPress

Создание простой темы для WordPress

< >

Публикуем перевод статьи Nick La — это пособие по работе с темами WordPress. Пост был опубликован в 2011 году, но принципы и подходы, описанные в материале, до сих пор актуальны. Если у вас будут замечания и комментарии, пишите их под постом: дополним, расширим статью. Далее материал будет идти от первого лица.

Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.

1. Frontend блога

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

Стандартный Frontpage (index.php)

Стандартный Single (single.php)

Истории бизнеса и полезные фишки

2. Photoshop-макеты

Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем.

3. HTML и CSS

Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы.

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

4. Как работает тема WordPress

Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).

Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .

5. Дублирование файлов шаблонов

Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.

6. Style.css

Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе.

7. Разделение файлов

Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.

8. Header.php

Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.

Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;

Ссылка: wp_list_pages

9. Sidebar.php

Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.

  • Замените form id=searchform со всем содержимым на .
  • Замените теги li категорий на
  • Замените теги li архивов на

Ссылка: wp_list_categories и wp_get_archives

10. Footer.php

Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы).

11. Index.php

Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне.

12. Разбор цикла

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

13. Копирование цикла

Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.

14. Предпросмотр темы

Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.

15. Single.php

Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:

16. Page.php

Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.

17. Удаление файлов HTML

Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.

18. Шаблон страницы WordPress

А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:

Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.

Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.

Дополнительная литература

Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.



Комментарии:

Как METRO отказалась от печатных каталогов

Как METRO отказалась от печатных каталогов Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....

14 06 2024 16:20:29

Как создать личный бренд в компании — кейс Алексея Селезнёва, руководителя отдела аналитики Netpeak

Как создать личный бренд в компании — кейс Алексея Селезнёва, руководителя отдела аналитики Netpeak Создание репутации крутого специалиста — дело рук крутого специалиста....

13 06 2024 21:59:22

Результаты рейтинга зарплат специалистов в сфере интернет-маркетинга за первое полугодие 2018

Результаты рейтинга зарплат специалистов в сфере интернет-маркетинга за первое полугодие 2018 SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...

12 06 2024 7:29:31

Рычаги управления людьми

Рычаги управления людьми Эта книга рекомендована к прочтению решительно всем :)...

11 06 2024 2:52:45

Топ 5 лучших вебинаров для онлайн-предпринимателей

Топ 5 лучших вебинаров для онлайн-предпринимателей Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...

10 06 2024 2:57:58

Рейтинг CPA-сетей в Украине — лучшие партнерки по мнению читателей

Рейтинг CPA-сетей в Украине — лучшие партнерки по мнению читателей Лидеров определили открытым голосованием. В ТОП-списки вошли CPA-сети, которые набрали больше всего голосов суммарно и по отдельным критериям....

09 06 2024 10:25:58

Как приводить трафик на молодой сайт: результаты обсуждения темы на Quora

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

08 06 2024 17:33:36

Дублирование контента на сайтах, ориентированных на разные страны

Дублирование контента на сайтах, ориентированных на разные страны Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...

07 06 2024 0:21:31

Как рассчитать ROMI для большого интернет-магазина — импортируем себестоимость товаров в Google ***ytics

Как рассчитать ROMI для большого интернет-магазина — импортируем себестоимость товаров в Google ***ytics Хотите видеть в отчетах точный ROMI в разрезе рекламных кампаний, групп объявлений и ключевых слов? Импортируйте себестоимость товаров в Google ***ytics...

06 06 2024 11:59:48

Google показывает не все результаты поиска

Google показывает не все результаты поиска Сколько страниц на самом деле показывает и может перевести поисковик Google?...

05 06 2024 13:45:20

Как руководителю построить сильную комaнду и не сойти с ума

Как руководителю построить сильную комaнду и не сойти с ума Есть 3 качества грамотного руководителя: самоорганизованность, скорость. четкость. А еще — уйма фишек организации рабочих процессов, которые применяют в Netpeak. Узнать!...

04 06 2024 4:47:36

Критерии качественного контента

Критерии качественного контента Тошнота и процент воды в тексте не должны превышать допустимую норму, иначе не только пользователи уйдут с сайта, поисковые роботы понизят сайт в рейтинге. Узнать больше!...

03 06 2024 14:43:26

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017 Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...

02 06 2024 18:33:25

Семь массовых сбоев, оставивших миллионы людей без привычных сервисов

Семь массовых сбоев, оставивших миллионы людей без привычных сервисов Пожар в дата-центре, неудачные обновления и то самое падение Facebook....

01 06 2024 3:54:47

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...

31 05 2024 11:39:27

Что такое ASO и как правильно продвигать мобильное приложение

Что такое App Store optimization и как раскручивать мобильные приложения...

30 05 2024 7:46:19

Самые популярные термины контекстной рекламы — толковый словарь для чайников

Что такое контекстная реклама? Словарь терминов для чайников...

29 05 2024 12:10:21

Коммерческое ранжирование Яндекса (перевод)

Коммерческое ранжирование Яндекса (перевод) Интересный и важный документ, не пропустите. Для ранжирования используется сумма коммерческой и тематической релевантности. Уходя с головой в SEO, многие вебмастера забывают о пользовательских факторах. Узнайте больше об этом!...

28 05 2024 19:52:48

Что эффективнее: Google Реклама или Bing Ads

Что эффективнее: Google Реклама или Bing Ads Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....

27 05 2024 10:29:18

7 признаков хорошего отдела по работе с клиентами

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

26 05 2024 6:30:44

Форматы рекламных объявлений в Facebook и Instagram

Форматы рекламных объявлений в Facebook и Instagram Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...

25 05 2024 4:39:23

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....

24 05 2024 17:37:24

Сколько стоил клик Google Ads и Facebook в Украине в первом квартале 2018 года

Сколько стоил клик Google Ads и Facebook в Украине в первом квартале 2018 года Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...

23 05 2024 9:29:13

Дополнение Google Ads для Google Taблиц — руководство пользователя

Дополнение Google Ads для Google Taблиц — руководство пользователя Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...

22 05 2024 4:45:19

Влияние ссылок из социалок на ранжирование в поисковиках

Влияние ссылок из социалок на ранжирование в поисковиках Выдержка из интервью Дэнни Салливаном с представителями компаний Google и Bing...

21 05 2024 19:52:30

Как рекламировать криптовалюты — 10 советов предпринимателям

Как рекламировать криптовалюты — 10 советов предпринимателям Как сформировать правильную стратегию продвижения и сфокусировать внимание на получении прибыли...

20 05 2024 0:10:57

Как загрузить статистику рекламных кампаний из API Facebook с помощью языка R

Как загрузить статистику рекламных кампаний из API Facebook с помощью языка R Хотите качественно руководить рекламной кампанией в Facebook? Как подключиться к API Facebook и получение статистики в R — рассказывает Алексей Селезнев....

19 05 2024 12:19:46

WolframAlpha или Вычислительная Теория Всего

Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...

18 05 2024 9:23:17

Сколько стоил клик Яндекс.Директ и Google Ads в Казахстане в четвертом квартале 2017 года

Сколько стоил клик Яндекс.Директ и Google Ads в Казахстане в четвертом квартале 2017 года Почти 3 миллиона клика в 24 тематиках в 15 городах Казахстана. Читайте новое исследование нашего аналитика....

17 05 2024 7:40:36

Как проводить вебинары — опыт агентства Netpeak

Как проводить вебинары — опыт агентства Netpeak Мы решили организовать серию вебинаров по SEO и предоставить их бесплатно. История о том, как с нуля при минимуме затрат создать успешный онлайн-курс...

16 05 2024 17:38:19

Список Telegram-ботов для SMM-специалиста

Список Telegram-ботов для SMM-специалиста Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...

15 05 2024 14:43:19

Эффект «Хода королевы» — как выросла популярность и доход шахматных приложений

Эффект «Хода королевы» — как выросла популярность и доход шахматных приложений Сериал «Ход королевы» взорвал интерес к шахматам, и вот насколько сильно...

14 05 2024 19:12:23

Где искать контент для сайта

Где искать контент для сайта Создаем список тем, которые заинтересуют пользователя — для этого используем простые сервисы по типу Вордстат. Также изучаем деятельность конкурентов. Узнать больше!...

13 05 2024 12:45:36

Как сделать прибыльным приложение ecommerce — кейс шопинг-клуба LeBoutique

Как сделать прибыльным приложение ecommerce — кейс шопинг-клуба LeBoutique Уверены, что аппы в украине не приносят денег? В этом кейсе мы расскажем, как увеличить доход с мобильного приложения, и поделимся результатами продвижения LeBoutique...

12 05 2024 5:36:43

Итоги Всемирного дня шопинга: рост продаж в 11 раз в Украине и самые популярные товары

Итоги Всемирного дня шопинга: рост продаж в 11 раз в Украине и самые популярные товары Впереди ещё черная пятница и новогодние праздники. И успех массовых распродаж можно повторить....

11 05 2024 11:10:23

Как увеличить продажи на 75% с помощью внутренней оптимизации сайта — кейс maxi.az

Как увеличить продажи на 75% с помощью внутренней оптимизации сайта — кейс maxi.az Увеличение трафика из поисковых систем Азербайджана на 30% за три месяца. И он продолжает расти...

10 05 2024 22:55:48

Как эффективно использовать Network в Chrome DevTools

Как эффективно использовать Network в Chrome DevTools Чем полезна вкладка Network в DevTools для SEO-специалиста...

09 05 2024 23:54:18

Собеседование в рекламное агентство Ogilvy

Собеседование в рекламное агентство Ogilvy Тест, который проходят все соискатели. Никому не показывайте!...

08 05 2024 22:34:49

Как написать follow up, чтобы от него был результат?

Памятка для всех, кому важно сохранить детали переговоров....

07 05 2024 2:43:27

Правила здорового сна от Мэтью Уокера

Правила здорового сна от Мэтью Уокера Привыкли к недосыпу и жизни «на кофе»? Вы, конечно же, понимаете, что это не дело. Но осознаете ли насколько? Если нет, почитайте....

06 05 2024 23:48:52

Как наполнять контент-план — мнения редакторов

Как наполнять контент-план — мнения редакторов Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...

05 05 2024 12:45:52

Что работает в 2019 году: кейсы и рекомендации спикеров 8P

Что работает в 2019 году: кейсы и рекомендации спикеров 8P Читать только интернет-маркетологам, SMM, PPC и SEO-специалистам....

04 05 2024 10:20:55

7 уроков о всплывающих окнах для мобильных, которые мы выучили благодаря A/B-тестам

Выясняем, есть ли жизнь у мобильных всплывающих окон, и как их сделать правильно...

03 05 2024 22:32:10

Как запустить рекламу на Reddit — руководство для новичка

Как запустить рекламу на Reddit — руководство для новичка 330 миллионов активных пользователей и 14 миллиардов просмотров в месяц. Хорошо бы там запускать рекламные кампании....

02 05 2024 4:49:20

Как не терять звонки даже с двумя сотрудниками в call-центре

Как не терять звонки даже с двумя сотрудниками в call-центре Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...

01 05 2024 10:15:13

17 шагов к эффективному бренду, или Крутая зеленая ворона. Рецензия на книгу «Zag»

17 шагов к эффективному бренду, или Крутая зеленая ворона. Рецензия на книгу «Zag» Семнадцать крутых шагов к эффективному бренду Заг — это авторский неологизм от слова зигзаг (англ. zigzag). Он подразумевает движение в другом направлении....

30 04 2024 3:18:58

Как сохранить бизнес, если война. Реальная история бренда женской одежды Natali Bolgar

Как сохранить бизнес, если война. Реальная история бренда женской одежды Natali Bolgar Работать сейчас — не зазорно, а просто необходимо для страны...

29 04 2024 9:14:13

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе»

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе» Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....

28 04 2024 14:51:17

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...

27 04 2024 3:18:47

Выборы лучшего маркетинг-директора среди украинских проектов ecommerce

Выборы лучшего маркетинг-директора среди украинских проектов ecommerce Голосуй за первых лиц маркетинга ecommerce-проектов Украины...

26 04 2024 4:15:23

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::