Добавить в корзинуПозвонить
Найти в Дзене
Андрианов

Создание сайта. Создаем модуль в Джумла

эта статья отсюда http://znaika-web.ru/sozdaem-modul-v-dzhumla Сначала немного Теории, чтобы было понятнее Модуль это вроде какой то коробочки, в которую что то помещают, а потом это можно вставить в любое место на сайте. Например вы помещаете меню в модуль и потом можно модуль с меню разместить в любом месте. В общем это для удобства сделано. А чтобы понять как создаются модули нужно разобраться в некоторых файлах. Предупреждение! Перед изменением этих файлов, да и вообще любых других, всегда делайте копии файлов, бэкапы так сказать, и сохраняйте их где нибудь на компьютере, например создайте для этого новую папку Копия. Если что то повредится, то из этой папки можно будет взять копии и заменить поврежденные файлы. Начинаем В Джумле есть Три главных файла Вот они эти файлы:  index.php,   template.css  и templateDetails.xml. index.php и template.css это как бы братья файлы. Первый, index.php, это шаблон сайта (то что будет записано в нем, то и отобразится на сайте), второй template.css
Оглавление

эта статья отсюда http://znaika-web.ru/sozdaem-modul-v-dzhumla

Сначала немного Теории, чтобы было понятнее

Модуль это вроде какой то коробочки, в которую что то помещают, а потом это можно вставить в любое место на сайте. Например вы помещаете меню в модуль и потом можно модуль с меню разместить в любом месте. В общем это для удобства сделано.

А чтобы понять как создаются модули нужно разобраться в некоторых файлах.

Предупреждение!

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

Начинаем

В Джумле есть Три главных файла

Вот они эти файлы:  index.php,   template.css  и templateDetails.xml.

index.php и template.css это как бы братья файлы. Первый, index.phpэто шаблон сайта (то что будет записано в нем, то и отобразится на сайте), второй template.css наводит красоту.

В index.php пишутся div-блоки с идентификаторами id, с классами class или без них.

Вот именно в эти div-блоки вставляются модули, об этом ниже.

Если идентификатор id или класс class написаны в коде, для какого то div'a, то этот div-блок как бы получает имена этих идентификаторов или классов.

Например если написано так, в файле index.php

<div class="container">    то можно сказать div с именем container

<div class="header"></div>    можно сказать div по имени header

<div class="nav"></div>       можно сказать div по имени nav

<div class="article"></div>   можно сказать div статей, article

Хотя так не говорят. Говорят, див с классом container. Ну это кому как нравится. Так, разбираемся дальше.

Когда у дивов есть класс, Тогда в этих дивах можно наводить красоту через файл  template.css

Теперь, как это все пишется в разных файлах

1) В index.php класс пишется так <div class="container">, (читается так блок div имеет класс с именем container и уже через  это имя, в файле стилей (template.css), на этот блок/див наводим красоту)

2) В файле стилей template.css класс блока пишется так   .container { } через точку.

Из этого файла template.css мы обращаемся к этому div-блоку (который в index.php) через его имя .container и потом наводим красоту этого div-блока (выбираем имя и размер шрифта, назначаем отступы, цвет, фон и т.д., все это в фигурных скобках)

3) А в третьем файле templateDetails.xml пишутся позиции модулей, то место где будут располагаться модули на сайте

<positions>

<position>top</position>

<position>search</position>

<position>menu</position>

<position>left</position>

<position>right</position>

<position>footer</position>

</positions>

То есть если вы хотите что-то разместить на сайте, в каком то месте, то можно создать позицию в этом файле

и вставить/назначить в нее Модуль. Например модуль Меню

Практика

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

Сначала вот это запомните ?tp=1

Это такая штука которую пишут в адресной строке и нажимают Enter, и появляются на экране все позиции шаблона сайта.

Пишут ее после названия доменного имени.

Например название доменного имени moi-site.ru,то надо написать moi-site.ru/?tp=1 и нажать Enter, после этого на экране увидите где располагаются позиции.

В Расширения/Модули можно для модуля выбрать другую позицию и он будет отображаться в другом месте на сайте.

А если немного попрограммировать, то эти позиции модулей можно вставить в файл index.php

