Как создать свой шаблон joomla или как натянуть сайт или верстку на joomla. Часть 2

В предыдущем уроке мы начали создавать свой шаблон joomla или, как говорят, натягивать html верстку на joomla.

Напомню, в прошлом уроке мы:

  1. Установили Joomla на домене, где будем размещать наш новый сайт
  2. Создали папку с нашим названием шаблона
  3. Создали и заполнили файл TemplateDetails.xml
  4. Заархивировали файлы нашего шаблона добавив туда: файл TemplateDetails.xml, index.html, папку с css-файлами, папку с js-файлами и папку с изображениями img.

Теперь наша задача установить наш шаблон.

Для этого идем в Joomla и через стандартную форму установки шаблонов или модулей в joomla устанавливаем наш шаблон

aa65338666

Не забудьте включить наш шаблон в админке 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

272c57ec09

И там уже включаем показ модульных позиций

d8055e3257

Как вывести модульные позиции на сайте

После того, как мы обозначили модульные позиции, наша задача — вывести их, сделать так, чтобы та или иная часть нашей верстки заняла свою модульную позицию.

Например, у вас в верстке есть такая часть кода

<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, представляющее товары для детей, такие как: наборы для детского творчества (гипсовые и витражные поделки, бисероплетение, вышивка, и т.д.), развивающие игры и игрушки, ростомеры, ковролиновые конструкторы и научные игры. Широкий и постоянно обновляющийся ассортимент продукции обеспечивает выбор игр для детей разных возрастов и интересов

Включаем модуль и проверяем. Он должен появится у вас на странице

d99ed7e838

Вы можете через админку легко его менять и т.д. Данный блок вашей верстки теперь полностью управляем и редактируемый из админки joomla.

На сегодня это все.

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

автор: Роман Довгаль

С 2010 года я занимаюсь интернет маркетингом. Сюда входит и SEO, и SMM, и SMO, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе :)
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности :)

10 комментария

  1. При разработке нового или редактировании существующего шаблона, необходимо учитывать тот факт, что favicon.ico постоянно кэшируется браузерами и в процессе его редактирования и просмотра вам придётся постоянно чистить кэш браузера, чтобы отобразить изменённый файл.

  2. Подскажите. Делаю лендинг на Joomla 3.6.3.
    Хотел верстку поделить на модули такие как: header, action, service и т.д.
    Для теста создал в админке тестовый модуль и подключил его в index.php
    В контекстной области модуля ввел код .. Первое с чем столкнулся тег самопроизвольно поменялся на . Второе на сайте мой модуль вывелся обрамленный ненужными блочными элементами:

    test

    .


    Можноли в Joomla поделить шаблон на логические блоки при этом оставив их содержимое в исконном виде?

  3. В данной ленте комментариев нет возможности добавлять код для наглядности?

    1. Визуальный редактор Joomla может обрезать некоторые теги или добавлять свои. Любые визуальные редакторы. Вам нужно работать с html. Если я правильно понял ваш вопрос

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *