Как сделать тему для wordpress с нуля. Часть 1

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

Начнем с исходных данных (более менее идеальных)

  • Есть макет в psd который нужно воплотить в жизнь
  • Верстка этого макета, включая скрипты галерей всякий и мелких взаимодействий. Все страницы
  • Тех. задание на сайт (для понимания как должно работать)
  • Сервер где это размещать
  • Немного знаний php
  • Средние знания css/html/js

Считаем что wp установлен, обновлен до последней версии.
Тема wordpress – это набор шаблонов в папке wp-content\themes\vashatema\ и плагины, которые в ней испольуются. Темы мы будем делать не на продажу, а под конкретного заказчика, поэтому пока нас волнуют только файлы темы, плагины рассмотрим потом.

Создаем папку vashatema, в которую надо поместить обязательные файлы:

  • functions.php
  • index.php
  • screenshot.jpg
  • style.css

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

Мысленно выделили их и дописали еще 2 пустых файла:

  • header.php
  • footer.php

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

Начнем заполнять шапку:

Шапка начинается с копипасты из верстки и разбора написанного. Для начала заменяется title на

<?php echo wp_get_document_title(); ?>

В этот момент нужно открыть документацию к wp и прочитать что умеет функция wp_title() и bloginfo(). Далее нужно перенести все стили и скрипты в файл functions.php.

Делается это так, пишется функция в которой подключается нужное количество файлов стилей. Файлы стилей подключаются своей функцией: wp_enqueue_style( ‘theme2’, get_template_directory_uri() . ‘/slick/slick.css’); как то так к примеру. Затем функция-обертка подключается в хук, но проще это показать:

 
function enqueue_styles() {
wp_enqueue_style( 'theme2', get_template_directory_uri() . '/slick/slick.css');
wp_enqueue_style( 'theme3', get_template_directory_uri() . '/slick/slick-theme.css');
wp_enqueue_style( 'theme4', get_template_directory_uri() . '/css/gallery.css');
wp_enqueue_style( 'theme5', get_template_directory_uri() . '/css/prettyPhoto.css');
wp_enqueue_style( 'theme6', get_template_directory_uri() . '/css/owl.theme.css');
wp_enqueue_style( 'theme7', get_template_directory_uri() . '/css/bootstrap.css');
wp_enqueue_style( 'theme8', get_template_directory_uri() . '/css/bootstrap-theme.css');
wp_enqueue_style( 'theme1', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_styles');

Обратите внимание на wp_enqueue_style( ‘theme1’, get_stylesheet_uri()); – этот файл должен быть подключен всегда. В нем описание, это тот самый style.css, который лежит в корне шаблона.

Когда все подключено – возвращаемся к header.php. Удаляем все подключения стилей и вместо них вставляем . Это подключит стили из functions.php, должно быть пере закрывающим

Далее по ходу верстки шапки нужно заменить некоторые штуки переменными шаблона. Наиболее встречающийся элемент в шапке для этого – это меню. Здесь нужно открыть документацию и изучить функцию wp_nav_menu(). Т.е. эта функция с нужными аргументами (про которые вы прочитаете) заменить большой список меню на сайте. Пункты меню будут в таком случае задаваться из админки. Так же нужно подключить область меню в functions.php:

 
register_nav_menus(array(
'top' => 'Верхнее меню' , //Название другого месторасположения меню в шаблоне
'bottom' => 'Нижнее меню' //Название месторасположения меню в шаблоне
));

Один из аргументов в wp_nav_menu будет этот самый ‘top’ или ‘bottom’.

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

 
/*
Theme Name: DD
Author: Web-Porosya.com
Autor Email: porosya.entertainment@gmail.com
Description: theme for site. 2016.
*/

Текст после двоеточий отображается в админке при выборе темы. Далее следует писать стили, но так как в верстке часто стили лежат не в корневой папке, то можно написать там просто что то вроде этого: @import url(“css/stylefull.css”);

Шапка готова, первая часть подошла к концу. Далее будем разбирать футер.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *