наверх

Интеграция верстки в WordPress

В этой статье мы разберем структуру темы WordPress и создадим простой шаблон темы по собственному дизайну.

Конструкция темы

Для начала давайте рассмотрим структуру файлов любой темы данной CMS. Существует два основных файла:

  • index.php — этот файл отвечает за вывод главной страницы вашего сайта;
  • style.css — отвечает за внешнее оформление вашего сайта.

Эти файлы должны присутствовать обязательно. Если один из них будет отсутствовать, то ваша тема не будет работать.

Тему разбивают на блоки:

  • header.php — шапка сайта;
  • footer.php — подвал сайта;
  • sidebar.php — сайтбар(сайтбары) вашего сайта.

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

  • page.php — шаблон вывода страниц;
  • single.php — шаблон вывода записей;
  • search.php — вывод результов поиска;
  • searchform.php — оформление формы поиска;
  • 404.php — вывод страницы 404-ой ошибки;
  • comments.php — вывод коментариев и оформление формы для комментрариев;
  • functions.php — предоставляет дополнительные функции необходимые для полноценной работы темы.

И последний файл который стоит добавит в WordPress-тему это screenshot.jpg, который будет являться логотипом темы в системе администрирования. Обычно он представляет собой скриншот дизайна темы, который помещают в папке соответствующей темы.

Создание темы WordPress

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

1. Подключаемся по FTP к нашему сайту и идем в папку содержащую шаблоны тем по пути /wp-content/themes/ и создаем здесь папку с названием нашей темы. Назвать ее можно как угодно — главное латинскими буквами. Далее заливаем туда файлы нашей верстки и проверяем наличие необходимых файлов index.php и style.css.

Обратите внимание что все файлы в папке темы должны быть с расширением .php а не .html.

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

3. Следующее что нужно сделать это разбить индексный файл на блоки. Создаем файл header.php и выносим из индексного файла в него все что связано с шапкой(шапку и навигацию например). Далее то же самое проделываем с файлами footer.php и sidebar.php соответственно. По итогам этих действий у нас в файле index.php должна остаться только контентная область.

Теперь шаблон разбит на блоки и осталось их подключить в индексном файле с помощью следующих функций:

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

Вывод статей на главную страницу

Для того чтобы вывести на главной странице список статей воспользуемся специальными функциями WordPress. В индексном файле прямо перед версткой примера статьи вставляем условие и цикл:

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

Теперь нам нужно вывести уникальные названия статей и их содержание. И опять нам на помощь приходят специальные функции WordPress:

  • the_title(); — осуществляет вывод заголовка статьи;
  • the_excerpt(); — выводит превью текста статьи;
  • the_permalink(); — ссылка на саму статью.

Шаблон детального просмотра записи

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

Следующее что нужно сделать это вывести контент и заголовок статьи. Тут нам поможет уже известная функция the_title(); которую следует вставить в то место где вы планируете выводить заголовок. Для вывода контента записи используем специально предназначенную для этого функцию the_content();.

Не забудьте перед выводом заголовка и контента записи добавить условие и цикл который мы добавляли в индексном файле для вывода статей(if ( have_posts() ) и т.д.).

Метки

Вывод меток осуществляется добавлением следующей конструкции после вывода контента:

Для того чтобы создать шаблон детального просмотра страниц, следует создать файл page.php и проделать с ним те же манипуляции что и с single.php.

После всех этих действий все еще остается одна проблема. Не работают плагины. Для того чтобы они заработали в файле header.php перед закрывающим тегом head нужно прописать функцию wp_head() и в футере перед закрывающим body вставляем wp_footer().

Вывод хлебных крошек

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

Для вызова хлебных крошек нужно добавить специальную функцию для их формирования в файл functions.php:

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

Вывод произвольного меню

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

Где top_menu это название вашего меню. После этого в файле header.php, там где задумывалось поместить меню, осуществляем его вызов:

После этих действий в админке, на вкладке «Внешний вид» должна появиться опция «Меню»:

Здесь можно создать, удалить или отредактировать уже существующее меню. Добавление страниц в меню осуществляется через боковую панель «Страницы» — ставим флажки в нужных нам чекбоксах и нажимаем кнопочку «Добавить в меню».

В графе «область меню» указаны все зарегистрированные меню — из них выбираем нужное.

Создание сайтбаров и регистрация витжетов

Сайтбар в WordPress — это область на сайте, в которой выводятся виджеты.

Регестрируем сайтбар в файле functions.php следующим образом:

  • name — это название регистрируемого сайтбара;
  • before_widget — это обертка виджета, т.е. каждый виджет у нас будет обернут в div с классом widget;
  • before_title — обертка заголовка виджета;
  • after_title и after_widget — закрываем обертки.

Далее вызовем наш сайтбар в соответствующем месте шаблона.

После этих действий в админке, во вкладке «Внешний вид» должны появиться виджеты.

И если перейти в сами «Виджеты» то мы увидим зарегистрированный нами сайтбар в который можно перетаскивать виджеты.

Таким образом можно зарегистрировать сколько угодно виджетов. Самое главное не забывать указывать нужную цифру в вызове сайтбара(в скобках «dynamic_sidebar(1)» ).

Вывод миниатюр для записей

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

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

Где nameclass это название класса для вашей картинки. Значение class при желании можно заменить на id .

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

Создание формы поиска

Для вывода формы поиска следует перейти во вкладку «Виджеты» и перетащить виджет «Поиск» в сайтбар в котором планируется вывод поиска.

Для дальнейшей работы с данной формой в папке темы создаем файл searchform.php. Код формы копируем у дефолтного виджета поиска и вставляем в файл searchform.php.

После этих действий можно спокойно модифицировать html-код формы поиска, а так же работать над ее оформлением.

Далее необходимо создать файл sarch.php который будет отвечать за вывод результатов поиска. В него просто копируем содержимое файла index.php и в принципе все! Теперь если мы введем поисковый запрос нам покажут страницу с результатами.

Но что если результата нет? Или пользователь ввел билеберду? В таком случае можно в месте где кончается наше условие if ( have_posts(), вписать что-то вроде:»Поиск не дал результатов».

Где the_search_query(); это функция которая выводит текущий поисковой запрос.

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

Создание страницы 404

В папке темы создаем файл 404.php. И копируем в нее шаблон с подключением шапки, подвала, сайтбара и оберткой контентной области.

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

На этом в принципе все необходимые действия для создания темы заканчиваются)

Wordpress