13 Шагов к созданию Шаблона для WordPress!

Здравствуйте, дорогие друзья и читатели – Sozdaiblog.ru!

Сегодня я покажу, как с ноля создать шаблон для WordPress.

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

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

Итак.

 

Подготовка к созданию шаблона для WordPress.

Перед тем, как начать создавать шаблон для WordPress, с помощью FTP-клиента, нужно подключиться к действующему серверу в Интернете или локальному, установленному на Вашем компьютере.

Чтобы не мучиться с передачей файлов через FTP, советую установить WordPress локально и разрабатывать шаблоны на виртуальной машине.

С точки зрения редактирования и правки кода, настоятельно рекомендую использовать — Notepad++. Благодаря подсветке кода и простому интерфейсу, этой программе отдаёт предпочтение наибольшее количество Веб-мастеров.

 

Создание необходимых папок и файлов.

Зайдите в корневую директорию, содержащую установки WordPress, перейдите в wp-content => themes и создайте там папку с именем — «New Theme 3.0». Внутри этой папки разместите следующие файлы (расширения – PHP, CSS, PNG):

 

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

 

Шаг-1 style.css

Файл style.css, будет содержать в себе все элементы стиля шаблона для WordPress. Именно его мы будем использовать первым, чтобы  объявить имя шаблона, имя автора, ссылку на сайт с описанием и номером версии:

 

 

Эта информация, может быть изменена в любое время. Главное, чтобы всё было закомментировано (как закомментировать строку с HTML, PHP, CSS кодом).

Теперь, в этом файле, нужно создать несколько основных определений стилей, которые в дальнейшем будут реализовываться в некоторых PHP файлах темы WordPress:

 

 

В этом коде используется тег — body, только для спецификации (определения) шрифтов используемых на сайте и цвета фона (всё меняется на любой вкус). Затем, мы объявляем атрибуты стиля для связи, а также некоторые из заголовков, которые мы будем использовать на протяжении всей нашей темы.

#wrapper — будет отвечать за полный размер веб-страницы. С #header, всё очевидно, это заголовок, а #blog, это последние сообщения на главной странице.

Остальные стили колонтитулов # (заголовков) footer и sidebar, будут применяться к соответствующим их названию файлам, которые мы рассмотрим чуть позже.

 

Шаг-2 header.php.

 

Теперь, мы создадим файл — header.php, который будет содержать логотип и обычную навигацию:

 

 

На самом деле, подробно этот код объяснять нет смысла. Просто нужно запомнить, что он должен присутствовать в header.php, во всех темах WordPress. Но, если Вам интересно, то расскажу.

В самом начале, мы объявляем тип документа и стандартный код, который будет использоваться для отображения названия сайта, вводимое в настройках администратора WordPress. Далее, идёт style.css и PHP код, позволяющий работать с древовидными комментариями.

 

Шаг-3 Добавление пользовательской навигации.

Теперь, когда мы закодировали в header.php нашу основную информацию, можно добавить пользовательское меню навигации. Но, прежде, нужно открыть файл functions.php и прописать специальную функцию:

 

 

Как видите, я прокомментировал участки кода. Первая часть add_action, используется для добавления поддержки пользовательского меню, а вторая, регистрирует саму область первичного меню. Далее, переходим к самой реализации в шаблоне WordPress.

Чтобы создать меню, нужно, ниже ранее прописанного кода в файле header.php добавить строчку:

 

 

Давайте, немного её разберём. Основной функцией, которая здесь используется, является wp_nav_menu. Переменные  sort_column , container_class , и theme_location, применяются в качестве аргументов. Sort_column — гарантирует порядок отображения, который задаётся в админке. Container_class — позволяет выбрать style.css Вашего меню. Ну, а theme_location, просто присваивает primary-menu те значения, которыми мы манипулируем в реальном времени.

 

Шаг-4 Стиль навигации шаблона для WordPress.

 

Благодаря произведённым ранее действиям, наша WordPress тема, обрела пользовательскую навигацию. Но, обычное меню выглядит просто и не привлекательно. Чтобы это исправить, мы создадим класс nav в файле style.css.

 

 

Как видите в .nav, мы сделали основные заявления, такие, как цвет фона, ширина навигации, выравнивание и положение элемента на мониторе. Далее, мы задали порядок размещения основных элементов и всплывающих окон.

Завершающим действием, будет добавление стилей для ссылок из выпадающего меню:

 

 

В .nav ul ul, мы устанавливаем абсолютную позицию и первую выпадающую ссылку делаем 100%, чтобы она появлялась под основной. Так же, мы изменили фон выпадающего окна, чтобы он отличался от существующего. К общим значениям, был добавлен атрибут z-index:99999, который заставляет раскрываться выпадающие ссылки, над другими объектами.

В следующей ссылке, мы опять изменили цвет окна, и сделали 30% отступа от основного меню.

На этом, добавление стилей для пользовательского меню шаблона вордпресс закончено.

 

Шаг-5 index.php.

Файл index.php, будет отвечать за главную страницу нашего сайта. Он будет содержать в себе код для включения верхнего и нижнего колонтитула, а также боковой панели, о которой мы поговорим позже.  Ещё, в нём будет присутствовать функция включения самых последних сообщений на блоге и вывода соответствующих им миниатюр.

 

 

Следующие строки кода, используются для вывода всей информации в header.php, sidebar.php и footer.php там, где Вы их разместите в WordPress шаблоне:

 

 

В принципе, разобраться в этом коде, не так сложно. После вызова header.php, мы используем наш #blog, который был создан изначально в style.css. Затем, добавляем цикл вывода последних сообщений блога и код  для заголовка, который  оборачиваем в <h3> </ h3>.

Здесь, присутствует кусок кода, который выводит миниатюры в постах на главной странице блога. Пока, он неактивен, но следующим шагом используя functions.php, мы заставим его заработать.

 

Шаг-6 Включение миниатюр в постах.

 

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

 

 

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

 

Шаг-7 sidebar.php.

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

 

 

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

С помощью div, мы вызываем стили из файла style.css, а код ниже, даёт нам возможность размещать виджеты из админки  WordPress, в желаемой последовательности.

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

 

 

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

 

Шаг-8 single.php.

single.php — это то, что будет использоваться для одной страницы поста. Представленный ниже код, будет очень похож на тот, который мы поместили в index.php. Отличие лишь в том, что мы добавили шаблон комментариев с div и код, который должен включить comments.php:

 

 

Шаг-9 comments.php

С выходом вордпресс 3.0 разработчики решили облегчить жизнь авторам тем и шаблонов для WordPress. Они перешли на единый стандарт форм комментариев.

Код ниже, нужно положить в Ваш файл comments.php:

Это добавит вашим сообщениям стандартную форму комментариев.

 

Шаг-10 page.php

В файл page.php, мы поместим код, который будет отвечать за статические страницы нашего сайта. Он будет практически идентичен тому, который был размещён в single.php. Единственное изменение, это отсутствие шаблона комментариев и добавление кода, который обрабатывает страницы, а не должности. Всё остальное будет одинаковым:

 

 

Шаг-11 category.php

 

Файл category.php, служит для вывода сообщений из определённой рубрики или архива,  к которым обращается читатель. Здесь, основная часть кода будет похожа на page.php и single.php, которые мы закодировали выше, за исключением куска в самом начале:

 

Фрагмент кода ниже, это единственное, что мы добавили после основного цикла:

 

 

Здесь мы используем кучу заявлений if/elseif в PHP, которые показывают то, что Вы просматриваете на блоге. К примеру, если мы смотрим категорию под названием — «Шаблон для WordPress», то она будет показана в h2  Архив из категории: «Шаблон для WordPress»  перед всеми записями, разбивая их по датам или авторам.

 

Шаг-12 Настройка заднего фона сайта.

 

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

 

 

Итак, пользовательские фоны включены. Бонусом, мы добавим ниже код, который делает доступными ссылки архивов, комментариев и тегов из RSS  ленты:

 

 

Шаг-13 footer.php

В завершении создания вордпресс шаблона, мы добавим кусок кода в footer.php, использующий #footer, который был объявлен в style.css. Наш подвал будет содержать, только основную информацию об авторском праве, а так же RSS ленту новостей и комментариев:

 

На этом, создание самого простого шаблона (темы) для WordPress окончено.

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

 

 

А у Вас, получилось создать свой первый шаблон для WordPress?

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

 

• Как установить шаблон (тему) на WordPress.

• Как установить плагин WordPress.

• Что делать если Сайт на WordPress Взломали.

 

На сегодня это всё.

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

До новых статей…

 

С уважением, Денис Черников!