Нет комментариев 03.07.2007

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

Дизайн у нас готов, в этом “выпуске” мы будем его верстать. Для чистоты эксперимента возьмем дефолтную англоязычную тему (kubrick) и сделаем на ее основе то, что нарисовали.

Тема Кубрик состоит из следующих файлов:

• 404.php – понятно, страница ошибки.
• archive.php – вывод списка постов в определенной категории или по дате.
• archives.php – шаблон страницы архивов. На этой странице выводится список месяцев и список категорий
• attachment.php и comments-popup.php – честно говоря, не знаю, что за они, не пользуюсь.
• comments.php – вывод списка комментариев и формы
• footer.php – футер
• functions.php – не знаю
• header.php – хедер
• index.php – главная страница с списком последниих постов
• links.php – шаблон страницы для блогролла
• page.php – шаблон контентной страницы
• screenshot.png – скриншот для отображения темы в списке тем (вкладка Presentation в админке)
• search.php – шаблон результатов поиска
• searchform.php – форма поиска, просто вынесена в отдельный файл.
• sidebar.php – сайдбар, боковая колонка
• single.php – шаблон просмотра отдельного поста
• style.css – собственно стили, которые все это описывают.
• папка images – с картинками

Первым делом мы удаляем все картинки из папки images (саму папку оставляем). Вторым делом открываем в редакторе (я буду работать в DreamWeaver 8) файл style.css, меняем данные Theme Name, URI, Author и другие и удаляем все, что идет после этого блока.

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

Я постараюсь вкратце рассказать, что обозначает то или иное свойство CSS, но выже понимаете, что я не могу рассказать обо всем. Все-таки, чтобы работать с темами и что-то в них переделывать, нужно хоть немного владеть CSS (и HTML, и PHP). Я начинал учиться по книге М. Дубакова “Веб-мастеринг свойствами CSS”. А когда-нибудь раскошелюсь и куплю книгу Э. Мейера “CSS-каскадные таблицы стилей. Подробное руководство” – говорят, хорошая.

После удаления картинок и CSS наш блог выглядит так.

Теперь откроем наш дизайн в Photoshop и нарежем графику.

Удалим все направляющие (View > Clear Guides) и расставим их по-новой, только те, которые действительно нужны (потому что в процессе дизайна мы наставили много промежуточных).

Финальные рулеры для резки выглядят следующим образом.

Пояснение: вверху мы “отбили” кусок с меню, ниже – “логотип”, причем так, чтобы в картинку попала нижняя тень. Дальше я немного схитрил. Можно, наверное, заменить, что основная рабочая часть стала немного шире, чем на предыдущем дизайне. Это сделано для того, чтобы нормально вырезать повторяющийся фон, который будет уходить вправо и влево, вверху. Видите, крайние вертикальные рулеры проходят через “кружок”? И еще один вертикальный проходит через следующий “кружок”. Вот область между вторым и третьим рулером мы будем повторять. Также важно не забыть на момент вырезания этого фона отключить широкую контентную колонку (потому что она имеет тень, которая накладывается на тень от хедера) и шейп в хедере (потому что его кусочек попадает в выделенную область). Также надо обратить внимание, что вертикальные рулеры раньше стояли по тени контентной части, а горизонтальный разделитель выходил за пределы выделения. Нам надо, чтобы все лежало внутри. И на картинке не видно как “отбит” футер, но там ничего сложного, увидите позже.

 Нарежем графику.

Запоминаем (за четыре года я уже делаю это почти с закрытыми глазами) – M, ALT+E+Y, CTRL+N, CTRL+V, ALT+F+W, что значит:

• M – инструмент выделения. Выделяем нужную область. 
• ALT+E+Y – копируем область. Отличается от CTRL+C тем, что копирует через все слои (CTRL+C скопировало бы выделение только на текущем слое).
• CTRL+N – создаем новый документ. Он автоматически создается под размер картинки в буфере.
• CTRL+V – вставляем из буфера
• ALT+F+W – сохраняем для веб. В нашем случае сложной фото-графики нет, поэтому все файлы будут GIF.

