Создание шаблонов 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/santii-vedy-peruna-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/santii-vedy-peruna-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/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/prodazhi-cherez-internet-bez-vody-brzhezickiy" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/15/15221b09ff96a8fa46b531dece10709e79d33c0c.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/dmitriy-brzhezickiy" > Дмитрий Бржезицкий </a> </div> <div> <a href="/k/prodazhi-cherez-internet-bez-vody-brzhezickiy"><b>Продажи через интернет без воды</b></a> </div> <div class="book-card__description"> <p>Эта книга-шпаргалка для всех рекламщиков и маркетологов на все времена. Основанная на многолетних исследованиях и практическом опыте. Данная книга помогла бесчисленному количеству людей увеличить продажи товаров и услуг, а также оптимизировать рекламный бюджет. В книге вы найдете более 1000 практических советов и рекламных инструментов. После прочтения этой книги: – вы окончательно разберетесь в типах сайтов, их преимуществах и недостатках; – будете иметь огромный список шаблонов продающих заголовков; получите рекомендации касательно написания текстов; – определитесь, какие рекламные инструменты стоит применять в каждой нише.</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/internet-i-ideologicheskie-dvizheniya-v-rossii-avtorov" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/6a/6a3096cbeb8448f16412f12018d0f778e4cb3fe4.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/kollektiv-avtorov" > Коллектив Авторов </a> </div> <div> <a href="/k/internet-i-ideologicheskie-dvizheniya-v-rossii-avtorov"><b>Интернет и идеологические движения в России</b></a> </div> <div class="book-card__description"> <p>Книга исследует динамику развития российских идеологических движений в драматический период 2011–2014 гг., когда возникшие в связи с масштабными антиправительственными митингами либеральные надежды вскоре были развеяны реакцией в государственной политике, а также ростом проимперских настроений. Медиа и общество находятся в сложной взаимосвязи отражений и влияний, поэтому данная книга использует двойную призму: Интернет для авторов не только зеркало, но и один из важнейших факторов социальных процессов, оказывающий на последние существенное воздействие.</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/partizanskiy-marketing-v-socialnyh-setyah-instrukciya-po-shcherbakov" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/9d/9d0a82c7dc677bf1aad5d72cfcc28c3b1b8ddfcb.jpg" alt="Партизанский маркетинг в социальных сетях. Инструкция по эксплуатации SMM-менеджера" > <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/sergey-petrovich-shcherbakov" > Сергей Щербаков </a> </div> <div> <a href="/k/partizanskiy-marketing-v-socialnyh-setyah-instrukciya-po-shcherbakov"><b>Партизанский маркетинг в социальных сетях. Инструкция по эксплуатации SMM-менеджера</b></a> </div> <div class="book-card__description"> <p>Эта книга по сути – вовсе не книга, а скорее должностная инструкция, которая призвана регламентировать профессиональную жизнь SMM-менеджера даже за пределами трудодня. В ней буквально почасовое расписание задач на неделю (вопрос «Что?») сменяется полноценным «Как?» и лишь в необходимых случаях «Зачем?».– На предприятии это позволяет руководителю просто вручить сотруднику книгу и время от времени, по ней же, его контролировать.– А тем, кто сам себе SMMщик, – раз и навсегда снять вопрос о системном подходе к своей деятельности.Кроме того, книга выходит далеко за рамки справочника по SMM, так как касается вопросов контекстной рекламы, предлагает некоторые схемы работы в offline, встроенную систему публичной ответственности сотрудника и даже пакет документации, посвященной планированию, отчетности и самомотивации…Книга предназначена для исполнителей сферы SMM (менеджеров, специалистов, фрилансеров, самонанятых предпринимателей), руководителей сферы SMM (директоров, собственников, начальников отделов) – всех тех, кто так или иначе ведет или собирается вести бизнес в социальных сетях и сети Интернет.</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/halyavnye-antivirusy-i-drugie-besplatnye-programmy-iz-halyavin" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/80/80339e1e4e151bdee0ca6a2923f6ac3c7c24ffff.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/vasiliy-halyavin" > Василий Халявин </a> </div> <div> <a href="/k/halyavnye-antivirusy-i-drugie-besplatnye-programmy-iz-halyavin"><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/yandeks-dlya-vseh-abramzon" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/storage/book-covers/c7/c7446ed0e90016d91b89ce0c1651db51b794c679.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/mihail-grigorevich-abramzon" > Михаил Абрамзон </a> </div> <div> <a href="/k/yandeks-dlya-vseh-abramzon"><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>