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

02.07
2008

Рубрики: WordPress |

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

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

poolimg.jpg

Для примера я взял шаблон по имени 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 под наш макет. А также распилим в Фотошопе сам макет на составные части.

Вебсовет

Digg it Bookmark it Stumble it add to technorati

Комментарии

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

  1. Никита 02.07.2008 21:21

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

  2. xreator 03.07.2008 13:40

    Блин, помню как я верстал простой сайт. а тут ещё для вп нужно

  3. Игорь Квентор 03.07.2008 19:10

    То ли еще будет! :)

  4. rust 03.07.2008 23:40

    Игорь, спасибо, вы так здорово все объясняете!
    Ждемс продолжения : )

  5. Игорь Квентор 04.07.2008 09:22

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

  6. АННА 04.07.2008 16:34

    Хотелось бы побольше таких же интересных постов

  7. rust 05.07.2008 00:52

    Для новичков вроде меня - в самый раз ;) Продолжайте, пожалуйста!

  8. Читающий мальчик 11.07.2008 16:35

    Хорошая статья, даже мне понятно стало :)

  9. Елизавета 13.07.2008 19:44

    Не ново, но интересно, теперь осталось ждать статьи не толкьо по диайну с версткой, но и по созданию сайта на WordPress который будет приносить прибыль)

  10. viktor_z 17.07.2008 17:00

    Про 404 отдельный респект, а то реально дней пять назад пытался заюзать сайт часа 2

  11. Виталий 18.07.2008 23:10

    Здравствуйте Игорь!Обращаюсь к Вам с просьбой. Я хочу переделать свою домаш. страницу и в качестве основы выбрал Вашу книгу “Блочная верстка web-сайта”. Но возникла проблема, решить которую я не в силах: почему-то не отображается картинка в шапке. Все файлы лежат в одной папке, вроде все без ошибок, но увы…
    Посмотрите, пожалуйста, код, где я ошибаюсь, подскажите.
    Файл index.html

    Высказывания правословных святых о посте, вере, церкви, молитве”

    файл style.css

    *{margin:0;padding:0;border:0;}
    body{padding:2%00;background:#fff;color#333;font-family:Verdana,sans-serif;}
    #container{width:880px;margin:0 auto;}
    #header{background:url(shap.gif)no-repeat;width:701px;height:150px;}
    #nav{background:white;font-size:120%;font-weight:bold;line-height:1,8em;
    text-align:center;}
    #nav ul{list-style-type:none;}
    #nav li{display:inline;margin:0,8px;}
    #nav li a{color:#0c0;}
    #nav li a:hover{color:#f00;}
    a{text-dekoration:none;}
    Буду Вам премного благодарен.

  12. Виталий 18.07.2008 23:12

    Почему-то содержимое файла не вошло.
    Файл index.html

    Высказывания правословных святых о посте, вере, церкви, молитве”

  13. Игорь Квентор 19.07.2008 00:06

    Приветствую, Виталий!
    Картинка в шапке не отображается потому, что у вас в записи:

    #header{background:url(shap.gif)no-repeat;width:701px;height:150px;}

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

    url(shap.gif) no-repeat

Трэкбеки

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




Поиск

Рубрики

Пузомерки





Blog Catalog

DMOZ

Каталог дизайнерских блогов