Разработка шаблона в WordPress

Вечный и бессмертный WordPress

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

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

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


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

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

header

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






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

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

footer

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

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

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


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

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

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

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

  • Архивы

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

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

    
    
    БЛА-БЛА-БЛА

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

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

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

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

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

    
    
    ',''); ?>
    
    
    id="post-">

    @

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

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

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

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

    
    

    Категория:

    Посты с тегом ‘

    Архив за

    Архив за

    Архив за

    Посты автора

    Архив блога

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

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

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

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

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

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

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

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

    См. также

    Разработка шаблона в WordPress: 7 комментариев

    1. Dandr

      Так, что-то ты прям даже заинтересовал меня… А не переделать ли мне тему? К примеру, уйти от виджетов. Они, поди, более ресурсоёмкие, нежели простой вызов?

    2. altesack Автор записи

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

      Хотя однозначно стоит поиграть этим )

    3. Dandr

      Твою мать… Да что ж это каменты режет?
      ЗЫ Таки добавил бы пару слов про style.css

    4. Dandr

      В разделе «главное содержимое» закрой тэг div в первом же куске кода. Я два дня искал, где баг… :)

    5. altesack Автор записи

      Тэкс… Что у нас тут?
      Тег закрыл, дерево посадил, жену построил )

      Насчёт параметров к функциям — дык соль/сахар по вкусу на любителя.
      Важно раскрыть суть ;)

    Комментарии запрещены.