Разное

Как создать шаблон на базе Blank template и Twitter Bootstrap

16.10.2012 Joomla

Содержание:

Введение
Превью
Подготовительный этап
Blank template
Twitter Bootstrap
Меню и поиск
Модуль Навигатор сайта
Футер
Тема
Заключение

Введение

Что нам потребуется для выполнения урока:

Joomla 2.5
Blank Template 1.1.13 http://itr.im/2f0
Twitter Bootstrap https://github.com/twbs/bootstrap
jQuery http://jquery.com
Bootstrap тема Amelia https://bootswatch.com/

Дополнительные «рюшечки»:

Сниппеты для Blank Template https://gist.github.com/Bloggerschmidt/2360208

Примечание: этот урок написан на базе Blank Template 1.1.13. В версии 1.2 Twitter Bootstrap уже внедрен, и шаги по интеграции фреймворка в Blank template можно пропустить.

Превью

В данном уроке мы расскажем, как на базе Blank Template ("пустой шаблон") и при помощи Twitter Bootstrap можно создать дизайн с адаптивной версткой на Joomla (версия 2.5). В итоге мы получим следующий результат:

В качестве примера можете посмотреть тестовый полигон: (ссылка битая). Я буду признателен, если вы поддержите мою разработку идеями и советами. Если данный урок найдете полезным, то можете также приобрести электронную книгу о Blank Template. Итак, приготовьте чашечку горячего чая или кофе, и можно не откладывая погрузиться в процесс настройки шаблона и интеграции Twitter Bootstrap в Joomla.

Подготовительный этап

Прежде всего нужно скачать Blank template. После этого, распакуйте архив и переименуйте папку в jab12. Далее, открываем на редактирование файл templateDetails.xml и заполняем всю информацию. Переименовываем языковые файлы (en-GB.tpl_templatename.ini на en-GB.tpl_jab12.ini) и имена языковых файлов в папке languages (файлы желательно локализовать на русский язык - прим.пер). Также по желанию можно заменить изображения превью шаблона template_preview.png, template_thumbnail.png и favicon.ico. Базовые изменения внесены. Теперь запакуйте папку шаблона (формат архива .zip) и установите шаблон через Менеджер расширений в панели управления Joomla. После того, как шаблон успешно установлен, идите в Менеджер шаблонов и назначьте наш шаблон по умолчанию. Теперь, если посмотреть на сайт с фронтальной части, мы увидим пустую, белую страницу - это вполне нормальная практика на этапе разработки.

Blank template

Для того, чтобы в полной мере оценить привлекательность и простоту дизайна на базе Blank Template, откройте следующие файлы: template.css, tablet.css и phone.css в /templates/jab12/css (jab12 - папка шаблона). Скопируйте целую строку с определениями body в template.css (body {...}) и вставьте её в в tablet.css и в phone.css. Измените значение background-color в tablet.css на red и в phone.css на green (как известно, для определения зеленого и красного цветов можно использовать соответствующие слова английского языка вместо вместо использования шестнадцатеричных кодов для определения цвета). После того, как изменения в файлах будут сохранены, обновите фронтальную страницу сайта и эффект будет налицо: фоновый цвет изменится с белого на красный и на зелёный при изменении размера окна браузера от большого к малому. Кроме того, Blank template также поддерживает различные расширения экранов гаджетов.

А теперь, если присмотреться к файлу template.css, можно обнаружить раздел, названный как 'floats'. Здесь можно найти вспомогательные селекторы для вёрстки. Если вы помещаете контент-область и сайдбар в boxmodel (коробочная модель), то можно использовать класс float-left для размещения их бок о бок и поместить их в тег <div> класса group для корректной очистки.


<div class="group">
  <div id="content" class="float-left">
    <div class="incontent">
    
    </div>
  </div>
  <div id="sidebar" class="float-left">
    <div class="insidebar">
    
    </div>
  </div>
</div>

Пример работает во всех браузерах. Разместите этот код внутри файла index.php шаблона (jab12) после <div class="inmain">.

Содержимое у нас будет загружаться через Joomla API. В теге <div> с классом incontent выводятся не только системные сообщения, но также и содержимое всего компонента (например, материалы):


<jdoc:include type="message" />
<jdoc:include type="component" />

В теге <div> с классом insidebar вы вставляете позицию модуля под названием 'sidebar':

<jdoc:include type="modules" name="sidebar" style="xhtml" />

Позиция модуля также должна быть объявлена в файле templateDetails.xml. Открываем файл и вставляем:

<position>sidebar</position>

между <positions> и </positions>. После обновления страницы во фронтэнде, мы увидим заголовок сайта в виде слова 'Home', заглавие вашего сайта. Здорово! Но, пожалуй, неплохо бы увидеть более релевантную информацию. В панели администратора проследуйте в Материалы > Менеджер материалов > Добавить новый материал и напишите заголовок 'Blank Template Workshop' и текст статьи вроде такого:

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Пометим материал статусом 'избранные' и сохраним его. Поскольку это все равно тестовая статья, то можно вставить совершенно любой текст образца Lorem Ipsum ("рыба" материала) или как в примере выше. На этот материал в дальнейшем будут ссылаться пункты меню.

Не нравится как выглядят иконки печати и отправить другу во фронтэнде, а также элементы навигации "пред.", "след." и т.д.? Их можно скрыть в настройках менеджера материалов (закладка "материалы"). Выключите параметры ''Навигация', 'Показывать иконки', 'Иконка печати', 'Иконка электронной почты' и 'Кол-во просмотров'.

Теперь перейдем в Расширения > Менеджер модулей и откроем модуль 'Login Form' ('Вход на сайт'). Ему по умолчанию назначена позиция position-7. Задайте позициям уникальные и ясные названия (sidebar, menu или header - подходящие примеры, иллюстрирующие данный подход). Опубликуйте модуль авторизации в позиции sidebar. Сохранив страничку и обновив фронтальную часть сайта, мы увидим, что область контента и модуль авторизации не отображаются бок о бок, поскольку у блоков не задана ширина. Её нужно задать в файле template.css:


#content {width:720px;}
#sidebar {width:260px;}

после #main {} выставляем селектору #overall параметр width на 980px. Обновляем фронт и видим, что теперь блоки шаблона отображаются корректно.

Twitter Bootstrap

Как уже говорилось ранее, для создания прототипа сайта легко подойдет Twitter Bootstrap, интегрированный в Blank Template. Прототипы позволяют получить преимущество в определении функции сайта в браузере. После чего можно начать работу над дизайном и изменением внешнего вида шаблона.

Идем на https://github.com/twbs/bootstrap и скачиваем последнюю версию фреймворка Bootstrap, затем распаковываем его. Копируем два файла bootstrap.css и bootstrap-responsive.css в css папку шаблона (это, по-прежнему, jab12). Для внедрения обоих файлов открываем файл template.css.php и добавляем следующую строку:

require('bootstrap.css');

перед всеми css файлами и после всего

require('bootstrap-responsive.css');

Если вам не нужна очистка неиспольуемых стилей, закомментируйте вызов строки (#):

#require('reset.css');

Сохраняем файл, обновляем страничку во фронте и видим, что у нас получилось добиться желаемого эффекта. Ура! Теперь можно использовать привлекательную 12-ти колоночную сетку фреймворка Bootstrap. Открываем index.php и указываем второй класс перед inmain под названием

 container

Нужно удостовериться, что между двумя классами есть пустое пространство. Заменяем класс group на

row

и класс float-left в content на

span8

а также класс float-left в sidebar на

span4

После того, как это действие будет совершено, необходимо удалить все определения в файлах template.css, tablet.css и phone.css. Не бойтесь, если эти файлы окажутся пустыми. Перегрузите страничку фронтэнда и уменьшите размер окна браузера (нажмите и потяните правый нижний угол) и увидите что адаптивный дизайн уже работает.

Для подготовки index.php к использованию Navbar фреймворка Twitter Bootstrap, дополнительно пропишем класс

container

перед inheader (с пробелом между двумя классами).

Navbar, адаптивная вариация

Добавляем следующие строки внутри тега <div> с класссом inheader:


<div class="row">
  <div class="navbar span12">
    <div class="navbar-inner">
      <div class="container">
       
        <!-- .btn-navbar is used to toogle  collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
         
        <!-- Be sure to leave the brand out there if you want it shown -->
        <a class="brand" href="#">Project name</a>
         
        <!-- Everything you want hidden at 940px or less, place within here -->
        <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
        </div>
       
      </div>
    </div>
  </div>
</div>

Эти строки просто скопированы из Twitter Bootstrap документации за исключением первого элемента с классом row и дополнительным классом span12 второго элемента. Все остальное осталось неизменным. Однако мы можем внести нужные правки прямо сейчас.

Заменим два слова 'Project name' на

<?php echo $app->getCfg('sitename'); ?>

Эта строка приведет к отображению названия сайта, заданного в общих настройках Joomla. Чтобы название было в виде ссылки на главную страницу, добавим

<?php echo $this->baseurl; ?>/

Обратите внимание на наличие слэша! Он должен обязательно присутствовать на конце строки.

Далее удаляем комментарий:

<!-- .nav, .navbar-search, .navbar-form, etc -->

и заменяем его на


<div class="pull-left visible-desktop">
  <jdoc:include type="modules" name="menu" />
</div>
<div class="insearch pull-right visible-desktop">
  <jdoc:include type="modules" name="search" />
</div>
<div class="hidden-desktop">
  <jdoc:include type="modules" name="menu" />
  <jdoc:include type="modules" name="search" />
</div>

Итак, что мы сделали? Мы только что продублировали модули, один для меню и один для поиска. Во-первых, оба модуля разделены в div теги и отображаются только на компьютерах (не на гаджетах). Название класса visible-desktop говорит само за себя (более подробную информацию можно найти в Twitter Bootstrap документации). Во-вторых, оба модуля объединены в один div тег и скрыты для компьютеров, что означает, что данные модули будут отображаться только на tablets и смартфонах. В этом случае не забудьте задать позиции в templateDetails.xml также как это уже сделали для sidebar. Документация Twitter Bootstrap гласит: отзывчивому navbar необходим collapse plugin и Bootstrap CSS файл с отзывчивой версткой.

Теперь опубликуем меню в нужной позиции. Идём в Расширения > Менеджер модулей > Main Menu и назначаем модулю позицию menu. Если необходимо создать выпадающее меню, в настройках модуля в параметре 'Показывать подпункты меню' ставим "да", а также в дополнительных параметрах в параметре 'Суффикс класса меню' пишем nav (не забывая поставить перед суффиксом пробел!). Сохраняем. Теперь осталось добавить небольшой javascript код. Прежде всего, нужно скачать следующие файлы:

jquery-1.7.2.min.js http://jquery.com/download/
bootstrap.min.js из пакета boostrap

Файл jquery-1.7.2.min.js сохраняем в папку js вашего шаблона, туда же копируем файл bootstrap.min.js. Открываем файл template.js.php и пишем:


require('jquery-1.7.2.min.js');
require('bootstrap.min.js');

Этот код позволит подключить вышеназванные файлы. Сохраняем изменения и откроем файл index.php нашего шаблона. В самом конце шаблона (перед закрывающим тегом </body>) вставляем:


<script type="text/javascript">
  (function($){   
    $(document).ready(function(){
      // dropdown
      $('.item-102').addClass('dropdown');
      $('.item-102 > a').addClass('dropdown-toggle');
      $('.item-102 > a').attr('data-toggle', 'dropdown');
      $('.item-102 > a').append('<b class="caret"></b>');
      $('.item-102 > ul').addClass('dropdown-menu');
      // divider 
      $('<li class="divider"></li>').insertAfter('.item-105');
    });
  })(jQuery);
</script>

Данный Jquery код создаст изящное выпадающее меню. Удостоверьтесь, что класс и ID родительского пункта меню правильно определены. Для этого нужно свериться и посмотреть в админ.панели, какой ID у родительского пункта меню, при наведении курсором на который будет появляться выпадающее меню с дочерними пунктами. Вторая запись должна быть отделена от третьей, поэтому нужно самостоятельно поставить разделитель. Обновите фронтальную часть сайта и посмотрите как работает меню.

Примечание: после проведенных манипуляций с кодом, пункт меню 'About' перестанет быть кликабельным.

Модуль поиска

Размещение функционала поиска в навигационной части (Navbar) - хорошее решение и улучшит сайт в плане юзабилити. В шаблоне определена позиция search, но нужно создать сам модуль. Создаем в Менеджере модулей молуль 'Поиск'. Заголовок модуля назовем Search, позиция должны быть тоже search. Сохраняем. Во фронтэнде в правой колонке шаблона появится модуль, однако вид у него не очень хорош. Теперь нужно переопределить стили для созданного модуля.

Идем в папку html нашего шаблона и создаем там новую папку под названием mod_search. Копируем файлы default.php и index.html из /modules/mod_search/tmpl/ в /template/jab12/html/mod_search/. Теперь можно переопределить стили и придать модулю нужный вид путем редактирования файла default.php, отвечающего за вывод разметки модуля. Открываем этот файл и добавляем тегу формы класс form-search, в соответствии с правильной разметкой Bootstrap. Тег input с id mod-search-searchword получает дополнительные классы input-medium search-query. Допишите к сущесвующему классу inputbox (не забывая ставить пробелы между классами!) и когда доберетесь до соответствующей строки, не забудьте удалить разметку label. И теперь самое время задать CSS стили в файле template.css.

.form-search {margin:5px 0;}

Если будете добавлять эту строку в CSS, определите margin для body.

body {margin-top:20px;}

Наконец-то, теперь модуль смотрится действительно красиво!

Модуль Hавигатор сайта

Поколдуем немного над внешним видом навигатора сайта ("хлебные крошки"), сделав его более привлекательным для посетителей сайта. Давайте добавим следующий код в файл index.php:


<!-- ***** BREADCRUMBS ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <jdoc:include type="modules" name="breadcrumbs" />
    </div>
  </div>
</div>

Разумеется, позиция breadcrumbs тоже должна быть задана в файле templateDetails.xmll.

<position>breadcrumbs</position>

В менеджере модулей по умолчанию для "хелбных крошек" уже имеется соответствующий модуль "Навигатор сайта" (mod_breadcrumbs). Если он был удален, то создаем его заново и публикуем в позицию breadcrumbs. Убедитесь, что параметр Показывать надпись "Вы здесь" отключен. После обновления страницы сайта во фронтэнде, навигатор появится без стилей, однако нам нужно, чтобы результат получился в стиле Bootstrap. Снова необходимо переопределить стили. Нужно повторить действия по аналогии с теми, которые мы проделали в модуле поиска. Создаём папку mod_breadcrumbs в директории html и копируем файлы default.php и index.html из /modules/mod_breadcrumbs/tmpl/ в /template/jab12/html/mod_breadcrumbs/. В Twitter Bootstrap хлебные крошки выводятся немаркированным списком. Для того, чтобы наш навигатор соответствовал разметке хлебных крошек Bootstrap, нужно модифицировать файл default.php. Добавляем строку:

<ul class="breadcrumb">

сразу после <div class="breadcrumbs<?php echo $moduleclass_sfx; ?>"> и после добавляем закрывающий тег

</ul>

прямо перед </div>. Теперь анкоры <a> и <span> теги (span) в каждом объекте навигатора будут обрамлены тегом немаркированного списка <li>

Находим и заменяем код:


if ($i < $count -1) {
  if (!empty($list[$i]->link)) {
    echo '<a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a>';
  } else {
    echo '<span>';
    echo $list[$i]->name;
    echo '</span>';
  }
  if($i < $count -2){
    echo ' '.$separator.' ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' '.$separator.' ';
  }
   echo '<span>';
  echo $list[$i]->name;
    echo '</span>';
}

на следующий код:


if ($i < $count -1) {
  if (!empty($list[$i]->link)) {
    echo '<li><a href="'.$list[$i]->link.'" class="pathway">'.$list[$i]->name.'</a></li>';
  } else {
    echo '<li><span>';
    echo $list[$i]->name;
    echo '</span></li>';
  }
  if($i < $count -2){
    echo ' <span class="divider">/</span> ';
  }
}  elseif ($params->get('showLast', 1)) { // when $i == $count -1 and 'showLast' is true
  if($i > 0){
    echo ' <span class="divider">/</span> ';
  }
   echo '<li><span>';
  echo $list[$i]->name;
    echo '</span></li>';
}

Видите разницу? Мы сделали 'хлебные крошки' немаркированным списком, заключив элементы в теги <li> и </li> и заменили разделители. Сохраняем результат. Теперь кликаем по заголовку 'Blank Template Workshop' во фронтэнде, чтобы посмотреть как отображается в модуле цепочка навигации после внесённых нами изменений.

Ну что же, подбираемся к заключительным действиям. В файле index.php нужно заменить следующий код


<div id="footer">
  <div class="infooter">
    
  </div>
</div>

на такой:


<!-- ***** FOOTER ***** -->
<div class="container">
  <div class="row">
    <div class="span12">
      <p>Copyright © <?php echo date('Y'); ?> - <?php echo $app->getCfg('sitename'); ?></p>
    </div>
  </div>
</div>

В результате в футере отобразится копирайт с текущим годом и название сайта.

Тема

Поздравляю! Вы завершили свой первый прототип шаблона на базе Blank Template и фреймворка Twitter Bootstrap, и результат получился просто восхитительным!

Если заходите использовать другую тему Bootstrap, зайдите на сайт https://bootswatch.com/ и выберите понравившуюся тему. Возможно, тема Amelia как раз то, что нужно. Просто возьмите файл bootstrap.css этой темы и замените им одноименный файл из папки css созданного вами шаблона Joomla. Пожалуй, на этом пока всё. Ждите новых статей!

Заключение

Используя Blank Template, можно быстро и эффективно создать прототип сайта при помощи Twitter Bootstrap. Делайте полнофункциональный шаблон с отзывчивым дизайном и, даже в случае, если Bootstrap тема по умолчанию не подойдет вам стилистически, в сети полно других тем, которые можно использовать в качестве оформления или, собственно, самостоятельно или при помощи специалиста создать новую Bootstrap тему.

Как создать шаблон на базе Blank template и Twitter Bootstrap

Содержание:

Введение

Превью

Подготовительный этап

Blank template

Twitter Bootstrap

Меню и поиск

Navbar, адаптивная вариация

Меню

Модуль поиска

Модуль Hавигатор сайта

Футер

Тема

Заключение

Документация

WP REST API - получение данных

Gantry 5 - Введение

WP REST API – настройка и использование OAuth 1.0a аутентификации

WP REST API – настройка и использование базовой аутентификации

Создание темы для Grav

Заработок в сети