Структура темы оформления WordPress. Шаблон с нуля — Урок №1

Найти бесплатно в интернете и установить шаблон WordPress — дело достаточно простое и не требует никаких специфических навыков. Однако, не каждый может себе подобрать что-то стоящее, да и индивидуальности сайту стандартная тема оформления не придаст. Даже если вы не хотите сделать шаблон «от» и «до» самостоятельно, в любом случае придется в нем что-то менять — хотя бы логотип. И для того, чтобы внести эти изменения и при этом не платить деньги, необходимо хоть немного ориентироваться в том, как он устроен, какова структура шаблона WordPress, какой файл за что отвечает. Именно об этом мы и поговорим в данном уроке, где я разберу всю тему оформления WordPress от шапки до подвала и покажу что и как можно редактировать.

Структура темы оформления WordPress. Шаблон с нуля — Урок №1

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

Шаблон традиционно делится на 4 основные части:

  • Шапка сайта
  • Основной контент
  • Боковая колонка — сайдбар
  • И подвал

За эти части отвечают определенные файлы в структуре шаблона WordPress — их расположение вы видите на схеме ниже.

Структура темы оформления WordPress. Шаблон с нуля — Урок №1

Теперь давайте подробно перечислим основные файлы, которые содержатся в шаблоне WordPress.

Обязательные в структуре шаблона WordPress

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

Часто используемые файлы для создания темы WordPress

page.php — страница статей
single.php — страница вывода записей
sidebar.php — боковая колонка (сайдбар)
header.php — шапка (или заголовок) страницы
footer.php — подвал или нижняя часть блога (футер)
functions.php — файл, где прописываются добавочные функции шаблона WordPress (например, регистрация меню и сайдбаров)
category.php — вывод статей из 1 категории, часто содержание дублирует файл index.php
comments.php — вывод комментариев
archive.php — архив статей
searchform.php — шаблон поисковой формы
search.php — вывод результатов поиска
attachment.php — вывод прикрепленного файла
404.php — страница вывода сообщения об ошибке, когда пользователь запрашивает несуществующую страницу
tag.php — вывод заметок по определенному тегу (метке)
author.php — вывод статей одного автора

Сделать шаблон на практике

Выше перечисленных файлов может не быть, некоторые из них подключаются в index.php, category.php, archive.php, search.php и при их отсутствии коды вывода тех или иных функций прописываются непосредственно в этих 3х файлах. Кроме того, если нет файлов category.php и archive.php, то за отображение категорий, архива и результатов поиска отвечает индексный файл. Также в структуре шаблона WordPress могут присутствовать какие-то дополнительные файлы php или css, отвечающие за вывод какой-либо еще информации и подключаемые к основным. Как вы понимаете, поскольку этих файлов может быть сколько угодно, каждый из них можно оформить по-своему, например, чтобы дизайн страницы категорий отличался от результатов поиска. Или для статических страниц можно подключить одну шапку и футер, а для новостей — другую и так далее — в этом заключаются почти неограниченные возможности, чтобы сделать шаблон для WP.

Теперь давайте разберемся, где все это богатство хранится. За внешнее оформление блога отвечает папка wp-content/themes, в которой лежат папки различных шаблонов — для каждого своя. Внутри папки с шаблоном находятся вышеперечисленные файлы, а также возможно дополнительные папки с изображениями, скриптами, стилями и каким-то еще дополнительным содержанием. Вот так выглядит в ftp менеджере FileZilla папка темы бесплатного шаблона Summy:

Структура темы оформления WordPress. Шаблон с нуля — Урок №1

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

  • Желтым цветом обозначен текущий файл для правки, открытый в редакторе.
  • Синим — редактируемая тема оформления — здесь
  • Зеленым — список файлов в шаблоне, доступных для изменения

Структура темы оформления WordPress. Шаблон с нуля — Урок №1

Возможно, при сохранении у Вас появится сообщение о невозможности внесения изменений в файл. Это означает, что на него не установлены права на редактирование — заходим по ftp, находим файлы темы, выделяем, щелкаем правой кнопкой мыши, выбираем пункт меню «Права доступа к файлу» и прописываем «666». После этого сохраняемся.

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

[pwal id=»12619513″ description=»Чтобы посмотреть видеоурок, нажмите на одну из кнопок»]

[/pwal]

После просмотра урока «Как сделать шаблон WordPress? Структура» не забываем оставлять комментарии — Ваше мнение очень важно для меня, т.к. я стараюсь исправить допущенные неточности и последующие уроки строю с учетом Ваших пожеланий!

Пару слов о том, как подключить html к WP

Использовать мы будем бесплатную тему оформления WhitePortfolio — скачайте ее и разархивируйте на компьютере.
Любой шаблон WordPress должен содержать файлы: index.php и style.css. Поэтому первым делом необходимо создать новый каталог в папке с темами на сайте и сохранить index.html и файл (файлы, если их несколько) стилей как index.php и style.css.

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

Путь же к файлу стилей будет выглядеть — вспоминаем прошлый урок — следующим образом:

После всего этого можно уже приступать к разбивки страницы на составные части: шапку сайта, то есть все, что находится в самом верху, включая меню, переносим в отдельный файл и сохраняем его как header.php. Боковую колонку — в файл sidebar.php, основную часть оставляем в index.php, а подвал — в footer.php.

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


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

На этом пока все, скоро выйдет продолжение этой статьи, и чтобы ее не пропустить, подпишитесь…. А полную версию курса по интеграции html шаблона в тему оформления для WordPress вы можете увидеть в видеоформате в мини-курсе «HTML в шаблон своими руками» из тренинга «Веб-сайт своими руками».

Структура темы оформления WordPress. Шаблон с нуля — Урок №1

Узнать подробности о курсе

Напоследок, как и обещал — предлагаю Вам скачать отличные курсы по HTML и CSS, изучив которые вы сможете самостоятельно редактировать и настраивать свой сайт.

Структура темы оформления WordPress. Шаблон с нуля — Урок №1Структура темы оформления WordPress. Шаблон с нуля — Урок №1
Оцените статью