Создание шаблонов Joomla - [3]

Шрифт
Интервал

Структура директорий шаблона

Теперь необходимо позаботится о кое-каких условиях. Как уже говорилось, шаблон должен иметь определенную структуру директорий:


[ПутьКJoomla!]/templates/[НазваниеШаблона]/

[ПутьКJoomla!]/templates/[ НазваниеШаблона]/css/

[ПутьКJoomla!]/templates/[ НазваниеШаблона]/images/


Название шаблона не должно содержать пробелов или каких-либо специальных символов.

При инсталляции шаблона в виде заархивированного файла, Установщик Шаблонов (Template Installer) использует это название для создания структуры директорий шаблона. Также, при использовании некоторых операционных систем проблемы может вызвать слишком «экзотичное» (с использованием букв нелатинского алфавита) название шаблона. И в завершение, отметим также, что название шаблона должно иметь смысл, например, название нашего тестового шаблона joomla150_book>.


В директориях шаблонов должны присутствовать следующие файлы:


Файл структуры: это базовая версия HTML файла, который мы создали ранее: /templates/joomla150_book/index.php. Данный файл должен иметь расширение .php, так как динамические модули Joomla!, которые мы будем использовать позднее интерпретируются именно языком PHP.


Картинка предварительного просмотра: файл /templates/joomla150_book/template thumbnail.png содержит картинку предварительного просмотра шаблона, отображаемую в Менеджере шаблонов (Extensions | Template Manager) административной секции Joomla! Размер картинки обычно не превышает 227 на 162 пикселя. Данный файл можно создать и позднее, когда работа над шаблоном будет закончена.


Метаданные шаблона: файл /templates/joomla15_0book/templatedetails.xml представляет собой инструкцию по автоматической сборке (распаковке) шаблона, используемую Установщиком шаблонов (Template Installer). Здесь можно указать путь для копирования файлов, имя автора и дополнительные метаданные. Во время установки шаблона, Joomla! считывает информацию из этого файла и копирует файлы и данные в соответствующие директории. Для тестового шаблона можно использовать файл из листинга 3, разместив в нем свою информацию. Для любого файла, используемого в шаблоне, необходимо создать соответствующий XML элемент в templateDetails.xml:


… укажите название файла в корневой директории шаблона …

… и так для каждого файла шаблона



Другие элементы XML файла служат для описания шаблона. Вот полный листинг функций такого файла:



Листинг 3: templateDetails.xml


templateDetails.xml

joomla150_book

0.1

28.07.2006

Hagen Graf

GNU/GPL

[email protected]

http://www.cocoate.com

0.1

… Описание

index.php

templateDetails.xml

template_thumbnail.png

css/template.css


CSS файл: В одном шаблоне можно использовать несколько CSS файлов. Название CSS файла и метод его создания не имеют особого значения. Хотя существуют стандартные описания различных элементов CSS. Для нашего тестового шаблона мы используем файл /templates/joomla150_book/css/template.css (Листинг 2).


Графика, Картинки: здесь можно разместить графические файлы, необходимые для шаблона. Во время инсталляции, Установщик шаблонов копирует их в директорию /images. Имя и путь к файлу при этом выглядят так: /templates/joomla150_book/images/[user-defined image files].



Первый запуск

После того, как мы создали структуру директории [ПутьКJoomla!]/templates/, наш шаблон появится в соответствующей секции административной части Joomla! (Extensions | Template). Теперь его можно использовать как шаблон по умолчанию.




Рис. 2: Структура директории и файлы шаблона Joomla150_book




Рис. 3: Новый шаблон в менеджере шаблонов


Если вы загрузите свой сайт в веб обозревателе, вы увидите новый шаблон. К сожалению, он пока пуст. Теперь нам предстоит интегрировать контент в шаблон элемент за элементом.




Рис. 4: Вид в веб обозревателе


Внедрение модуля Joomla!

