Как создать тему для wordpress

Как сверстать тему для WordPress

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.

Добавление темы

Для начала в папке themes создадим папку нашего шаблона «whitesquare». В ней будет находиться папка images и два необходимых пустых файла index.php и style.css.

Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.png.

После этого мы уже можем использовать нашу тему. Зайдите в панель администратора по адресу http:///wp-admin, а затем в управление темами (Appearance -> Themes). В списке уже должна появиться наша тема whitesquare. Наведитесь на тему и нажмите «Activate».

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

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также на всех страницах, кроме главной, есть сайдбар слева. Для того чтобы руководство было более универсальным, давайте страницы главного меню оформим как «страницы WordPress» (page), а страницы подменю как «посты блога WordPress» (post) с комментариями. Главную же страницу сделаем как отдельную страницу (front-page) с собственной разметкой. Здесь надо отметить, что, несмотря на то, что страницы WordPress могут быть реализованы двумя способами (как страницы или как посты) в базе данных они различаются только типом, однако при создании шаблонов они обрабатываются немного по-разному. В этом вы сможете убедиться чуть ниже.

Структура страниц

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

Давайте начнем со структуры страниц. Прежде чем добавлять страницы, нужно сначала зайти в настройки и указать стиль ссылок: Settings -> Permalink settings -> Post name. Это позволит сделать ссылки в виде «http://site_name/page_name».

Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.

После добавления, список страниц должен выглядеть вот так:

Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.

Header.php и Footer.php

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

Внутри тега head мы установили кодировку, указанную в WordPress, заголовок страницы и pingback (для связи с другими сайтами). В последней строке вызываем команду wp_head(), которая добавляет заголовки WordPress. Также открываем блок «wrapper».

Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:

function enqueue_styles() < wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); wp_enqueue_style( 'font-style'); >add_action('wp_enqueue_scripts', 'enqueue_styles'); function enqueue_scripts () < wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); wp_enqueue_script('html5-shim'); >add_action('wp_enqueue_scripts', 'enqueue_scripts'); 

В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.

Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.

Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.

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

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

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

Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.png и images /h1-bg.png. Далее добавьте немного базовых стилей в файл style.css:

Показать код

body < color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png); border-top: 5px solid #7e7e7e; margin: 0; >img < border: 0; >p < margin: 20px 0; >.alignleft < float: left; >.alignright < float: right; >.aligncenter < display: block; margin-left: auto; margin-right: auto; >.input < background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; >.button < color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; >.image < border: 1px solid #fff; outline: 1px solid #c9c9c9; >figure img < display: block; >.wrapper < max-width: 960px; margin: auto; >header < padding: 20px 0; >.main-heading < background: transparent url(images/h1-bg.png); margin: 30px 0; padding-left: 20px; >.main-heading h1 < display: inline-block; color: #7e7e7e; font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; >aside < float: left; width: 250px; >aside + section < margin-left: 280px; padding-bottom: 50px; >footer

В результате должна получиться вот такая картина:

Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В шаблон шапки, в файле header.php вставьте разметку для логотипа:

Форма поиска

WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:

А в файл стилей запишите стили для формы:

Показать код

.search-form

Всё, что осталось сделать – это подключить searchform.php внутри header.php.

Навигация

Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:

if (function_exists('add_theme_support'))

После этого, в панели администрирования в пукте меню Appearance появится подпункт Menus, в котором нужно нажать на ссылку Create new menu, ввести имя меню «top-menu», выделить страницы из левой колонки и добавить их в меню кнопкой Add to menu.

Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:

Функция wp_nav_menu отобразит меню с именем «top-menu» и css классом «top-menu».

После этого меню уже появится на страницах но без стилей. Стилизуем его:

Показать код

.main-navigation < background: #f3f3f3; border: 1px solid #e7e7e7; >.top-menu < margin: 0; padding: 0; >.top-menu li < display: inline-block; padding: 10px 30px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14px 'Oswald', sans-serif; >.top-menu li.current_page_item < background: #29c5e6; >.top-menu a < color: #b2b2b2; text-decoration: none; >.top-menu li.current_page_item a

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

Далее делаем вёрстку в файле footer.php:

И прописываем стили в style.css:

Показать код

.footer-content < max-width: 960px; margin: auto; padding: 10px 0; height: 90px; >.footer-heading < font: 14px 'Oswald', sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; text-transform: uppercase; >footer a < color: #dbdbdb; >footer p < margin: 5px 0; >.twitter-time < color: #b4aeae; >.twitter < float: left; width: 300px; >.twitter p < padding-right: 15px; >.sitemap < width: 150px; float: left; margin-left: 20px; padding-right: 15px; >.sitemap .column < display: inline-block; margin-left: 40px; >.sitemap .column.first < margin-left: 0; >.sitemap a < display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; >.sitemap a:hover < text-decoration: underline; >.social < float: left; margin-left: 20px; width: 130px; >.social-icon < width: 30px; height: 30px; background: url(images/social.png) no-repeat; display: inline-block; margin-right: 10px; >.social-icon-small < width: 16px; height: 16px; background: url(images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; >.twitter-icon < background-position: 0 0; >.facebook-icon < background-position: -30px 0; >.google-plus-icon < background-position: -60px 0; >.vimeo-icon < background-position: 0 0; >.youtube-icon < background-position: -16px 0; >.flickr-icon < background-position: -32px 0; >.instagram-icon < background-position: -48px 0; >.rss-icon < background-position: -64px 0; >.footer-logo

В итоге главная страница сайта должна выглядеть вот так:

Главная страница

Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.

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

Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:

Он отличается от кода page.php только тем, что в нем нет заголовка страницы.

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

Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png

Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:

Показать код

Fusce vitae nibn quis diam fermentum
Etiam adipscing ultricies commodo.
Lorem ipsum dolop
  
Ultricies pellentesque
  
Aliquam ipsum
  
Nullam sed mauris ut

About whitesquare
 
 In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. 
Read more
A word from our ceo
 
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Yane Naumoski, CEO
Services
 In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. 
Read more
Our teams
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
 
Lorem ipsum
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et
24/7/365 Support
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.
Read more
Our clients
      

Не забудьте поправить пути до картинок. Они зависят от даты добавления.

Теперь осталось стилизовать данный код.

Показать код

.slider < margin-top: 30px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; >.slider .content < height: 220px; padding: 30px 40px; background: #e2e2e2; >.slider .title < color: #5a5a5a; font-size: 42px; >.slider .subtitle < color: #acacac; font-size: 20px; >.slider .links < display: block; margin: 0; padding: 10px; background: #f3f3f3; border-bottom: 1px solid #e7e7e7; counter-reset: list 0; color: #8f8f8f; >.slider .links li < display: inline-block; font-size: 18px; line-height: 23px; margin-right: 55px; cursor: pointer; >.slider .links li.active < color: #29c5e6; >.slider .links li:before < display: inline-block; counter-increment: list; content: counter(list) " "; background: #8f8f8f; color: #fff; width: 23px; text-align: center; margin-right: 10px; font-size: 16px; cursor: pointer; >.slider .links li.active:before < background: #29c5e6; >.teaser < display: inline-block; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; >.teaser .heading < background: transparent url(images/h1-bg.png); margin: 40px 0 20px; height: 16px; >.teaser .bullet < display: inline-block; width: 16px; height: 16px; background: #29c5e6; vertical-align: top; >.teaser .heading-text < display: inline-block; text-transform: uppercase; font: normal 14px/16px 'Oswald', sans-serif; margin: 0; padding: 0 10px; background: url(images/bg.png); >.teaser .image < float: left; margin-right: 20px; >.teaser .small-block < margin-bottom: 10px; >.teaser .small-block .image < margin-right: 10px; >.teaser .more, .teaser .more a < color: #525252; margin-bottom: 0; >.teaser-small-heading < display: block; color: #525252; margin: 0; font-weight: normal; font-size: 11px; text-transform: uppercase; >.teaser-small-paragraph < margin: 4px 0; font-size: 11px; >.clients img

Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:

