Web-стиль: Аниме
С аниме по жизни

Поиск подходящего оформления для вашего блога на WordPress на самом деле не вызывает затруднений. Огромная популярность этого движка способствует тому, что в интернете скопились просто завалы тем – от простеньких до навороченных, от бесплатных до дорогих, от стильных до откровенно безвкусных. Так что сложность представляет не поиск тем, а процесс выбора той, которая подошла бы именно Вашему блогу.

Но я предлагаю Вам другой путь – не искать перебором то, что наиболее соответствует Вашим потребностям и стилю, а создать свою тему – действительно уникальную и сформированную Вами от начала до конца, создать свое детище!

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

Какие инструменты будем использовать?

Редактор CSS и HTML, обязательно с поддержкой кодировки UTF-8 – WordPress нацелен на стандартизацию и унификацию, поэтому забудьте про win-1251.
Для Windows можно использовать Notepad++ или SciTE – достаточно простые и в тоже время хорошие редакторы под Windows с поддержкой UTF-8. С Linux гораздо проще – UTF-8 для него – родная кодировка и подойдет любой редактор. Под Gnome использовать, например, Geany. Может быть, Вы используете какие-либо другие редакторы или среды разработки – не принципиально. Нам в данном случае важен результат, эти инструменты приведены для примера.

Конечно, нам понадобится “манекен” – тестовый блог на WP. Не самая лучшая идея тестировать темы на рабочем блоге (а тестировать придется достаточно)) – поэтому под Windows я рекомендую развернуть Денвер, залить и установить там WordPress для экспериментов. Под Linux, опять, все гораздо проще – в зависимости от сборки-версии действия различны, но нужен apache и MySQL. Под Ubuntu достаточно поставить две галочки и сервер развернут. Если с этим этапом есть какие-то сложности, воспользуйтесь услугами платных или бесплатных хостеров. Либо все-таки проводите эксперименты на “рабочем” блоге, используя кнопку «Просмотреть тему» или пройдя по ссылке
http://ваш_сайт.ru/?preview=1&template=ваша_тема&stylesheet=ваша_тема&TB_iframe=true

Будем считать, что подготовительные мероприятия закончены – у Вас на руках нужное ПО, на сервере стоит подопытный WP и в голове созревший замысел темы. Вперед!

Прежде всего необходимо определиться с компоновкой элементов. И если заголовок (header) и подвал (footer) расположены традиционно вверху и внизу страницы, то область контента и меню (сайдбар-sidebar) представляют поле для творческих изысканий – либо сайдбар слева, контент справа, либо сайдбар справа, контент слева, либо контент посередине – между двумя сайдбарами, либо контент сразу под header`ом, а сайдбар ниже – над footer`ом. Короче, можно вдоволь поизвращаться над компоновкой, правда не забывая, что на ваше детище будут смотреть и другие, и им еще потребуется разобраться с управлением. Неоценимую помощь в процессе выбора Вам окажет вот этот ресурс – Генератор CSS+HTML. Все понятно и наглядно, на выходе получите два файла – index.html и таблицу стилей style.css. Я предполагаю, что кое-какие познания в HTML, CSS и PHP у Вас имеются, поскольку раскрытие основ этих вещей выходит за рамки данной статьи. И еще – разговор здесь пойдет не о табличной, а о блочной верстке.

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

• header.php – файл заголовка, шапки, мета-информации
• index.php – основной файл. Осуществляет основную сборку шаблона и вывод записей. Как правило, header, sidebar, footer подключается именно здесь. Оно и понятно – индексный файл в директории сайта отдается в браузер посетителя по дефолту.
• sidebar.php – файл виджетов, навигации и прочих вкусностей. Может быть не один на сайте.
• footer.php – подвал – место для всяких ссылок и копирайтов, закрывания открытых блоков.
• single.php – файл вывода одной записи
• comments.php – форма комментариев.
• function.php – файл дополнительного функционала темы. Там можно прописать еще один сайдбар
• style.css – таблица стилей CSS.

Это основные файлы, но в принципе могут быть и другие – archiv.php, search.php… Что они делают должно быть понятно из их названий.

Начинаем работу
Берем наш файл index.html, полученный на предыдущем этапе, переименовываем его в index.php (чтоб потом не забыть), и все, что в нем есть до строчки

<div id="middle"></div>

вырезаем и вставляем в новый файл с именем header.php. В index.php на освободившееся место пишем всего одну строчку:

< ?php get_header(); ?>

Этим нехитрым фокусом мы подключим в данном месте файл header.php. В блоке

<div id="container"></div>

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

<div class="sidebar"></div>

подключим файл sidebar.php, используя конструкцию

< ?php get_sidebar(); ?>

Кстати, если у Вас более одного сайдбара, то подключаются они так:

< ?php include(TEMPLATEPATH . "⁄имя_другого_sidebar_файла.php"); ?>

Для подключения футера помещаем

< ?php get_footer(); ?>

в блок

<div id="footer"></div>

Вообще-то соответствующие блоки (sidebar и footer ) можно вынести в подключаемые файлы, чтобы не загружать index.php и улучшить его читаемость, но это не принципиально.

Закончим с индексным файлом – помните, у нас остался важный блок не прописан? Редактируем блок container. Вставляем в него следующий кусок кода:

< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
	//выводим пост и соответствующую ему информацию здесь
 
< ?php endwhile; else: ?>
 
	//выводим что нибудь, если поста нету по этому адресу.
 
< ?php endif; ?>

Первая строчка – это начало цикла вывода постов. В переводе на общечеловеческий язык: “Если вдруг есть посты, то пока они есть, работать с ними, иначе … что-то другое”. В плане работы нас, конечно, интересует непосредственно вывод поста. Для это WP предоставляет функцию the_content(’Read more…’);. Строка “Read more…” будет выводиться, если содержимое поста обрезано тегом <!–-more-–>. Так что вместо нее можете написать все, что Вам подскажет Ваша буйная фантазия.

Но пост не ограничивается только содержанием, помимо этого очень важен заголовок поста – это Вам любой блоггер подтвердит. Заголовок поста будем выводить сразу ссылкой на полный пост – это удобно и делается так:

<a href="<?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?></a>

Таким образом заголовок и содержимое поста выводятся такой конструкцией:

<div class="post_title">
 
	<a href="<?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?></a>
 
</div> < !-– close post title -–>
 
<div class="post_content">
 
	< ?php the_content(’Читать все буквы…’); ?>
 
</div> < !–- close post content -–>

Дополнительные блоки классов post_title и post_content введены для форматирования-раскрашивания через таблицу стилей.
Однако пост не ограничивается заголовком и содержанием. Есть еще масса полезной, нужной и интересной информации, начиная от рубрики и заканчивая датой опубликования. Для вывода этой информации предусмотрены функции:

• <?php the_time(’F dS, Y’) ?> – Вывод даты опубликования поста (в данном случае в формате месяц , день-число с окончанием и четыре цифры года)
• <?php the_time(’h:i a’); ?> – Вывод времени поста (этот формат часы 0-12:минуты a/p)
• <?php the_category(’, ‘) ?> – Рубрики через запятую
• <?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?> – Вывод ссылки на комментарии к записи
• <?php edit_post_link(’Edit’,”,”); ?> – Ссылка на редактирование записи
• <?php the_author() ?> – Кто автор?
• <?php the_tags((’<b>Метки:</b>’) . ‘ ‘, ‘, ‘, ‘<br />’); ?> – Вывод тегов (меток) поста. Будет предварен словом “Метки”, разделяться запятыми и закончится переводом строки <br/>

Для вывода этой служебной информации создадим блок класса post_tag и в него поместим эти функции. Получится примерно так:

<div class="post_tag">
 
	< ?php echo «Рубрика: «; ?>< ?php the_category(’, ‘) ?> — < ?php the_author() ?>
	 в < ?php the_time() ?> < ?php edit_post_link(’Редактировать запись’); ?><br />
	< ?php the_tags((’<b>Метки:’) . ‘ ‘, ‘, ‘, ‘<br />’); ?>
	< ?php comments_popup_link(’Нет комментов’, ‘1 коммент’, ‘% комментов’); ?>
 
</div> < !–- close post tag -–>

И наш цикл преобретает такой вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
	< !–Работа с постом–>
 
	<div class="post_title">
 
		<a href="<?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?>
 
	</a></div> < !– close post title –>
 
	<div class="post_content'>
 
		< ?php the_content(’Read more…’); ?>
 
	</div> < !– close post content –>
 
	< !– Вывод мета-информации –>
 
	<div class="post_tag">
 
		< ?php echo «Опубликовано под рубрикой: «; ?>< ?php the_category(’,') ?> — 
		< ?php the_author() ?> в < ?php the_time() ?>
		< ?php edit_post_link(’Редактировать’); ?><br />
 
		< ?php the_tags((’<b>Метки:’) . ‘ ‘, ‘, ‘, ‘<br />’); ?>
		< ?php comments_popup_link(’Нет комментов’, ‘1 коммент’, ‘% комментов’); ?>
	</div> < !– close post tag –>
 
< ?php endwhile; else: ?>
 
	< !–…что-то другое.–>
 
	Извините, но Вы ищите то, чего здесь нет.
 
< ?php endif; ?>

А в районе «…что-то другое» мы вывели разочаровывающую надпись, повествующую о том, что постов здесь вовсе и нет. Конечно же, эта надпись будет появляться очень редко, ведь постов у нас будет много. Кстати, нужно добавить еще и навигационные ссылки – вдруг кто-нибудь захочет прочитать 11 постов, а мы на главную выводим только 10! Вставьте в файл сразу после <?php endif; ?> две строки, которые обеспечат навигацию по записям Вашего блога:

<div class="navigation">
 
	< ?php next_posts_link(’Старшие записи’); ?>
	< ?php previous_posts_link(’Младшие записи’); ?>
 
</div>

Ну вот, с индексным файлом мы закончили! А продолжение тута.

Напрямую:

• Часть 2
• Часть 3
• Часть 4
• Часть 5
• Часть 6