Все прошлые занятия я мучил Вас минимальным кодом страниц, которые нужны для отображения блога. Сегодня поговорим о том, как сделать оформление не только информативным, но и привлекательным…

Прежде всего, сложите написанные по прошлым урокам страницы в одну папку и добавьте туда же файл style.css, который пока оставьте пустым.

Модульную сетку на странице можно задавать с помощью тегов <table> и <div>.

Слышал я про то, что для поисковиков предпочтительнее слоевая структура, а не табличная, но на поверку это оказалась SEO-шная байка двухлетней давности. С тех пор алгоритм ранжирования несколько раз менялся и теперь поисковикам безразлично какой структуры Ваша страница.

Технология – не очень сложна:

1. Загружаем нашу тему на блог (WAMP-сервером для локального тестирования запаслись, я надеюсь?)
2. Активизируем ее из админпанели и проверяем на синтаксис отображение в браузере. (Страшненькая, правда?)
3. Сохраняем страницу из браузера на компьютер и открываем в HTML редакторе.
4. Если Вы не убирали комментарии, то легко можете определить принадлежность кода к различным модулям нашего скина.
5. Оформляем нашу страницу с помощью тегов табличной <table> или слоевой <div> версткии сохраняем ее. Шрифты и отступы пока не трогаем.
6. Используя возможность редактирования файлов темы в админпанели или из PHP Expert Editor-а вносим добавочный код в ранее созданные файлы и смотрим на то, что у нас получилось.
7. Нравится? (Да – шаг 8, нет – шаг 3).
8. Все промежуточные “скриншоты” в HTML-е отправляем в корзину и на этом на сегодня успокаиваемся.

У меня получилось вот так: abc_theme.zip

Ничего сложного, как видите. Надеюсь, и у Вас получится.

А осталось нам – совсем немного: searchform.php и dropdowncats.php

searchform.php представляет из себя следующий код:

<form method=»get» id=»searchform» action=»<?php echo $_SERVER[‘PHP_SELF’]; ?>»>
<h3>Искать в блоге:</h3>
<input type=»text» value=»<?php echo wp_specialchars($s, 1); ?>» name=»s» id=»s» />
<input type=»submit» id=»searchsubmit» value=»Найти» />
</form>

dropdowncats.php выглядит так:

<form action=»<?php echo $PHP_SELF ?>» method=»get»>
<h3>Выбрать рубрику:</h3>
<?php dropdown_cats(); ?>
<input type=»submit» name=»submit» value=»Открыть» />
</form>

Теперь можете собрать все файлы вместе и проверить их работу. На внешний вид пока не обращайте внимания. Будет красивее )

Последний крупный файл темы –  search.php – поисковый код блога.

По структуре он похож на index.php, но наполнение несколько отличается:

Давайте вместе расковыряем файл comments-popup.php – отображение всплывающих комментариев нашего блога.

В более поздних версиях тем для WordPress этот файл используется редко, но почему бы просто не полюбопытствовать?

Сегодня мы с Вами разберемся с файлом sidebar.php – меню нашего блога.

Код примера будет содержать несколько блоков и выглядит немного устрашающе, но дорогу осилит идущий… Итак: