- Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB - http://cmsart.ru -

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

Posted By Archi On 31.05.2012 @ 5:28 пп In Статьи Wordpress | No Comments

Итак, для начала вот скриншот [1] и конечный «эталон [2]» того, что должно получиться в итоге. Читаем перечень возможностей [3]. За основу возьмём эту [4] вёрстку от 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: создание темы, анатомия шаблона [5]

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

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

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


Article printed from Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB: http://cmsart.ru

URL to article: http://cmsart.ru/wordpress/wordpress-articles/wordpress-sozdanie-temyi-so-slayd-shou-na-jquery-v-shapk

URLs in this post:

[1] скриншот: http://cmsart.ru/goto/http://www.sooource.net/sites/default/files/files/images/BrainmixB.jpg

[2] эталон: http://cmsart.ru/goto/http://sooource.net/cmswordpress/?wptheme=Brainmix

[3] возможностей: http://cmsart.ru/goto/http://www.sooource.net/brainmix

[4] эту: http://cmsart.ru/goto/http://www.sooource.net/sites/default/files/files/images/brainmix.zip

[5] Image: http://cmsart.ru/goto/http://www.sooource.net/sites/default/files/files/images/WordPress_Template_Hierarchy.png

[6] sooource.net: http://cmsart.ru/?goto=http%3A%2F%2Fwww.sooource.net

Copyright © 2012 Поддержка CMS | Документация, статьи по Joomla, Drupal, phpBB. All rights reserved.