Мы помогаем нашим клиентам не просто сделать сайт, а стать счастливее.
Ваше счастье находится всего в одном шаге: напишите нам.

В прошлой статье мы рассмотрели тему Arctica, которая станет основой создаваемой нами темы. Но сделаем нашу тему дочерней темой темы Tundra, которая является дочерней темой к теме Arctica. Это позволит нам расширить функционал нашей будущей темы, не написав ни одной строчки кода.

Рассмотрим этот функционал подробнее:

  • Sooper FontKit – добавляет интеграцию различных пользовательских и Google fonts шрифтов с темой сайта.
  • Sooper SlideshowKit – даёт возможность создания адаптивных слайд шоу с использованием jQuery.
  • DropdownKit – позволяет создавать анимированные выпадающие меню с использованием SooperFish.
  • Sooper BackgroundKit - добавляет возможность использования собственных изображений или CSS3-градиентов в качестве фона сайта.
  • Добавлена интеграция с модулем Color.

Если рассматривать строение темы, то в нём легко разобраться, если Вы читали первую часть цикла статей про тему Arctica. Тема разделена на основную и дочернюю тему. В основной теме в корне расположены папки с фонами для Sooper BackgroundKit, шрифтами для Sooper FontKit, а так же папка с JavaScript файлом для Sooper SlideshowKit. В папке features расположены папки с файлами, реализующими указанный выше дополнительный функционал темы Tundra. 

Установим тему Tundra (внимание: не Tundra example subtheme, а (в моём случае) саму Tundra 7.x-2.0) и перейдём на страницу её настройки. Страница настройки темы значительно расширилась. Описание вкладок настройки темы:

  • Color module - содержит интеграцию с модулем Color ядра Drupal, присутствует только в Tundra example subtheme. У меня не заработало, возможно, в следующих релизах темы это поправят.
  • Dropdown Menus - содержит интеграцию с плагином jQuery: SooperFish позволяющим превратить любое меню в выпадающее (позволяет отображать подпункты меню при наведении мышки на родительский пункт без перегрузки страницы). Для создания выпадающего меню, включаем модуль Menu и создаём на странице <url сайта>/admin/structure/menu новое меню, после чего добавляем в него пункты и подпункты. После чего блок меню размещаем в желаемом регионе темы сайта на странице: <url сайта>/admin/structure/block, для примера я не стал создавать своё меню, а воспользовался стандартным меню: Management переместив его блок в регион: content-top. Последний шаг: на данной вкладке настройке темы нужно установить галочку в чекбоксе Enable sooperfish dropdowns и в поле Element for sooperFish invocation прописать путь к блоку меню в структуре нашей HTML страницы (в моём случае, я воспользовавшись плагином firefox к браузеру firebug узнал, что внутри элемента с классом block-system-management расположен список ul с классом menu содержащий пункты меню, поэтому в поле Element for sooperFish invocation я вписал: #block-system-management > ul.menu).
  • Sliders - содержит интеграцию с jQ Cycle slideshows. Для создания слайд-шоу на данной вкладке настройке темы нужно установить галочку в чекбоксе Enable jQuery cycle и в поле Element for cycle invocation прописать путь к списку изображений в структуре нашей HTML страницы (в моём случае: ul.test-slider). После этого создадим новую статью (ноду) в которую ставим список с изображениями и указанным в поле Element for cycle invocation классом. Например:

    <ul class="test-slider">
      <li><img src="/photo/img-1.jpg"></li>
      <li><img src="/photo/img-2.jpg"></li>
      <li><img src="/photo/img-3.jpg"></li>
    </ul>

    Так же имеется интеграция с jQ Flexslider slideshows, который немного отличается от jQ Cycle slideshows. Активируется он аналогично, только в поле Element for cycle invocation я прописал: .flexslider и код списка изображений выглядит немного по-другому:

    <div class="flexslider">
      <ul>
        <li><img src="/photo/img-1.jpg"></li>
        <li><img src="/photo/img-2.jpg"></li>
        <li><img src="/photo/img-3.jpg"></li>
      </ul>
    </div>

  • Fonts - на данной вкладке можно включить нестандартные шрифты (не поддерживаемые браузерами) для определённых элементов (как для конкретных элементов, так и для контейнеров типа: div и т.п.) вашего сайта. Могут быть использованы как бесплатные шрифты, поставляемые вместе с темой, так и шрифты Google Web Fonts или шрифты загруженные лично вами. Для добавления своего шрифта, загружаем файл *.ttf шрифта на сайт www.font2web.com и скачиваем архив шрифта в разных форматах, после этого в папке с загруженными темами сайта переходим в подпапку /tundra/tundra/features/sooper-fontkit/fonts и создаём свою папку по имени шрифта (например: myfont (без пробелов в имени)).  В данную папку копируем из скачанного архива файлы: myfont.eot, myfont.woff, myfont.ttf и myfont.svg. После чего в данной папке создаём файл myfont.css следующего содержания:

    @font-face {
      font-family: 'myfont';
      src: url('myfont.eot');
      src: url('myfont.eot?#iefix') format('embedded-opentype'),  
           url('myfont.woff') format('woff'),
           url('myfont.ttf') format('truetype'),
           url('myfont.svg#myfont') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    После данных манипуляций, Ваш шрифт станет доступен на данной вкладке настройке темы сайта.
  • Site Background - позволяет задавать фон сайта, который может быть как изображением, так и градиентным переходом из одного цвета в другой. Для добавления своего изображения для фона сайта, переходим в папку с загруженными темами сайта и из неё переходим в подпапку /tundra/tundra/features/sooper-backgroundkit/images куда и нужно загрузить ваше изображение. Для того, что бы фон сайта появился после его включения, нужно очистить  кэш сайта на странице: <url сайта>/admin/config/development/performance.

Нам осталось рассмотреть ещё несколько дополнительных модулей необходимых при создании собственной темы, перед началом её реализации. Но, уже сейчас не написав ни одной строчки кода, мы получили в нашей будущей теме дополнительный функционал, который поможет очень быстро и просто придать разрабатываемой теме индивидуальный вид, который настраивается в пару кликов мыши (фон, шрифты, галерея, выпадающее меню).