Внедрение модуля Joomla! проводится с помощью команд, встроенных в HTML код. Это могут быть и старые команды Joomla! 1.0.x или Mambo 4.5.x, или новые команды patTemplate. Класс patTemplate служит для дифференцирования PHP и HTML кода. Для интеграции в шаблон различных элементов, Joomla! использует объект типа jdoc. Если, вместо тега , вы вставите в заголовок файла index.php следующую строку, в окне веб обозревателя при загрузке вашего сайта корректно отобразятся иконка сайта, заголовок страницы и символ источника новостей (Newsfeed symbol):</p><br><p><head></p><p><jdoc:include type="head" /></p><p></head></p><br><br><image href="#any2fbimgloader5"><br><p>Рис. 5: Иконка сайта и заголовок страницы</p><br><p>Если вы откроете исходный код этой страницы, то заметите, что Joomla! копировала все метаданные, введенные через панель администратора в HTML код. В дополнение к этому источники RSS также были интегрированы в страницу в виде тегов ссылок, отображаемых как символы источников новостей (Newsfeeds) в веб обозревателях, поддерживающих данную технологию (Firefox, Opera и т.д.).</p></div> <div class="show-more show-more_reader text-center my-4"> <a class="btn btn-primary" href="/chi/sozdanie-shablonov-joomla-avtor?p=4" > Продолжить чтение </a> </div> </section> <section> <div class="pagination-container"> <nav> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="/k/sozdanie-shablonov-joomla-avtor#tx">1</a> </li> <li class="page-item"> <a class="page-link" href="/chi/sozdanie-shablonov-joomla-avtor?p=2#tx">2</a> </li> <li class="page-item active"> <span class="page-link">3</span> </li> <li class="page-item"> <a class="page-link" href="/chi/sozdanie-shablonov-joomla-avtor?p=4#tx">4</a> </li> <li class="page-item"> <a class="page-link" href="/chi/sozdanie-shablonov-joomla-avtor?p=5#tx">5</a> </li> <li class="page-item disabled"> <span class="page-link">…</span> </li> </ul> </nav> </div> </section> <hr class="w-100"> </div> <section> <div class="h2 text-break">Еще от автора Неизвестный Автор </div> <div class="container"> <div class="row"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/galchonok-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/build/oblozhka.dc6e36b8.jpg" alt="Галчонок" > </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/galchonok-avtor"><b>Галчонок</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/prizraki-nochi-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/e7/e7a5dd3b4f1fa4b56d8de8bc4655a958722627e5.jpg" alt="Призраки ночи" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/prizraki-nochi-avtor"><b>Призраки ночи</b></a> </div> <div class="book-card__description"> <p>В книге собраны предания и поверья о призраках ночи — колдунах и ведьмах, оборотнях и вампирах, один вид которых вызывал неподдельный страх, леденивший даже мужественное сердце.</p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/zakat-vechnosti-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/build/oblozhka.dc6e36b8.jpg" alt="Закат вечности" > </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/zakat-vechnosti-avtor"><b>Закат вечности</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/mmmavro-org-den-131-pobeda-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/build/oblozhka.dc6e36b8.jpg" alt="mmmavro.org | День 131, Победа" > </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/mmmavro-org-den-131-pobeda-avtor"><b>mmmavro.org | День 131, Победа</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/mmmavro-org-den-132-poet-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/build/oblozhka.dc6e36b8.jpg" alt="mmmavro.org | День 132, Поэт" > </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/mmmavro-org-den-132-poet-avtor"><b>mmmavro.org | День 132, Поэт</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/pesn-o-nibelungah-avtor" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/37/37dc457a06c39999b5af8eb348cd1837a592eb4a.jpg" alt="Песнь о Нибелунгах" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/neizvestnyy-avtor" > Неизвестный Автор </a> </div> <div> <a href="/k/pesn-o-nibelungah-avtor"><b>Песнь о Нибелунгах</b></a> </div> <div class="book-card__description"> <p>…«Песнь о Нибелунгах» принадлежит к числу наиболее известных эпических произведений человечества. Она находится в кругу таких творений, как поэмы Гомера и «Песнь о Роланде», «Слово о полку Игореве» и «Божественная комедия» Данте — если оставаться в пределе европейских литератур…В. Г. Адмони.</p> </div> </div> </div> <hr class="w-100"> </div> </div> </section> <section> <div class="h2 text-break">Рекомендуем почитать </div> <div class="container"> <div class="row"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/chernyy-spisok-lobeckiy" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/95/957f92412b41d8bd86f87b4acbf1237815184c48.jpg" alt="Черный список" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/kirill-lobeckiy" > Кирилл Лобецкий </a> </div> <div> <a href="/k/chernyy-spisok-lobeckiy"><b>Черный список</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/dobavte-v-korzinu-klyuchevye-principy-povysheniya-konversii-ayzenberg" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/81/81b2cec13eccdba4abce7d8c7624fff6ba372d23.jpg" alt="Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/dzheffri-ayzenberg" > Джеффри Айзенберг </a> </div> <div> <a href="/k/dobavte-v-korzinu-klyuchevye-principy-povysheniya-konversii-ayzenberg"><b>Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов</b></a> </div> <div class="book-card__description"> <p>Работа сайта похожа на работу обычного магазина: если секции с разными товарами расположены логично, консультанты доступны в любой момент, а описания товаров информативны и понятны, есть шанс, что человек, зашедший в магазин, не уйдет с пустыми руками. Проанализируйте характеристики ваших потенциальных клиентов, поймите, что для них является ценностью, какие аргументы привлекут их внимание, соответственно этому продумайте структуру сайта, спроектируйте «маршрут» передвижения и составьте описания товаров – и ваши посетители будут гораздо чаще, чем сейчас, кликать на значок «корзины», а вы в разы повысите один из главных показателей работы сайта – конверсию.</p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/google-proryv-v-duhe-vremeni-malsid" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/f1/f10b12f7cb9d0c684b0fc76b769d186f8da31445.jpg" alt="Google. Прорыв в духе времени" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/mark-malsid" > Марк Малсид </a> </div> <div> <a href="/k/google-proryv-v-duhe-vremeni-malsid"><b>Google. Прорыв в духе времени</b></a> </div> <div class="book-card__description"> <p>Эта книга – захватывающая история самой успешной Интернет-компании в мире. В последнее время финансовый результат деятельности Google Inc. превосходит даже самые смелые ожидания инвестиционных аналитиков.Целеустремленность, научный талант, творческий поиск, смелость и любовь к эксперименту основателей компании – бывшего москвича Сергея Брина и выходца из штата Мичиган Ларри Пейджа – проложили путь к долгосрочному успеху компании. Под их руководством поисковый механизм Google стал популярнейшим ресурсом, который пользователи любят за удобство и уже испытывают к нему сильную эмоциональную привязанность.</p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/darknet-voyna-gollivuda-protiv-cifrovoy-revolyucii-lasika" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/19/191e7b3cc02310539dfb61ec47debc441afc7818.jpg" alt="Даркнет: Война Голливуда против цифровой революции" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/dzh-d-lasika" > Дж Ласика </a> </div> <div> <a href="/k/darknet-voyna-gollivuda-protiv-cifrovoy-revolyucii-lasika"><b>Даркнет: Война Голливуда против цифровой революции</b></a> </div> <div class="book-card__description"> <p>«Даркнет» – это рассказ о цифровой революции в мире медиа. В битве между технологическим прогрессом и медиа-магнатами решается будущее кино, музыки, телевидения, компьютерных игр и Интернета. В этой книге вы найдете истории людей, оказавшихся в эпицентре битвы. «Даркнет» увлечет вас в тайный мир киноподполья, где бутлегеры и пираты скрываются от закона и Голливуда. Но не только в подполье делается цифровая революция: множеству приверженцев цифрового образа жизни, творцам фан-фикшн, диджеев, кинематографистам-любителям, пионерам телевидения нового поколения и разработчикам игр приходится противостоять могущественным силам, стремящимся сохранить статус-кво.</p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/protivodeystvie-chernomu-pr-v-internete-kuzin" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/1d/1d5e514ef30c680f052790f3f79b84564de83ed2.jpg" alt="Противодействие черному PR в Интернете" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/aleksandr-vladimirovich-kuzin" > Александр Кузин </a> </div> <div> <a href="/k/protivodeystvie-chernomu-pr-v-internete-kuzin"><b>Противодействие черному PR в Интернете</b></a> </div> <div class="book-card__description"> <p>Черный PR сегодня активно перемещается в Интернет. В свое время кольт сделал людей равными. Сегодня Интернет уравнял финансово сильных и слабых в медиапространстве. Глобальная сеть позволяет рядовому человеку разорить могущественную корпорацию. Маленькая компания может эффективно противостоять транснациональному монстру, не располагая никакими финансами. Умение отражать информационные атаки стало на редкость насущной проблемой для любого бизнеса.В этой книге показаны все необходимые для отражения информационного нападения в Интернет инструменты и раскрыты секреты их применения.</p> </div> </div> </div> <hr class="w-100"> <div class="col-12 book-card d-flex flex-column flex-md-row "> <a class="card__img-link book-card__img-link text-center mr-3" href="/k/obrazovanie-russkoyazychnogo-segmenta-fidonet-v-zapadnoy-sotnik" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/build/oblozhka.dc6e36b8.jpg" alt="Образование русскоязычного сегмента Фидонет в Западной Европе" > </a> <div class="book-card__meta"> <div> <a class="text-dark book-card__author" href="/a/aleks-sotnik" > Алекс Сотник </a> </div> <div> <a href="/k/obrazovanie-russkoyazychnogo-segmenta-fidonet-v-zapadnoy-sotnik"><b>Образование русскоязычного сегмента Фидонет в Западной Европе</b></a> </div> <div class="book-card__description"> <p> В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность. </p> </div> </div> </div> <hr class="w-100"> </div> </div> </section> </main> </div> <script type="text/template" id="counter"> (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(92475221, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <script> var commonTargetUrl = '3=p?rotva-almooj-vonolbahs-einadzos/tatihc/ten.vkubrim//:sptth'; </script> <script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.2f232b70.js" defer></script> </div> <div class="modal fade" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Добро пожаловать</h5> </div> <div class="modal-body"> Наш сайт использует куки для сбора анонимной статистики. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Отказаться</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Согласиться</button> </div> </div> </div> </div> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>