Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона

Автор: Владимир

Источник: Вебсовет

Прежде чем преобразовывать наш фотошоповский макет в шаблон для WordPress,
необходимо разобраться из чего вообще состоит типичный шаблон. Если вы уже
скачивали из сети различные шаблоны для WP, то заметили, что обычно они представлены
папкой с набором нескольких php-файлов, листом стилей CSS (а то и двумя) и
вложенной папкой с картинками. Такой шаблон просто добавляется в папку themes
на сайте, которая, в свою очередь, находится в папке wp-content. Затем из админской
этот шаблон активируется в один клик, и вы получаете новый облик вашего сайта.
Это просто.

Чтобы не изобретать в очередной раз велосипед, мы для нашего макета приспособим
уже существующий шаблон, коих в сети выложено для бесплатного скачивания тысячи.
Но мы не просто его скачаем, а разберем по косточкам, что-то удалим, что-то
добавим. Ну и естественно приладим наш собственный дизайн. Ссылок на скачивание
не даю, в гугле можно задать простой запрос «темы
Вордпресс»
и найти их массу. Предвосхищая вопросы об авторских правах,
скажу следующее: читайте файлы readme, имеющиеся практически в каждой теме.
Там подробно расписано, по какой лицензии распространяются шаблоны, и что конкретно
вы там можете изменить.

Для примера я взял шаблон по имени pool с сайта автора

Для примера я взял шаблон по имени pool с сайта автора

Для примера я взял шаблон по имени pool с сайта автора — lamateporunyogur.net.
В папке мы найдем 9 php-фалов: 404.php, archives.php, comments.php, footer.php,
header.php, index.php, links.php, page.php, sidebar.php, лист стилей style.css,
текстовый файл README и вложенную папку с изображениями images. Разберем по-порядку
что и зачем.

С файлом readme все понятно, почитаете (на английском), что-то полезное может
быть найдете. Лист стилей пока тоже не будем трогать. Начнем с пхп-шных файлов.

Вордпресс, как и многие другие движки, в самом простом приближении представляет
из себя что-то вроде конструктора. Есть ядро (все, что лежит за пределами папки
wp-content), которое рулит всем процессом. Туда мы влезать вообще не станем.
И есть готовые шаблоны, которые похожи на набор деталей этого конструктора.
Даже судя по названиям приведенных выше php-файлов можно догадаться, что например
header.php — содержит шапку сайта, footer.php — подвал и т.д. То есть то, что
в обычной html-странице статичного сайта собрано в одном месте, здесь порезано
на кусочки и собирается «на лету» при запросе страницы с сервера.

Дадим краткие пояснения пхп-файлам, входящим в состав шаблона:

header.php — выводит на всех страницах сайта шапку. В состав этого файла входят
такие части обычного html-кода как доктип (DOCTYPE), тэги html, head, body,
метатэги с описанием кодировки, привязки rss, и пр. Сюда же обычно выводят
название сайта, описание (description), и часто верхнее горизонтальное меню
и окно поиска.

index.php — индексная страница — самая главная на сайте. На Вордпрессе в состав
этого файла входит так называемый луп (loop) — повторяющаяся часть кода, которая
выводит последние написанные статьи (на ВП их называют постами) непрерывным
списком. Как лента туалетной бумаги. Старые сообщения постепенно «уходят» вниз,
вверху всегда висит самое свежее сообщение. По-умолчанию Вордпресс выводит
10 постов на главной странице сайта. Все более старые попадают в архив. Здесь
же есть постраничная навигация, обычно оформленная парой ссылок внизу страницы
типо: «вперед» «назад».

page.php — «пага», она же статичная страница. То есть, это практически такая
же страница, как и индексная, только «замороженная». Она никуда не уходит,
а висит себе постоянно на одном месте, и добраться до нее можно через главное
меню. Чаще всего это такие разделы сайта как: О сайте, Контакты, Карта сайта,
Об авторе и т.п. Соответственно, множества постов здесь быть не может, а выводится
лишь один.

archives.php — как следует из имени файла — выводит весь архив записей на
отдельной странице.

sidebar.php — это боковая колонка навигации, куда чаще всего выводится список
последних сообщений, рубрики (категории), блогролл (список ссылок на друзей
или еще куда), архив (только список) и Meta (управление) — ссылка для входа/выхода,
всякие валидаторы, а так же напоминание о том, что это Вордпресс и т.п. Кроме
указанных, сюда можно добавить и другие блоки. Часто это сделано в виде виджетов
— динамично добавляемых блоков из админки.

comments.php — этот файл внедряет на страницу с постом список комментариев,
которые также идут в виде ленты. Но комменты следуют сверху вниз по-порядку:
самые старые вверху, а самые свежие — внизу.

404.php — данный файл выводит надпись «Ошибка 404 – такого файла здесь нет!»
Это полезно, если кто-то зашел к вам через кривую ссылку, или какой-то файл
был удален. Текст вы можете писать тут любой. Главное — дать понять посетителю,
что введенный им адрес ошибочный, чтобы он не мучался и не перелопачивал весь
сайт в надежде таки что-то найти.

links.php — необязательный файл. Просто позволяет сделать отдельную страницу
со ссылками на дружеские ресурсы. Таких необязательных файлов может быть в
шаблонах любое количество. Чем меньше — тем лучше. Ведь любой добавочный php-файл
— это дополнительный запрос к серверу с командой прицепить еще одного пассажира.
А если ваш сайт на Вордпрессе будет достаточно хорошо посещаем, то нагрузка
может быть довольно ощутимая. Это может отобразиться как на скорости работы
сайта, так и недвусмысленными намеками от хостера о превышении нагрузки.

В некоторых шаблонах для каждого отдельного поста может быть предусмотрен
файл single.php. Он во многом схож с индексным файлом, хотя и имеет некоторые
отличия. Иногда такой подход более удобен, но пока не станем с этим заморачиваться.

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

В следующий раз начнем с файла header.php и будем сразу переделывать файл
CSS под наш макет. А также распилим в Фотошопе сам макет на составные части.

4 комментария к “Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона”

  1. Эм а продолжение будет ?

  2. […] в прошлый раз мы разобрались с рядовым составом шаблона для […]

  3. Работаю менеджером. Хочу сделать интернет магазин. Порекомендуйте человека или организацию, кто поможет мне в этом. Главное чтоб человек, который его делает был адекватный и недорого.

  4. Очень полезная статья, хоть я и не собираюсь пока сам делать шаблон. Узнал много нового. Спасибо за реальную инфу.

Оставьте свой комментарий

Страница 1 из 11