Как создать свой шаблон 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. Для этого пишем в самом верху

Таким образом мы себя обезопасили

Добавляем стандартную html-разметку и стандартные скрипты joomla

Для этого ниже пишем

Строка <jdoc:include type=»head» /> отвечает как раз за вывод содержимого <head> в Joomla и обязательно должна размещаться в теге <head>.

Подключение файлов верстки — css и js

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

В моем случае, я использую по два файла css и js.

Для этого я пишу

Это ваша ссылка на ваш домен

Передает имя вашего домена

А это уже непосредственно путь к вашему файлу стилей

Данные строки говорят о том, что у меня файл style.css находится в — «Домен/templates/css/»

Тоже самое относится и к вашим js файлам.

Есть и другие способы подключения дополнительных файлов. Но, в данном примере я все же решил рассмотреть именно такой способ.

Теперь нам нужно добавить модульные позиции в наш шаблон

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

Для этого мы должны вернутся к нашему файлу TemplateDetails.xml, о котором мы подробно уже говорили на прошлом уроке.

Добавляем в него теги <positions>. Например, давайте добавим три позиции — top, main, footer

Таким образом мы создали три модульные позиции, которые будут отображаться уже в нашей админ панели или если мы пропишем в браузерной строке вашсайт?tp=1, то сможем убедиться, что модульные позиции уже присутствуют.

Если у вас не реагирует на вашсайт?tp=1, то необходимо включить показ модульных позиций в админке. Это делается так

Идем в extensions-templates и выбираем options

272c57ec09

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

d8055e3257

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

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

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

И вы хотите сделать так, чтобы этот текст можно было отключать/включать или менять его из админки joomla.

Для этого, вместо этого всего текста пишем

У вас должно получится что-то вроде такого

таким образом мы даем joomla понять, что в этом месте у нас будет div, которые станет нашей модульной позицией под названием «footer».

Данная строка отвечает за вывод названия модуля. Знаете, в админке есть пункт — «показывать заголовок модуля». Так вот, если вы не пропишите данную строку, то заголовок модуля не будет включаться, как бы вы этого не хотели и не старались клацая в админке.

После данной процедуры, мы сможем управлять данном модульной позицией уже через админку.

Идем в «расширения»-«менеджер модулей», там создаем модуль с модульной позицией «footer» и вставляем туда наш первоначальный текст

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

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 не будет опубликован. Обязательные поля помечены *