Разное

Адаптация шаблона под Joomla 3

Joomla
Добавление в избранное
Сохранить
Внимание! Этот материал документации находится в процессе подготовки (на официальном сайте). Русский перевод будет регурярно обновляться.

Адаптация шаблона под Joomla 3 выполняется в ряд шагов. Ввиду того, что в Joomla 3 используется фреймворк Twitter Bootstrap, множество классов и id имён были изменены. Кроме того, для полного использования всех возможностей Bootstrap нужно подключить некоторые файлы.

В данном материале не рассматриваются все возможности пользовательского интерфейса Joomla 3 и статья - всего лишь краткий курс по базовой адаптации шаблона, однако при более основательном подходе вы можете добиться полной адаптации шаблона, а также использования новых возможностей интерфейса Joomla 3 и фреймворка Bootstrap.

В некоторых случаях, когда верстка была основательно проработана, и в шаблоне присутствует множество стилей, либо активно применяется Mootools, как временный вариант, вы можете попробовать использовать переопределения от версии 2.5.

Сравнительная таблица
2.53.xЗаметки
menu nav
pagnav pager
actions dropdown-menu  Выведет только текст, без иконок

Файл index.php

Добавляем следующий код сразу после head:


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='../media/jui/js/jquery.js'></script>
    <script src='../media/jui/js/bootstrap.min.js'></script>
    <script src='../media/jui/js/chosen.jquery.min.js'></script>
    <script type="text/javascript">
      jQuery.noConflict();
    </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


Следующий код добавим после подключенного файла template.css:


// если нужны стили для RTL языка (с направлением письма справа налево)
if ($this->direction == 'rtl') :
    $doc->addStyleSheet('../media/jui/css/bootstrap-rtl.css');
endif;
 
// Загружаем специальный CSS файл для текущего языка
$file = 'language/' . $lang->getTag() . '/' . $lang->getTag() . '.css';
if (JFile::exists($file)) :
    $doc->addStyleSheet($file);
endif;
 
$doc->addStyleSheet('../media/jui/css/chosen.css');

Стили редактора во фронтэнде

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


<ul class="nav nav-tabs">
    <li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('JEDITOR') ?></a></li>
    <?php if ($params->get('show_urls_images_frontend')) : ?>
    <li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li>
    <?php endif; ?>
    <li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li>
    <li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li>
    <li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li>
</ul>


Продолжение следует.

Оригинальная статья: Joomla docs
Eugene Sivokon
Предприниматель, менеджер проектов, Joomla-энтузиаст. Занимаюсь созданием сайтов с 2002 года. Координатор нескольких Joomla проектов. Обожаю путешествовать, интересуюсь историей и изучаю иностранные языки.

Подпишитесь на рассылку новостей CMScafe