Подняться наверх

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

You are here

Primary tabs

  • Просмотр(active tab)
  • Обсуждение

Итак, для начала вот скриншот и конечный «эталон» того, что должно получиться в итоге. Читаем перечень возможностей. За основу возьмём эту вёрстку от 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, - функции темы. Всё, что объявлено в нём будет доступно из любого другого файла шаблона.

Опрос

Что хотим видеть

Навигация

  • Drupal (149)
    • API v. 7 (49)
      • Таблицы БД (3)
      • Функции (48)
    • Заметки (90)
    • Модули (9)
  • WordPress (147)
    • Статьи (99)
    • Шаблоны (21)
    • Плагины (28)
  • MODx (11)
    • MODx Evolution (5)
    • MODx Revolution (5)
  • Полезности (80)
    • HTML/CSS (10)
    • JQuery примеры (21)
    • Apache (8)
    • MySQL (4)
    • PHP (5)
    • Софт для веба (13)
  • Новости проекта (7)

Спонсоры


Использовано памяти на 4.355mb