Скин для 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/themes/abc_theme

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

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