Как самому создать тему для WordPress с нуля.

Июль 16 20094 комментария

Опубликовано под рубрикой:Блоггинг

Если нужно что-то сделать и сделать хорошо - сделай это сам!
Расхожее выражение

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

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

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

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

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

Конечно, нам понадобится “манекен” - тестовый бложок на WP. Не самая лучшая идея тестировать темы на рабочем блоге (а потестировать придется достаточно)) - поэтому под Windows я рекомендую развернуть , залить и установить там WordPress для экспериментов. Под Linux все гораздо проще - в зависимости от сборки-версии действия различны, но нужен apache и MySQL. Под моей Ubuntu было достаточно поставить две галочки и сервер развернут. Если с этим этапом есть какие-то сложности, воспользуйтесь услугами платных или бесплатных хостеров. Либо все-таки проводите эксперименты на “боевом” блоге, игнорируя нервные возгласы Ваших читателей.

Будем считать, что подготовительные мероприятия закончены - у Вас на руках нужное ПО, на сервере стоит подопытный 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"> вырезаем и вставляем в новый файл с именем header.php. В index.php на освободившееся место пишем всего одну строчку: <?php get_header(); ?>. Этим нехитрым фокусом мы подключим в данном месте файл header.php. В блоке <div id="container"> мы будем выводить наши посты, тут пока ничего писать не будем, а в блок <div class="sidebar_sr"> подключим файл sidebar.php, используя конструкцию <?php get_sidebar(); ?>. Кстати, если у Вас более одного сайдбара, то подключаются они так:

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

Для подключения футера помещаем <?php get_footer(); ?> в блок <div id="footer">. Вообще-то соответствующие блоки (sidebar_sr и 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>Метки:</b>') . ' ', ', ', '<br />'); ?><?php comments_popup_link('Нет комментов', '1 коммент', '% комментов'); ?>
</div> <!-- close post tag -->

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


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!--Работа с постом-->
<div class="post_title">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?>
</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>Метки:</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>

Так что с индексным файлом мы закончили! Продолжение следует…

Гвозди в тему:




4 комментария на “Как самому создать тему для WordPress с нуля.”

  1. пишет:

    самому помоему очень трудно будет создать новичку :(

  2. O`Noble пишет:

    Не очень трудно, если есть желание и знания CSS. Я для того и публикую этот туториал, чтоб помочь желающим.

    Но если самому лень создавать, то можно поискать что-нибудь .

    А можно взять наиболее подходящую к Вашему идеалу тему и “подточить напильником”, в чем эта серия статей тоже должна помочь.

  3. пишет:

    [...] статьи находится здесь. Если нужно что-то сделать и сделать хорошо - сделай [...]

  4. пишет:

    Кароч, я думаю что легче скачать и переделать под себя тему спомощью Dreamweaver CS4+, Статья в целом норм. А можно изменить дизайн спощью фотошопа, а редактировать код можно прям в админке ВордПресс)