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

Создание 2-х колоночного шаблона WordPress

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

Если вы уже скачивали из сети различные шаблоны для WP, то заметили, что обычно они представлены папкой с набором нескольких php-файлов, файлом стилей CSS (а то и двумя) и вложенной папкой с картинками.

Такой шаблон просто добавляется в папку themes на сайте, которая, в свою очередь, находится в папке wp-content. Затем из админ-панели этот шаблон активируется в один клик, и вы получаете новый облик вашего сайта. Это просто.

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

Ссылок на скачивание не даю, в гугле можно задать простой запрос «темы Вордпресс» и найти их массу.

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

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

poolimg.jpg

В папке мы найдем 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 — необязательный файл. Просто позволяет сделать отдельную страницу со ссылками на дружеские ресурсы. Таких необязательных файлов может быть в шаблонах любое количество.

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

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

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

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

02.07.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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