После всех этих операций у нас получатся следующие файлы:

• bg1.gif – фон для верха
• bg2.gif – фон для меню
• bg3.gif – фон для контентной части
• bg4.gif – фон для заголовков
• bg5.gif – фон для футера
• hd.gif – шапка

Теперь немного о структуре шаблонов Кубрика, в частности, главной страницы. Когда она “собрана”, картина такая.

Главный контейнер – page. Внутри лежит header, внутри которого headerimg. Далее следует content, который в зависимости от того,список постов это или просмотр отдельного, имеет класс narrowcolumn и widecolumn соответственно. Внутри content лежат post (отдельные посты). А каждый пост внутри еще имеет entry (собственно текст поста). Далее следует navigation (это для ссылок “раньше, позже” или “следующая страница, предыдущая страница”). После всего этого идет sidebar и завершает картину footer.

Вот глядя на эту картину и наш дизайн будем переделывать шаблоны, а потом под это дело напишем CSS (я обычно делаю все параллельно, и конечно же у меня есть куча заготовок для разных типов расположения элементов, я ж не верстаю все темы с нуля)

Открываем header.php.Вот такой он изначально. А вот такой он после переделки. Что изменилось?

• мы убрали блок <style>, в котором переключалась смена фона при просмотре отдельно поста.
• мы убрали из кода headerimg
• добавили menu со ссылками.
• добавили контейнер для логотипа (logo)

Теперь у нас внутри header лежит три блока – menu, logo и description.

Открываем index.php. Тут работы будет больше. Вот оригинал. Делаем следующее:

• удаляем из кода class=”narrowcolumn” (он нам не нужен, потому что у нас будет всего одна колонка)
• удаляем из заголовка Permanent Link to – это лишнее.
• <small><?php the_time(’F jS, Y’) ?> <!– by <?php the_author() ?> –></small> заменяем на <div class=”sub”><?php the_time(’d.m.Y’) ?> | <?php the_category(’ &middot; ‘) ?> | <?php comments_popup_link(’комментарии: 0 &#187;’, ‘комментарии: 1 &#187;’, ‘комментарии: % &#187;’); ?> <?php edit_post_link(’&nbsp;&nbsp;&nbsp;&nbsp; Edit’, ‘’, ‘ | ‘); ?></div>. Здесь: вместо small поставили div, поменяли вывод даты на цифровой (d.m.Y), далее поставили категорию, к которой относится пост (middot здесь вместо разделителя запятой), далее – количество комментариев и ссылка на форму комментов + перевели на русский) и ссылка на редактирование поста (она видна только автору блога, а nbsp просто отодвигают ее немного).
• Read the rest of this entry заменили на “читать далее”.
• <p class=”postmetadata”> удалили, потому что информацию из него перенесли выше, в sub.
• продублировали ссылку на комментарии (comm)
• в navigation удаляем блоки alignleft и alignright, между Previous Entries и Next Entries ставим вертикальную черту, а сам текст переводим на Ранее и Далее.
• ниже по коду: переводим текст.
• удаляем <?php get_sidebar(); ?>, потому что сайдбара у нас нет.

Вот что получилось.

Открываем footer.php (оригинал). Здесь совсем немного. Переводим текст, добавляем копирайты (что получилось).

Итак, мы в коде оформили главную страницу. Выглядит она так. Теперь уже можно добавить CSS и посмотреть, что получается.

Вот стили, которые отвечают за оформление главной страницы. Там внутри я расписал достаточно подробно, за что какое свойство отвечает (получается мини-пост такой).

И теперь наша главная страница приобрела законченный вид.

Переходим к странице просмотра поста и комментариям.

Открываем исходный single.php и правим:

•  class=”widecolumn” убираем
• navigation приводим к тому же виду, что в index.
• Permanent Link:  убираем (в принципе вообще можно убрать ссылку отсюда)
• добавляем заголовку класс, чтобы отодвинуть пост от горизонтального разделителя, потому что блок sub, который делал это на индексе, перемещается вниз.
• копируем sub из index, только меняем ссылку на комментарии на просто отображение количества комментариев. И добавляем ссылку трекбека.
• <p class=”postmetadata alt”> убиваем совсем.

Поправленный single.php.

Открываем исходный comments.php и правим:

• правим и переводом заголовок над списком комментариев
• в списке комментариев:
  – <?php echo $oddcomment; ?> убираем (нам не надо, чтобы визуально комменты чередовались, четный-нечетный).
  – Says: убираем
  – переводим строчку о модерации
  – ниже, F jS, Y меняем на d.m.Y, at на @, “edit” сокращаем до “e”
  – <?php comment_time() добавляем <?php comment_time(”H:i”), чтобы перевести время коммента в 24–часовой формат
• форма комментариев:
  – Leave a Reply – переводим
  – переводим названия полей Name, URI и echo “(required)” заменяем на echo “(*)”
  – названия полей перемещаем перед полем (а не после)
  – кнопку отправки коммента переводим и даем ей класс “btn”
  – дублируем navigation из single и делаем ссылку “наверх”.

Поправленный comments.php

Теперь займемся CSS-настройкой. Эта часть стилей выглядит следующим образом. Как и в случае главной страницы, там много комментариев по ходу, что к чему.

И вот, что у нас получилось.

Можно сказать, что 80% работы мы сделали. Осталось теперь по мелочи подправить в остальных шаблонах вывод информации.

Идем по порядку.

404.php – убираем narrowcolumn. Для класса center пишем стиль {text-align:center}. Файл.

archive.php – убираем narrowcolumn. Пишем стиль для pagetitle.  Переводим. Navigation копируем из index.

А дальше немного сложнее. <div class=”post”> полностью копируем из index. Только <?php the_content(’читать далее &raquo;’); ?> меняем на <?php the_excerpt(); ?>, чтобы выводилась цитата, а не полный текст. Снова меняем navigation, блок про “не найдено” тоже копируем из index и удаляем сайдбар <?php get_sidebar(); ?>. Файл. Картинка.

archives.php – убираем widecolumn. Убираем <?php include (TEMPLATEPATH . ‘/searchform.php’); ?> – вызов формы поиска. Каждый блок со списком “заворачиваем” в блок “post”. Файл. Картинка.

links.php – то же самое, что и у archives.php.

page.php –  убираем narrowcolumn. удаляем сайдбар <?php get_sidebar(); ?>. Заголовку добавляем класс inner, как в случае с single.   Файл. Картинка.

search.php – убираем narrowcolumn. Удаляем сайдбар <?php get_sidebar(); ?>. Блоки navigation, список результатов вставляем из archive.php (там, где вывод цитаты). Т.е. все копируем на свои места из archive.php.

Но у нас нигде не фигурирует форма поиска. Возвращаемся к footer.php и где-то под копирайтами вставляем код вызова <?php include (TEMPLATEPATH . ‘/searchform.php’); ?> и настраиваем внешний вид с помощью CSS. И после настройки форма выглядит так – картинка.  А результаты поиска – так. И сам файл.

Вот для ознакомления дополнительные стили, которые мы написали.

На этом работа с шаблонами закончена. Начинаем проверять разные сценарии и разные браузеры.

Первый баг. Если нет результатов поиска (картинка). Что ж, возвращаемся к шаблонам index, archive, search и убираем в них class=center, на заголовок вешаем class=inner, убираем вызов формы поиска и “заворачиваем” этот кусок кода в <div class=”post”>. Получаем вот такую красоту.

Баг номер 2. В IE появилась какая-то полоса. Примерно 15 минут поиска показывают, что все дело в том, что у entry в post нет ширины. Это следствие, а вот причины, почему IE вдруг отодвигает таким образом, я так и не понял. Так что добавляем width:99% для entry и все в порядке.

Итого: FF 2.0.0.4., Opera 9.0, IE 6.0.2, Safari 3.0.2 (Win) – все корректно.

Все стили, что мы написали в одном файле.

ВСЁ! ВСЁ! ВСЁ!

Осталось только теперь свести все это в e-book и продавать по спекулятивной цене. Но уже после отпуска.

Тема пакуется и отправляется клиенту.

Вопросы, комментарии?