Вот так. Подключение модуля в позицию top

------------------------------------------------------------------------------------------

<div class="header">header

<jdoc:include type="modules" name="top" />

</div>

--------------------------------------

name="top" это не имя модуля это имя позиции модуля

Ну вот такая недоделка в джумле. Кажется если написано include type="modules" то это включение  модуля с именем name="top". На самом деле это включение модуля (не известно какого), но известно куда, В позицию с именем name="top".

А для того чтобы узнать какой модуль вставлен в эту позицию top, нужно посмотреть вкладку Расширения/Модули, там и увидите у какого модуля эта позиция top.

Имена позиций модулей должны совпадать в index.php и в файле templateDetails.xml

index.php

templateDetails.xml

<div class="header">header

<jdoc:include type="modules" name="top" />

</div>

<div class="nav">nav

<jdoc:include type="modules" name="search" />

</div>

<div class="footer">footer

<jdoc:include type="modules" name="footer" />

</div>

<positions>

<position>top</position>

<position>search</position>

<position>footer</position>

</positions>

Как это все работает?

1) Давайте напишем в templateDetails.xml    <position>top</position> если ее там нет.

2) В index.php, в div с классом class="header",

какому-то Модулю назначаем эту позицию name="top", вот так

(name="top" это не имя модуля это имя позиции модуля)<div class="header">header<jdoc:include type="modules" name="top" /></div>то есть сразу за строчкой <div class="header">вставляем код         <jdoc:include type="modules" name="top" />

Когда файл index.php видит у себя name="top" то он начинает искать этот top в других файлах и находит его в файле templateDetails.xml и понимает что это позиция и ее надо вывести на экран.

Затем index.php смотрит и видит class="header" и также находит этот класс, но уже в другом файле, в template.css.

Там он написан так .header {} и в этом классе всякие свойства (отступы, цвет, шрифт, фон в общем всякий дизайн и красотульки).

И index.php присоединяет это все к своему коду и выводится на сайте нужная позиция и нужные стили (красота).

Вот так работают эти три файла о которых речь в этой статье.

Подведем промежуточный итог

1. в templateDetails.xml мы создали позицию     <position>top</position>

2. в index.php в блоке

<div class="header">header

<jdoc:include type="modules" name="top" />

</div>

прописали, что в этот блок вставляется какой то модуль у которого позиция top

Сейчас все станет ясно

Создадим модуль для меню

1) Создаем модуль, (в Расширения/Модули) кнопка создать. В появившемся окошке Выбор типа модуля выбираем Меню. Пишем заголовок My menu, выбираем позицию top, в раскрывающемся списке Позиция, справа.

2) Затем в поле Выбор меню выбираем меню

Еще раз, чтобы запомнить, и не запутаться. Должно быть так

1) Создайте свое меню во вкладке Меню/Менеджер меню. Например menu777

2) в templateDetails.xml   пишем позицию <position>top</position> (если ее нет)

3) в index.php говорим программе, чтобы она включила Модуль, который находится в позиции "top", в этот файл, вот так

<div class="header">

<jdoc:include type="modules" name="top" />

</div>

И тогда index.php выведет этот Модуль в то место, на сайте,  где находится позиция top

4) в Панели управления Джумлы, во вкладке Расширения/Модули давим кнопку Создать, откроется окно Выбор типа модуля, выбираем Меню.

В новом окне пишем название модуля My menu и выбираем, в раскрывающемся списке Выбор меню, свое меню menu777

5) тут же в Панели управления Джумлы, во вкладке Расширения/Модули, справа в раскрывающемся списке Позиция выбираем позицию  top. Мы ее прописали в файлах  index.php и  templateDetails.xml  смотри выше

Все теперь у нас есть позиция top прописанная в двух файлах. В эту позицию вставлен Модуль с названием My menu. А в этом модуле ваше меню menu777 .

Вот такая матрешка: позиция, в ней Модуль, а в нем меню.

Все это делал на джумла 3.9.10 на других должна быть похожая Панель управления.

Всего хорошего

эта статья отсюда http://znaika-web.ru/sozdaem-modul-v-dzhumla

Похожие материалы

Первый раз в Джумле? Сразу Создавайте Статью

Создаем горизонтальное меню в Джумла