Наконец-то на моём блоге я поменял дизайн! Наконец-то это не дефолтовая тема, а нечто скромное, но со вкусом и со своим лицом!

Должен признаться что дизайнер из меня никакой и креатив был любезно разработан KitsuneNoir. Мне осталось превратить креатив в шаблон, и из этого процесса и родился своеобразный мануал.

Итак этот пост, ни много ни мало, о том, как сделать шаблон в Wordpress.
Предположим у вас уже есть разработанный дизайн, подобраны стили, расставлены виджеты. Для простоты предположим, что у вас всё уже свёрстано в статичном HTML. Предполагается знание основ HTML и PHP

1. Общая компановка

Первое что нужно сделать – это выделить из дизайна основные блоки. В шаблонах Wordpress наиболее распространёнными являются блоки header(шапка), footer(подвал) и sidebar(боковая панель). Ну и естественно главная составная часть – content (содержимое).

header

Далее нужно вставить кусок кода, который соответствует шапке в файл header.php. Кроме собственно дизайна, бантиков и рюшечек не забудьте ссылки на rss, наподобие этого:

<link rel="alternate" type="application/rss+xml"  title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="alternate" type="text/xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Вообще в заголовке нужно очень много чего не забыть. Например название блога, ключевые слова, указать кодировка страницы. Я настоятельно советую заглянуть для сверки на header.php, который имеется в теме default.

Более на этом этапе сложностей не предвидится.

footer

Здесь ещё проще! Просто вставьте в footer.php всё, что вы хотели бы видеть внизу страницы. Обычно это просто полоска с копирайтами и прочим. На время разработки настойчиво предлагаю добавить туда код для тестирования нагрузки от шаблона.

sidebar
Всё что относится к боковой панели пишется в файле шаблона sidebar.php. Вот тут творим, всё что пожелаем

Тут главное сначала решить – используем ли мы динамически настраиваемый набор виджетов или нет. Если используем, то вставьте в sidebar.php следующий код:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

Если не используете – то можете писать всё что пожелаете. Можно, например, использовать типовые функции-заготовки WP:

• get_calendar() – отобразить календарь
• wp_list_categories() – отобразить список рубрик
• wp_get_archives() – отобразить архив
• get_search_form() – отобразить форму поиска
• wp_list_pages() – отобразить список страниц

Более полный список можно найти в документации

Пример вставки архива:

<li><h2>Архивы</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

2. Главное содержимое

Теперь самое время создать index.php. Скелет этого файла предлагаю сделать наподобие этого:

<?php get_header(); ?>
<div id="content" class="narrowcolumn">
БЛА-БЛА-БЛА
</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Здесь get_header, get_sidebar и get_footer подставят в текст страницы файлы, которые мы рассматривали выше. Другими словами если всё сделано правильно, если все теги закрыты корректно то уже сейчас мы можем видеть результат.

Однако думаю вряд ли кто будет делать блог с целью написать на нём только БЛА-БЛА-БЛА ))

Итак переходим к собственно содержимому. Оно может быть нескольких типов:

• это может быть пост
• может быть архив
• может быть список постов в категории или теге
• может быть страница автора
• может быть страница результата поиска
• и даже страница ошибки 404.

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

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
<?php the_date('','<h2>','</h2>'); ?>
 
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Рубрика:"); ?> <?php the_category(',') ?> &#8212; <?php the_tags(__('Теги: '), ', ', ' &#8212; '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
<div class="storycontent">
<?php the_content(__('читать далее...')); ?>
</div>
 
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('комментов 0'), __('коммент 1'), __('комментов %')); ?>
</div>
 
</div>
 
<?php comments_template(); // Get wp-comments.php template ?>
 
<?php endwhile; else: ?>
<p><?php _e('Извините, не найдено постов по вашему критерию.'); ?></p>
<?php endif; ?>
 
<?php posts_nav_link(' &#8212; ', __('&laquo;Более новые посты'), __('Более старые посты &raquo;')); ?>

Это код на все случаи жизни. Один и тот же код будет отрабатывать и список статей в рубрике, в архиве, статей с тегом и список N-последних статей для начальной страницы. Если запрошен пост или страница – то она будет выдана с соответствующими комментариями, а если запрошен несуществующий пост или просто даже несуществующий URL, будет напечатано соответствующее уведомление.

Если потребуется немного разнообразить этот код – можно вставлять соответсвующие инъекции используя Conditional Tags. Там довольно много функций проверки статуса страницы:

• is_404
• is_admin
• is_archive
• is_author
• is_category
• ….

Вот классический пример вставки которую можно выполнить в index.php (взято из темы default):

<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="pagetitle">Категория: <?php single_cat_title(); ?></h2>
<p> <?php echo category_description($category); ?> </p>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2 class="pagetitle">Посты с тегом &#8216;<?php single_tag_title(); ?>&#8217;</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="pagetitle">Архив за <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="pagetitle">Архив за <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="pagetitle">Архив за <?php the_time('Y'); ?></h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="pagetitle">Посты автора</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2 class="pagetitle">Архив блога</h2>
<?php } ?>

Таким образом можно сделать базовую страницу index.php и незначительно варьировать оформление в зависимости от контекста. Если изменения слишком серьёзны, можно использовать другой способ.

Многие из типов страниц можно задать отдельным шаблоном. Например для задания шаблона страницы об авторах – можно задать author.php, для архива постов – archive.php. Все такие примеры шаблонов можно посмотреть здесь. То есть можно просто взять наш работающий шаблон index.php, скопировать его в author.php и добавить туда то что не хватает на авторской странице.

На этом пожалуй закруглюсь. Желаю удачи в разработке.

3. Вместо заключения

Всё вышеописанное будет гораздо легче делать, если иметь перед глазами уже работающую тему, например default.

Трёхколоночный дизайн я не рассматриваю, т.к. пока всерьёз с ним не сталкивался.

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

Кстати обнаружил, что в MSIE 6.0 мой блог выглядит неправильно. Задумался. С одной стороны этот браузер использует около 20% аудитории интернета, с другой стороны их становится меньше и возможно они вообще исчезнут к середине года. Кроме того люди интересующиеся CMS наверняка не пользуются этим устаревшим браузером. Поэтому я решил не ломать дизайн, а подождать реакции читателей.

См. также

• Варьируем шапку страницы в шаблонах для Wordpress

Посты по теме:

1. Варьируем шапку страницы в шаблонах для Wordpress
2. Комментарии к страницам в Wordpress
3. Заготовки тем Wordpress
4. WordPress <= 2.8.3 Remote admin reset password
5. Кросспостинг с Wordpress на blogspot

Комментирование закрыто, но вы можете сделать trackback с вашего блога.