После этого, главная страница должна отобразиться правильно.

Сайдбар

Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.

Для этого создайте файл sidebar.php и поместите в него следующий код:

Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.

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

Далее нам нужно добавить стили для вёрстки:

Показать код

.aside-navigation < background: #f3f3f3; border: 1px solid #e7e7e7; >.aside-menu < margin: 0; padding: 0; text-transform: uppercase; >.aside-menu li < font-weight: 300; list-style: square inside; border-top: 1px solid #e7e7e7; font: 14px 'Oswald', sans-serif; padding: 10px; font-weight: 300; >.aside-menu li:first-child < border: none; >.aside-menu li.current-menu-item, .aside-menu li.current-menu-item a < color: #29c5e6; >.aside-menu a < color: #8f8f8f; text-decoration: none; >.sidebar-heading < background: #29c5e6; font: 14px 'Oswald', sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; text-transform: uppercase; >.map

Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.

Страница About us

Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование страницы в панели администратора и добавьте код:

Показать код

 
 
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
 John Doe, Lorem Ipsum 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 
Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.
 
Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.
  
Our team
 
 
    
 
    
 
    
 
    
 
    
 
 
 
    
 
    
 
    
 
    
 
    
 
 

И стили в style.css:

Показать код

.main-blockquote < margin: 0; background: #29c5e6; padding: 10px 20px; font-family: 'Oswald', sans-serif; font-weight: 300; >.main-blockquote p < color: #fff; font-style: italic; font-size: 33px; margin: 0; >.main-blockquote cite < display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; >.content-heading < background: #29c5e6; font: 30px 'Oswald', sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; text-transform: uppercase; >.team-row figure < display: inline-block; margin: 20px 0 0; font-family: 'Oswald', sans-serif; font-weight: 300; >.team-row figure + figure < margin-left: 43px; >.team-row figcaption < font-size: 16px; font-weight: 300; margin-top: 5px; >.team-row .occupation

Шаблон поста

После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:

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

Страница поиска

В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:

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

Страница архива

В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.

404

Последний шаблон, который осталось добавить — это шаблон для 404 страницы, когда WordPress не смог найти запрошенную страницу. Он будет точно такой же, как page.php только вместо вывода постов будет написано сообщение об ошибке:

Заключение

На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.

• Создание меню теперь описано не на основе wp_list_pages, а с помощью wp_nav_menu.
• Все фразы, используемые в шаблоне вставляются через функцию локализации __(»)
• Стили и скрипты подключаются не в файле header.php, а через специальные функции в functions.php
• Код главной страницы в шаблоне перенесен из page-home.php во front-page.php

Создание темы WordPress. Натяжка HTML-вёрстки

В этом уроке мы с вами разберёмся, как создать свою тему для WordPress с нуля. Ну почти с нуля – мы же планируем натягивать на WordPress свою HTML-вёрстку.

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

Что будет в видеоуроке?

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

В видеоуроке мы сразу же начнём работать с готовой вёрсткой, которая выглядит вот так:

Для доступа к файлам вёрстки необходимо приобрести курс.

Сделаем первые шаги по натяжке этой вёрстки на WordPress, заменим статичные данные в HTML на динамичные при помощи таких функций WordPress, как wp_head(), wp_footer(), get_stylesheet_directory_uri(), get_stylesheet_uri(), bloginfo(), wp_get_document_title(), language_attributes(). Объясняю принцип действия каждой функции.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Cтартовые темы. Что это такое и для чего они нужны?

Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css – смотрите следующий шаг.

Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS ��

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

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

Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.

