Этот вопрос часто задают в интернете, поэтому сделаем ее вместе в нескольких частях. Будут описаны общие действия, их порядок и логика разработчика, детали всегда можно прочитать в документации, она доступна как на английском языке, так и на русском.
Начнем с исходных данных (более менее идеальных)
- Есть макет в 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”);
Шапка готова, первая часть подошла к концу. Далее будем разбирать футер.