Скин для WP своими руками (Вводная часть)

Скин (от англ. Skin – кожа) сленговое обозначение внешнего оформления сайта. Применительно к CMS WordPress – сменная визуальная тема для блога.

Долго копался в поисковиках, в надежде отрыть что-то по этой теме, но находил только готовые скины. Поэтому решил описать этапы изготовления своего скина… вдруг кому пригодится?

С момента написания этих строк прошло более двух лет, поэтому было принято решение параллельно переписать весь цикл статей с дополнениями и изменениями, а что Вам больше по душе – решайте сами…
Перейти к новому циклу…

Верстать мы будем “Г-образную” тему (Г – не в смысле … плохую, а в смысле: меню – слева, текст – справа, сверху – заголовок блога).

Итак, из чего состоит скин WP?

  1. index.php – сердце сборки. Сюда подгружаются остальные файлы.
  2. header.php – “шапка” сайта. Его заголовок и описание.
  3. footer.php – “пятка” или “подвал”сайта. Здесь, как правило, размещают копирайты, счетчики, минибаннеры и прочую мишуру. Также сюда неплохо было бы разместить навигатор по страницам.sidebar.php – боковая панель. Меню, рубрики, ссылки, календарь, форма авторизированного входа, каталог страниц… ничего не пропустил? Всё – сюда.
  4. search.php – поисковая страница блога. То, что искали на Вашем сайте отобразится именно на ней.
  5. comments.php – форма отображения комментариев к Вашим статьям.

Собственно, по основному составу – всё. Теперь, вкратце, о дополнительном. А именно:

  • 404.php – страница с Вашими вежливыми извинениями по поводу ошибки при поиске на блоге.
  • searchform.php – внешний кусочек кода поисковой формы, который можно совместить с sidebar.php
  • comments-popup.php – внешний кусочек кода, для добавления комментариев “на лету” (чаще всего используется вместе с JavaScript-ом) после прочтения статьи.
  • style.css – мы, ведь, с Вами люди грамотные и все стили текстового оформления запишем здесь, верно?
  • screenshot.png – картинка, которую будет видно в админпанели под названием темы, созданной Вами!

Также создадим папку images, куда натолкаем все картинки нашей темы. Их будет немного, но они очень украсят наш сайт… (это я сам себя уговариваю).

Папку со всем этим добром мы назовем, как нам понравится, к примеру, abc_theme, а на блоге она будет расположена по адресу:

корневой_каталог_Вашего_блога/wp-content/theme/*.*

Ну, и, чтобы закончить вводную, пара нюансов: во-первых, при написании кода, следите за кодировкой в редакторе (если на блоге – utf-8, не пишите русского текста в win-1251 – читаться будет “зюковицей”); во-вторых, рекомендую Вам пользоваться для кодинга не блокнотом(ака Notepad), а программой PHP Expert Editor, ввиду ее хороших синтаксических подсказок и фриварной (для русскоязычного нета) регистрацией.

Продолжение – следует…

Читайте в этой серии: