Главная » WordPress » Статьи Wordpress » WordPress: создание темы со слайд-шоу на JQuery в шапке и несколькими блоками под виджеты. Предисловие. CSS.
Распечатать статью

WordPress: создание темы со слайд-шоу на JQuery в шапке и несколькими блоками под виджеты. Предисловие. CSS.

Итак, для начала вот скриншот и конечный «эталон» того, что должно получиться в итоге. Читаем перечень возможностей. За основу возьмём эту вёрстку от DreamTemplate. Скачиваем.

В отличие от других «уроков» в Сети на тему создание шаблона для WordPress, мы не ограничимся изготовлением типичной двухколоночной структуры с одним сайдбаром под виджеты, простой шапкой в виде статичной картинки и прочими «красивостями». Кое-где есть горе-примеры вообще и без этого минимума.

А теперь конкретно. Абсолютно любая тема начинается с файла стилей style.css. Потому создаём в <папка с WP>/wp-content/themes папку для нашего шаблона, — brainmix. В него помещаем CSS из HTML-заготовки: coin-slider.css и style.css. В style.css прописываем информацию об авторе:

/*
    Theme Name: Brainmix
    Theme URI: http://www.sooource.net/brainmix
    Version: 1.0.0
    Description: Бизнес-шаблон для WordPress со слайд-шоу в шапке.
    Author: Alexei91
    Author URI: http://www.sooource.net
    Tags: widgets, jquery, blavatar, two columns
*/
  • Theme Name, — имя темы.
  • Theme URI, — веб-страничка темы.
  • Version, — версия. Необязательно.
  • Description, — краткое описание.
  • Author URI, — сайт автора.
  • Tags, — метки (необязательно). Заполнять только, если вы собрались добавить свой шаблон на WordPress.org.

Файл стилей для JQuery-слайдера (coin-slider.css) кладём там же, подключаем таким образом:

@import url("coin-slider.css");

Далее во всё тех же style.css и coin-slider.css переписываем пути до картинок с url(../images/картинка на url(images/картинка. Это необязательно, но мне так удобней. Папку images перемещаем в папку с заготовкой, — brainmix.

Все файлы должны быть в кодировке UTF-8. Если используете Notepad++, то UTF-8 без BOM.

Логика работы «шаблонизатора» при формировании страниц-записей. WordPress, анатомия темы(PHP-файлы). Скриншот «кликабельный».

WordPress: создание темы, анатомия шаблона

Остаётся только добавить, что index.php должен присутствовать обязательно. Видите, куда ведут все стрелки?

Чего ещё нет на скрине? Comments.php , — форма комментариев, вывод комментариев. Functions.php, — функции темы. Всё, что объявлено в нём будет доступно из любого другого файла шаблона.

Источник:  sooource.net

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи