Warp 6 framework

Использование Bootstrap и Шорткодов в шаблонах Warp 6

19.12.2012 Joomla

Использование Bootstrap и Шорткодов в шаблонах Warp6 - Часть 1

Для начала, немного предыстории. Шорткоды (короткий код) - это небольшие выражения, которые интерпретируются в привычный код. Мета язык своего рода. Шорткоды очень популярны в Wordpress, там - это часть системы. В Joomla, по умолчанию, такой системы не предусмотрено. Однако, есть плагин, который поможет реализовать данную функцию, RokCandy. Этот плагин как раз будет в роли интерпретатора.

В связи с бурным развитием Bootstrap, который зарекомендовал себя как отличный фреймверк для решения многих задач, шорткоды буду писать применительно его. В этом уроке я расскажу, как сделать шорткоды для аккордеона(collapse), таббера(tabs), слайдера(carousel), бокса для показа кода(prettyprint), тултипсов(tooltips), всплывающего модального окна(modal) в шаблонах на Warp 6 Master Theme. Если использовать перечисленные компоненты отдельно от Bootstrap, то вам понадобиться вот эти файлы:

popovers.css + bootstrap-popover.js
carousel.css + bootstrap-carousel.js
modals.css + bootstrap-modal.js
tooltip.css + bootstrap-tooltip.js
accordion.css + bootstrap-collapse.js
prettify.css + prettify.js (директория bootstrap-master\docs\assets\js\google-code-prettify\ в полном релизе)
utilities.css
bootstrap-transition.js
nav.css + bootstrap-tab.js

Со скриптами всё понятно, в таком виде они есть в полном релизе Bootstrap. А вот отдельных css файлов таких нет, весь стиль поставляется в одном файле. Так как в Bootstrap CSS создается из LESS, все эти файлы можно очень просто создать самостоятельно.

Я намеренно не рассматриваю раздел Bootstrap - "Customize and download".

Шаг 1. Подготовка

Создаем нужные CSS из LESS Bootstrap. Вам нужно зайти на проект Bootstrap и скачать весь проект себе. В нем есть папка /less, в которой лежит то, что нам нужно. Для того чтобы компилировать CSS из LESS, есть несколько программ, я буду говорить о WinLess. Скачиваем, устанавливаем. Запускаем программу, создаем проект (Add folder) назовем его project. Далее заходим в нашу созданную директорию и создаем папки less и css. В папку less копируем следующие файлы из проекта bootstrap:

mixins.less - Миксы (перемешивания) (нужен только для преобразования)
variables.less - Переменные (нужен только для преобразования)
popovers.less - Всплывающие подсказки (будет скомпилирован)
carousel.less - Слайдер (будет скомпилирован)
modals.less - Модальное окно (будет скомпилирован)
tooltip.less - Всплывающие подсказки (будет скомпилирован)
accordion.less - Аккордеон (будет скомпилирован)
utilities.less - Вспомогательные классы (будет скомпилирован)

Использование

По умолчанию css в Bootstrap компилируется в один файл. Мы будем делать каждый из них отдельно. Для этого нам нужно дописать в начало некоторых документов строки c импортом миксов и переменных.


@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

Добавьте эти строки в каждый документ который нам необходимо скомпилировать.

Файлы mixins.less и variables.less компилировать не надо!

Каждый файл less теперь можно компилировать по отдельности. В WinLess жмем компилировать и получаем нужные нам файлы CSS. Так как практически во всех этих стилях используются вспомогательные классы: .clearfix, .hide-text, .input-block-level, то они дублируются в каждый файл. Правила для классов будут в начале каждого документа, можно просто удалить дубли, оставить только одну запись и перенести её в документ utilites.css. Вот эта запись:

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Теперь заходим в скачанный нами проект bootstrap и возьмем себе скрипты, которые нам потребуются.

bootstrap-carousel.js
bootstrap-collapse.js
bootstrap-modal.js
bootstrap-popover.js
bootstrap-tab.js
bootstrap-tooltip.js
bootstrap-transition.js

Итак, мы подготовили все необходимые нам файлы.

Шаг 2. Подключение файлов

Теперь нам нужно подключить все наши файлы в шаблон. В самом начале мы условились, что это будет шаблон Warp 6 Master Theme.Как подключать новые файлы в этот шаблон описано в статье Warp 6 - Добавление JS, CSS и шрифтов. Лучше всего нам создать отдельный стиль, об этом можете прочесть в статье Warp 6 - Стили.

Итак, открываем файл ВАШ_СТИЛЬ/layouts/template.config.php и дописываем туда строки:

//Load CSS
...
$this['asset']->addFile('css', 'css:accordion.css');
$this['asset']->addFile('css', 'css:carousel.css');
$this['asset']->addFile('css', 'css:modals.css');
$this['asset']->addFile('css', 'css:navs.css');
$this['asset']->addFile('css', 'css:popovers.css');
$this['asset']->addFile('css', 'css:tooltip.css');
$this['asset']->addFile('css', 'css:utilities.css');
$this['asset']->addFile('css', 'css:prettify.css');

А также скрипты:

// add javascripts
...
$this['asset']->addFile('js', 'js:bootstrap-transition.js');
$this['asset']->addFile('js', 'js:bootstrap-tooltip.js');
$this['asset']->addFile('js', 'js:bootstrap-modal.js');
$this['asset']->addFile('js', 'js:bootstrap-carousel.js');
$this['asset']->addFile('js', 'js:bootstrap-collapse.js');
$this['asset']->addFile('js', 'js:bootstrap-tab.js');
$this['asset']->addFile('js', 'js:bootstrap-popover.js');

Затем открываем файл ВАШ_СТИЛЬ/js/template.js и инициализируем некоторые скрипты внутри секции$(document).ready(function() {:


// Tooltip enable
$("a[rel=tooltip]").tooltip().click(function(e) {e.preventDefault()});
// Popover enable
$("a[rel=popover]").popover().click(function(e) {e.preventDefault()});
//prettify initalize
$( function(){ prettyPrint() });

Обратите внимание, что скрипт prettyPrint, скорее всего, будет конфликтовать при использовании функции сжатия в Warp, поэтому мы подключим его отдельно от остальных.

Для того чтобы подключить скрипт без сжатия, можно поступить следующим образом: откройте файл ВАШ_СТИЛЬ/layouts/template.php и добавьте переменную $noncache, в результате шапка документа будет такой:


<?php
/**
* @package   yoo_master
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
// get warp
$noncache = Warp::getInstance();
// get template configuration
include($this['path']->path('layouts:template.config.php'));
?>

Теперь в этом же документе внутри элемента head мы напишем:


<script src="/<?php echo $noncache['path']->url('js:prettify.js'); ?>"></script> <!-- This exception to the GZip -->

Исключение создано. Теперь, скрипт prettify.js будет подключаться напрямую, и не будет участвовать в сжатии.

Использование шорткодов

Откройте Joomla менеджер и установите RokCandy, если ещё этого не сделали.

Давайте подведем небольшой итог. Мы подключили необходимые нам файлы в шаблон. Инициализация файлов js не должна вызывать никаких конфликтов.(смотрим консоль firebug). Если всё в порядке, можно продолжать работать.

У плагина RokCandy есть свои правила построения шорткодов. Во первых, используется название macros, вместо shortcode (!по тексту я могу заменять термины). Внутри плагина существует два окна, в одном вы пишите HTML-код, в другом Шорткод. Можете сортировать свои макросы в категории. Все удобства шорткодирования заключаются в том, что вы используете переменные. Давайте рассмотрим для начала простой пример. Нам нужно сделать некий контейнер div, в котором будет находиться текст с определенным форматированием, для этого ему нужен класс .info:


<div class="info">Текст</div>

У нас имеется как минимум одна переменная - Текст. Для обозначения переменной в RokCandy используются знаки {}. Для обозначения самого макроса используются знаки [] В результате шорткод будет выглядеть так:


//html
<div class="info">{text}</div>
//Shortcode
[info]{text}[/info]

Если текст будет небольшим, то мы можем записать это ещё проще:

[info text="{text}" /]

А можем и усложнить задачу, например, представить класс .info как переменную, тогда это будет так:


//html
<div class="{class}">{text}</div>
//Shortcode
[block class="{class}"]{text}[/block]

Как вы наверное заметили, мы используем кавычки, когда переменная находится внутри квадратных скобок. Есть ещё одна хитрость - мы можем вкладывать один шорткод в другой. Для этого необходимо указать в месте вложения произвольную переменную {text}, позже мы будем это использовать.

Делаем Tooltip

Давайте сделаем шорткод для всплывающих подсказок. Возьмите этот код:


<ul>
  <li><a href="#" rel="tooltip" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</a></li>
  <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
  <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
  <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>

У нас четыре варианта всплывающих подсказки. Все они отлично работают. Давайте сделаем для них шорткод. У нас есть три переменные: положение подсказки, всплывающий текст подсказки и текст ссылки. Вот как можно сделать:


//html
<a href="#" rel="tooltip" data-placement="{place}" data-original-title="{title}">{text}</a>
//Shortcode
[tooltip place="{place}" title="{title}"]{text}[/tooltip]

Теперб заменим html код на:


<ul>
<li>[tooltip place="top" title="Tooltip on top"]Tooltip on top[/tooltip]</li>
<li>[tooltip place="right" title="Tooltip on right"]Tooltip on right[/tooltip]</li>
<li>[tooltip place="bottom" title="Tooltip on bottom"]Tooltip on bottom[/tooltip]</li>
<li>[tooltip place="left" title="Tooltip on left"]Tooltip on left[/tooltip]</li>
</ul>

Сохраняем и проверяем. Элементы списка <ul><li> мы не трогали (это для удобства просмотра), наша цель - всплывающая подсказка. Теперь давайте разберем popovers. Там всё почти точно также, только добавляется ещё одна переменная. Итог будет таким:


//html
<a href="#" class="btn" rel="popover" data-placement="{place}" data-content="{content}" data-original-title="{title}">{text}</a>
//shortcode
[popover place="{place}" content="{content}" title="{title}"]{text}[/popover]
//Применение
[popover place="top" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Tooltip on left"]Popover on top[/popover]

Конечно вы можете усложнить всё это, добавить ещё переменных: дополнительный стиль кнопки или добавить атрибут trigger.

Делаем подсветку кода Prettyprint

Подсветка prettyprint может использоваться с указанием языка кода. Однако для каждого языка(css, php, и.д) вам нужны будут дополнительные css стили. Их можно взять здесь. Если делать просто (без дополнительных стилей для языков), то будет примерно так:


//HTML
<pre class="prettyprint linenums">{code}</pre>
//Shortcode
[code]{code}[/code]

Если будете подключать обозначение языка, то:


//HTML
<pre class="prettyprint linenums {lang}">{code}</pre>
//Shortcode
[code lang="{lang}"]{code}[/code]

Делаем Слайдер

Html разметка слайдера в Bootstrap выглядит так:


<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Теперь, начинается интересное. Во-первых, кнопки слайдера связаны посредством id. Т.е. id кнопок должен быть такой же как и у слайдера. Во-вторых, практически не возможно сделать всё конструкцию в одном шорткоде, так как количество слайдов может быть разное, поэтому мы будем делать два шорткода (составной шорткод). Первая часть будет такой:


//Html
<div id="{id}" class="carousel slide">
  <div class="carousel-inner">{text}</div>
  <a class="carousel-control left" href="#{id}" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#{id}" data-slide="next">›</a>
</div>
//Shortcode
[slider id="{id}"]{text}[/slider]

Теперь напишем для слайдов:


//Html
<div class="item">{text}</div>
//Shortcode
[slide]{text}[/slide]

Нам потребуется ещё один шорткод, чтобы можно было сделать активным слайд.


//Html
<div class="active item">{text}</div>
//Shortcode
[slide active]{text}[/slide]

Можно было решить этот нюанс, возможно, и по другому, дело ваше. В итоге мы сможем применить шорткод таким образом:


//Применение
[slider]
[slide active]Ваш текст или html код[/slide]
[slide]Ваш текст или html код[/slide]
[slide]Ваш текст или html код[/slide]
[/slider]

Делаем Таббер

Таббер состоит из двух частей. Первая часть - вкладки, вторая часть - контент.


//Первая часть
<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
  </li>
</ul>
//Вторая часть
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="home">
...
  </div>
  <div class="tab-pane fade" id="profile">
...
  </div>
  <div class="tab-pane fade" id="tab3">
...
  </div>
</div>

Почти так же как и в слайдере, есть зависимость по id, но для каждой вкладки. Если подумать, это открывает множество возможностей для использования контента и управляющих вкладок в разных местах сайта, не связанных одним контейнером div. Вместе с тем, усложняется шорткод. Шорткод будет вложенным и состоять из нескольких частей. Для начала, сделаем возможность различного количества управляющих вкладок.


//Первая часть HTML
<ul id="{id}" class="nav nav-tabs">{text}</ul>
//Shortcode
[tabber id="{id}"]{text}[/tabber]

Теперь сами управляющие вкладки:


//Вторая часть HTML
<li><a href="#{link}" data-toggle="tab">{text}</a></li>
//Shortcode
[tab link="{link}"]{text}[/tab]

Не забудем и про активную вкладку


//Для активной вкладки
<li class="active"><a href="#{link}" data-toggle="tab">{text}</a></li>
//Shortcode
[tab active link="{link}"]{text}[/tab]

Подошло время для второй части табера - контента.


// Общий контейнер html
<div id="{id}" class="tab-content">{text}</div>
//Shortcode
[content tabs]{text}[/content]

Содержимое общего контенера:


// Вкладка с контентом html
<div class="tab-pane fade" id="{id}">{text}</div>
//Shortcode
[tabcontent id="{id}"]{text}[/tabcontent]

Для открытой вкладки с контентом:


// Открытая вкладка с контентом html
<div class="tab-pane fade in active" id="{id}">{text}</div>
//Shortcode
[tabcontent active id="{id}"]{text}[/tabcontent]

Итак, у нас получилось много шорткодов, главное помнить, что управляющие вкладки связаны с контентом через id, поэтому его нужно писать одинаковым для каждой вкладки. Вот пример, как можно это использовать:


//Управляющие вкладки
[tabber id="myTab"]
[tab active link="home"]home[/tab]
[tab link="profile"]profile[/tab]
[tab link="tab3"]tab3[/tab]
[/tabber]
//Вкладки с контентом
[content tabs]
[tabcontent active id="home"]Ваш контент для вкладки home[/tabcontent]
[tabcontent id="profile"]Ваш контент для вкладки profile[/tabcontent]
[tabcontent id="tab3"]Ваш контент для вкладки tab3[/tabcontent]
[/content tabs]

Рассмотрим Аккордеон.

Пример реализации аккордеона в boostrap выглядит так:

<div class="accordion" id="accordion2">
	<div class="accordion-group">
	  <div class="accordion-heading">
		<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
		  Collapsible Group Item #1
		</a>
	  </div>
	  <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
		<div class="accordion-inner">
		  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		</div>
	  </div>
	</div>
	<div class="accordion-group">
	  <div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
		  Collapsible Group Item #2
		</a>
	  </div>
	  <div id="collapseTwo" class="accordion-body collapse">
		<div class="accordion-inner">
		  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		</div>
	  </div>
	</div>
	<div class="accordion-group">
	  <div class="accordion-heading">
		<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
		  Collapsible Group Item #3
		</a>
	  </div>
	  <div id="collapseThree" class="accordion-body collapse">
		<div class="accordion-inner">
		  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		</div>
	  </div>
	</div>
</div>

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


//html
<div class="accordion" id="{id}">{text}</div>
//Шорткод
[toggle id={id}]{text}[/toggle]

Затем вкладку


//html
<div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#{group}" href="#{id}">{head}</a></div><div id="{id}" class="accordion-body collapse" style="height: 0px; "><div class="accordion-inner">{content}</div></div>
//Шорткод
[head group={group} id={id}]{head}[/head]{text}[content]{content}[/content]

Параметр group нужен для того чтобы связать все вкладки. Если вы хотите сделать не связанные вкладки, то код будет такой:


//html
<div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" href="#{id}">{head}</a></div><div id="{id}" class="accordion-body collapse" style="height: 0px; "><div class="accordion-inner">{content}</div></div>
//шорткод
[head id={id}]{head}[/head]{text}[content]{content}[/content]

Пример использования:


//Группированные
[toggle id=toggle_1]
[collapse]
[head group=toggle_1 id=link_1]Первая вкладка[/head]
[content]Ваш контент для вкладки[/content]
[/collapse]
[collapse]
[head group=toggle_1 id=link_2]Вторая вкладка[/head]
[content]Ваш контент для вкладки[/content]
[/collapse]
[/toggle]
//Не группированные
[toggle id=toggle_2]
[collapse]
[head id=link_3]Первая вкладка[/head]
[content]Ваш контент для вкладки[/content]
[/collapse]
[collapse]
[head id=ink_4]Вторая вкладка[/head]
[content]Ваш контент для вкладки[/content]
[/collapse]
[/toggle]

Теперь осталось сделать модальное окно. Модальное окно состоит из двух частей: кнопка(ссылка) и всплывающее окно. В свою очередь всплывающее окно состоит из четырех частей: тело окна, шапка, контент и футер. Пример кода всей этой конструкции такой:


<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Давайте для начала сделаем кнопку:


//Html
<a href="#{id}" role="button" class="btn" data-toggle="modal">{text}</a>
//Шорткод
[modal]{id}[text]{text}[text][/modal]

Теперь тело окна

/html
<div class="modal hide fade" id="{id}" tabindex="-1" role="dialog" aria-labelledby="{lable}" aria-hidden="true">{text}</div>
//Шорткод
[modalwindow][id={id}][lable={lable}]{text}[/modalwindow]

Далее шапка


//Html
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button><h3 id="{id}">{header}</h3>{text}</div>
//Шорткод
[modalheader][id={id}][header={header}]{text}[/modalheader]

Контент


//html
<div class="modal-body">{text}</div>
//Шорткод
[modalbody]{text}[/modalbody]

И футер


//html
<div class="modal-footer">{text}</div>
//Шорткод
[modalfooter]{text}[/modalfooter]

Ещё можно сделать кнопку "закрыть"


//html
<button class="btn" data-dismiss="modal" aria-hidden="true">{text}</button>
//шорткод
[modal-close]{text}[/modalclose]

Применить всё это можно так:


//кнопка
[modal]mymodal[text]Ссылка[text][/modal]
//окно
[modalwindow][id=mymodal][lable=mymodallable]
[modalheader][id=mymodal][header=Заголовок][/modalheader]
[modalbody]Потому по, возникает людей, действительно из, стал ни стал нет, назвал или, избегал восхваляющих всю лишь какими. Упрекнуть, нет людей представление физическими примером презирает несло стремящегося такие превратное а поняли если никаких. Такие eсли как — открывший: никого, что возлюбил я бы раз из-за этот воспользоваться счастливой, предаваться воспользоваться. Вы избегает примером: чтобы отвергает тех этот страдания которое такого пользы, чтобы возлюбил само жизни что истину иной возжаждал или никого картину избегал — за, наслаждению. Воспользоваться раз некоей тягостными приносило или неприятностей наслаждение никого только это открывший вами потому, назвал постигают превратное кто примером, действительно лишь страдания иной назвал некоей. Приносило открывший возлюбил как физическими из упрекнуть раз равно жизни того.[/modalbody]
[modalfooter][modal-close]Закрыть[/modalclose][/modalfooter][/modalwindow]

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


//кнопка
[modal]mymodal[text]Логин[text][/modal]
//окно
[modalwindow][id=mymodal][lable=mymodallable]
[modalheader][id=mymodal][header=Заголовок][/modalheader]
[modalbody]{loadmodule mod_login}[/modalbody]
[modalfooter][modal-close]Закрыть[/modalclose][/modalfooter][/modalwindow]

Или, например вы можете использовать шорткод в качестве пункта меню. Если ваш пункт меню должен открывать модальное окно, например, то вы можете использовать шорткод кнопки вместо имени пункта меню.

Существует также и подводный камень - очень часто когда вы пользуетесь визуальным редактором в joomla, то добавляются нежелательные в данном случае элементы <p>. Выхода я вижу два: пользуйтесь обычным редактором, либо пишите шорткоды без пробелов и переносов строк.

P.S. Конечно на месте bootstrap может быть любая связка HTML+CSS+JS. И все же такой подход, на мой взгляд, является скорее концептуальным этапом в разработке, потому как совсем уж косвенно связан с основами работы самой joomla. Однако может вам помочь в чем-то.

Использование Bootstrap и Шорткодов в шаблонах Warp 6

Шаг 1. Подготовка

Шаг 2. Подключение файлов

Использование шорткодов

Делаем Tooltip

Делаем подсветку кода Prettyprint

Делаем Слайдер

Делаем Таббер

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

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

Gantry 5 - Введение

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

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

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

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