В предыдущем уроке мы начали создавать свой шаблон joomla или, как говорят, натягивать html верстку на joomla.
Напомню, в прошлом уроке мы:
- Установили Joomla на домене, где будем размещать наш новый сайт
- Создали папку с нашим названием шаблона
- Создали и заполнили файл TemplateDetails.xml
- Заархивировали файлы нашего шаблона добавив туда: файл TemplateDetails.xml, index.html, папку с css-файлами, папку с js-файлами и папку с изображениями img.
Теперь наша задача установить наш шаблон.
Для этого идем в Joomla и через стандартную форму установки шаблонов или модулей в joomla устанавливаем наш шаблон
Не забудьте включить наш шаблон в админке joomla.
После перехода на сайт вы увидите белый экран. Не пугайтесь. Все нормально. Так и должно быть и так будет, пока мы не настроим файл index.php нашего сайта
Работа с index.php. Начало
Создаем файл index.php. Базовый файл нашего нового шаблона.
Туда копируем содержимое своей html верстки и вносим кое-какие правки.
Первое, что нам нужно сделать, это запретить прямое обращение к нашему файлу index.php. Для этого пишем в самом верху
<?php defined('_JEXES') or die; ?>
Таким образом мы себя обезопасили
Добавляем стандартную html-разметку и стандартные скрипты joomla
Для этого ниже пишем
<?php defined('_JEXES') or die; ?> <!DOCTYPE html> <head> <jdoc:include type="head" /> </head> <body> Ваши divы, содержимое сайта и т.д. </body> </html>
Строка <jdoc:include type=”head” /> отвечает как раз за вывод содержимого <head> в Joomla и обязательно должна размещаться в теге <head>.
Подключение файлов верстки – css и js
Для данного действия вам понадобятся ну прям уж очень начальные знания PHP.
В моем случае, я использую по два файла css и js.
Для этого я пишу
$doc=JFactory::getDocument(); $doc->addStyleSheet(JUri::base()."templates/".$doc->template."/css/style.css"); $doc->addStyleSheet(JUri::base()."templates/".$doc->template."/css/bootstrap.min.css"); $doc->addStyleSheet(JUri::base()."templates/".$doc->template."/css/animate.css"); $doc->addScript(JUri::base()."templates/".$doc->template."/js/bootstrap.min.js"); $doc->addScript(JUri::base()."templates/".$doc->template."/js/wow.min.js");
$doc=JFactory::getDocument();
Это ваша ссылка на ваш домен
$doc->addStyleSheet(JUri::base()."templates/".$doc->template."/css/style.css");
JUri::base()
Передает имя вашего домена
"templates/".$doc->template."/css/style.css"
А это уже непосредственно путь к вашему файлу стилей
Данные строки говорят о том, что у меня файл style.css находится в – “Домен/templates/css/”
Тоже самое относится и к вашим js файлам.
Есть и другие способы подключения дополнительных файлов. Но, в данном примере я все же решил рассмотреть именно такой способ.
Теперь нам нужно добавить модульные позиции в наш шаблон
Как добавить модульные позиции в Joomla
Для этого мы должны вернутся к нашему файлу TemplateDetails.xml, о котором мы подробно уже говорили на прошлом уроке.
Добавляем в него теги <positions>. Например, давайте добавим три позиции – top, main, footer
<positions> <position> top </position> <position> main </position> <position> footer </position> </positions>
Таким образом мы создали три модульные позиции, которые будут отображаться уже в нашей админ панели или если мы пропишем в браузерной строке вашсайт?tp=1, то сможем убедиться, что модульные позиции уже присутствуют.
Если у вас не реагирует на вашсайт?tp=1, то необходимо включить показ модульных позиций в админке. Это делается так
Идем в extensions-templates и выбираем options
И там уже включаем показ модульных позиций
Как вывести модульные позиции на сайте
После того, как мы обозначили модульные позиции, наша задача – вывести их, сделать так, чтобы та или иная часть нашей верстки заняла свою модульную позицию.
Например, у вас в верстке есть такая часть кода
<div> С 2007 года активно развивается новое направление издательства Softik, представляющее товары для детей, такие как: наборы для детского творчества (гипсовые и витражные поделки, бисероплетение, вышивка, и т.д.), развивающие игры и игрушки, ростомеры, ковролиновые конструкторы и научные игры. Широкий и постоянно обновляющийся ассортимент продукции обеспечивает выбор игр для детей разных возрастов и интересов</div>
И вы хотите сделать так, чтобы этот текст можно было отключать/включать или менять его из админки joomla.
Для этого, вместо этого всего текста пишем
<jdoc:include type="modules" name="footer" style="xhtml" />
У вас должно получится что-то вроде такого
<div> <jdoc:include type="modules" name="footer" style="xhtml" /> <div>
таким образом мы даем joomla понять, что в этом месте у нас будет div, которые станет нашей модульной позицией под названием “footer”.
style="xhtml"
Данная строка отвечает за вывод названия модуля. Знаете, в админке есть пункт – “показывать заголовок модуля”. Так вот, если вы не пропишите данную строку, то заголовок модуля не будет включаться, как бы вы этого не хотели и не старались клацая в админке.
После данной процедуры, мы сможем управлять данном модульной позицией уже через админку.
Идем в “расширения”-“менеджер модулей”, там создаем модуль с модульной позицией “footer” и вставляем туда наш первоначальный текст
С 2007 года активно развивается новое направление издательства Softik, представляющее товары для детей, такие как: наборы для детского творчества (гипсовые и витражные поделки, бисероплетение, вышивка, и т.д.), развивающие игры и игрушки, ростомеры, ковролиновые конструкторы и научные игры. Широкий и постоянно обновляющийся ассортимент продукции обеспечивает выбор игр для детей разных возрастов и интересов
Включаем модуль и проверяем. Он должен появится у вас на странице
Вы можете через админку легко его менять и т.д. Данный блок вашей верстки теперь полностью управляем и редактируемый из админки joomla.
На сегодня это все.
В следующем уроке мы поговорим о том, как сделать так, чтобы модульные позиции пропадали с сайта в случае их отключения. Также мы поговорим о выводе основного контента сайта и о многом другом. Следить за статьями нашего блога
Ошибочка
“Напомню, в пошлом уроке мы:”
Спасибо) поправил
Спасибо! Когда следующий урок?
на этой неделе) был в отпуске) все будет
Когда можно ожидать следующий урок?
Он в процессе, думаю еще дней 10 и закончу
При разработке нового или редактировании существующего шаблона, необходимо учитывать тот факт, что favicon.ico постоянно кэшируется браузерами и в процессе его редактирования и просмотра вам придётся постоянно чистить кэш браузера, чтобы отобразить изменённый файл.
Подскажите. Делаю лендинг на Joomla 3.6.3.
Хотел верстку поделить на модули такие как: header, action, service и т.д.
Для теста создал в админке тестовый модуль и подключил его в index.php
В контекстной области модуля ввел код .. Первое с чем столкнулся тег самопроизвольно поменялся на . Второе на сайте мой модуль вывелся обрамленный ненужными блочными элементами:
test
.
Можноли в Joomla поделить шаблон на логические блоки при этом оставив их содержимое в исконном виде?
В данной ленте комментариев нет возможности добавлять код для наглядности?
Визуальный редактор Joomla может обрезать некоторые теги или добавлять свои. Любые визуальные редакторы. Вам нужно работать с html. Если я правильно понял ваш вопрос