Приступаем к созданию темы. Файлы index.php и style.css

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал kurs (очень оригинально). Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забыли/забили на style.css , то в админке во Внешний вид > Темы ожидайте такую ошибку:

Если же отсутствует файл index.php , то:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

Итак, после того, как вы создали все необходимые файлы, наша тема начнёт отображаться в админке:

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

Параметры (метаданные) темы

Если вы не хотите, чтобы ваша тема так и отображалась в админке без названия и описания, давайте добавим немного информации в style.css , поместив её в комментарии CSS /* */ .

/* * Theme name: Тема для курса * Author: Миша * Author URI: https://misha.agency * Version: 1.0 */

Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:

Theme name Название темы. Description Описание темы, которое будет отображаться в админке. Version Версия темы, например 1.0 Author Тут можете указать себя и тех людей, которые вам помогали. Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress. License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией. Text Domain Идентификатор локализации темы, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию плагинов и тем WordPress. Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно пропустить этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Со списком поддерживаемых тегов можно ознакомиться на официальном сайте. Template Параметр только для дочерних тем, подробнее тут.

Изображение темы

Для того, чтобы в качестве изображения темы не отображался «фотошоповский фон», мы создадим файл screenshot.png и отправим его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.png .

Вот что у меня получилось:

Для чего нужны wp_head() и wp_footer()

После того, как вы начинаете добавлять первый HTML в теме, то вам сразу же нужно сделать две вещи:

1. Добавить функцию wp_head() перед закрывающим тегом ,
2. Добавить функцию wp_footer() перед закрывающим тегом .

Что-то типо этого:

!DOCTYPE html> html> head> ?php wp_head() ?> /head> body> ?php wp_footer() ?> /body> /html>

Это обязательное условие для всех тем WordPress, благодаря этим функциям работают плагины (даже банально плагин для вставки кода Google Analytics на сайт), подключаются различные дополнительные CSS и JS в тему и так далее. Чуть более подробно описываю предназначение этих функций на видео.

functions.php

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

• подключения стилей и скриптов,
• регистрации областей меню,
• регистрации сайдбаров,
• включения поддержки изображений поста и так далее и так далее.

Также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require() .

Главное правило по functions.php — сам по себе файл не должен ничего выводить! �� То есть никогда не оставляем первую строку пустой! ��

И никогда не обрываем PHP-код пустыми строками где-то посередине кода! ��

Это очень распространённая ошибка. Очень!

Пока что можете создать пустой файл functions.php в папке с вашей темой.

Пример работы с functions.php. Что делать, если админ-панель наехала на вёрстку сайта?

После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.

Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.

В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php :

add_filter( 'show_admin_bar', '__return_false');

Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?

В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0 , верно?

• Высота админ панель для десктопа 32px, значит мы меняем упомянутое выше свойство на top:32px .
• Высота админ бара для мобайл (менее 782px) 46px, а значит меняем свойство меню на top:46px .

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

1. Добавьте к тегу функцию body_class() примерно так: > – суть этой функции в том, что она добавляет различные CSS-классы в зависимости от того, зареган пользователь или нет, от того, на какой странице мы находимся и так далее.
2. Используйте появившийся класс в теге – .admin-bar , для того, чтобы применять соответствующие стили только для ситуаций, когда админ бар отображается на сайте.

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

Что делать, если в процессе создания темы WP у вас всё сломалось и отображается белый экран?

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

1. Открываем файл wp-config.php , который лежит в корне вашей установки WordPress
2. Ищем там параметр WP_DEBUG и устанавливает его равным true (таким его и можно оставить до конца нашего курса).
3. После этого вместо вашего белого экрана у вас будет отображаться, какие ошибки возникли в процессе с указанием того, на какой строке и в каком файле находится ошибка в коде.
4. Исправляете и продолжаем ��

Купить курс

• 21 видеоурок
• Можно скачать готовый код после каждого урока
• Можно начать проходить курс сразу же после оплаты
• Достаточно базовых знаний HTML и CSS, чтобы пройти курс
• Единоразовый платёж
• Доступ навсегда
• Уроки актуальны в 2024-м году

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

Создание своей темы оформления для CMS WordPress — это несложный процесс. Для работы простейшей темы нужны всего два файла. Первый файл — «index.php», который отвечает за вывод содержимого страницы. Второй файл — «style.css», который содержит стили темы.

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

Для начала необходимо создать папку внутри директории «/wp-content/themes/» . Название этой папки лучше связанное с названием нашей будущей темы, к примеру «/wp-content/themes/mytheme» . Создайте такую папку.

Перейдите в только что добавленную папку и создайте в ней два файла с именами: index.php и style.css

Приступим к созданию темы с файла style.css. В этом файле содержится не только CSS код для оформления темы, но и информация о создателе темы, её названии и так далее. Напишите в этот файл следующий код:

/** * Theme Name: Моя тема * Author: MouseDC */ body < max-width: 800px; margin: 200px auto; >.header, .footer, .content

Обратите внимание на комментарии в начале файла. Эти комментарии описывают тему. Запись идёт в виде ключ (двоеточие) значение. Поле «Theme Name» является обязательным. Но так же существуют и другие поля:

/** * Theme Name: Название темы * Theme URI: Полная ссылка на страницу с описанием темы (к примеру, на сайте wordpress.org) * Author: Имя автора темы * Author URI: Полная ссылка на сайт автора темы * Description: Короткое описание темы. * License: Лицензия. Пример: "GNU General Public License 3.0" * License URI: Полная ссылка на. Пример: http://www.gnu.org/licenses/gpl-3.0.html * Tags: Теги, по которым тему можно будет найти в каталоге WordPress. К примеру: white, mouse, yellow, cheese, grey * Version: Версия темы. К примеру: 2.1.5 */ 

Закончим с файлом стилей и перейдём к исполняемому файлу index.php. Запишем в него следующий код, а затем разберём построчно, что он значит:

   "> " type="text/css" />    
'. get_the_title() .''; echo get_the_excerpt(); > >else< echo '
Не найдено ни одной публикации.
 '; > ?>
  

Теперь пройдёмся по функциям из примера:

bloginfo(‘charset’) отображает кодировку, в которой работает блог.
wp_get_document_title() — возвращает Title документа. На титульной странице это название блога. На странице с разделом — название раздела. На странице с детальным просмотром публикации — название публикации.
get_stylesheet_uri() — возвращает адрес файла style.css
wp_head() — выводит оставшиеся мета теги, служебные скрипты и ссылки на файлы. Эта функция вызывается всегда перед закрывающейся «»
have_posts() — проверяет есть ли записи в текущей выборке
the_post() — распечатывает текущую запись
get_permalink() — печатает постоянную ссылку на публикацию
get_the_title() — печатает название публикации
wp_footer — печатает служебные скрипты. Эта функция вызывается всегда перед закрывающимся «»

Если функция начинается с префикса «the_«, то она выводит результат на страницу, распечатывает его. А если начинается с префикса «get_«, то только возвращает значение.

Наша мини-тема готова. Осталось перейти в панель управления и активировать её. Для этого заходим в закладку «Внешний вид» — «Темы» и нажимаем «Активировать» напротив нашей темы. В целом, наш сайт готов. Конечно, в таком виде его практически невозможно использовать, но описанной информации должно хватить для понимания основ создания темы для 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 >

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

9. Sidebar.php

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

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

10. Footer.php

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

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

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

11. Index.php

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

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

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

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

Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между 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.

Работал Web developer в компании «ООО «Цитрус Дискаунт»», «Netpeak», «Infomir», Front-End Developer в компании «Ciklum Odessa», Programmer в COMODO, Web developer в компании «ООО «Цитрус Дискаунт»».

Узнайте больше

75