Создание базового шаблона Joomla
Вступление
Данное руководство дает базовые понятия о том, с чего начинается создание шаблона для Joomla. Оно охватывает важные файлы и код, необходимый для создания базового шаблона. Весь код шаблона будет представлен ниже, поэтому вы с легкостью можете скопировать его и вставить, внеся небольшие изменения.
Создание структуры файлов и папок
Для того, чтобы создать базовый шаблон, создайте новую папку в папке шаблонов Joomla (templates) и назовите ее, например mynewtemplate.
Используя любимый текстовый редактор создайте файлы index.php и templateDetails.xml. Так же необходимо создать две папки images и css, в папке css создайте файл template.css
Хотя и допускается описывать стили непосредственно в самом index.php файле, но настоятельно рекомендуется выносить стили в отдельный css файл, который подключается на страницу посредством тега <link>. Это так же может значительно сократить время загрузки страниц, так как отдельный фал можно кешировать.
Основная структура файлов и папок
Структура файлов шаблона выглядит так:
- image/
- index.html
- css/
- index.html
- index.html
- index.php
- templateDetails.xml
image - папка для изображений, css - папка для стилей, index.html - файл-заглушка (служит для безопасности, предотвращает просмотр содержимого папки через браузер), templateDetails.xml - метаданные шаблона, ну и, собственно, сам index.php - основной файл шаблона, в котором будут созданы позиции и основная разметка.
Обратите внимание на то, что html-заглушка лежит во всех директориях шаблона, это нужно для защиты от просмотра содержимого папки.
Создание основного файла templateDetails.xml
Файл templateDetails.xml очень важен, без него ваш шаблон не будет виден в Joomla. Файл содержит метаданные о шаблоне. Синтаксис файла отличается в разных версиях joomla.
Для версии 1.5 используйте:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
Для версии 2.5 и старше:
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>
Итак, как вы видите, мы задали всю информацию между тегами (<элемент>). Проще всего будет скопировать вышестоящий код и вставить его в свой templateDetails.xml, внеся свои изменения (такие как <name> и <author>).
Часть <files>должна содержать все файлы, которые вы будете использовать. Возможно вы еще не знаете какие точно файлы будут использоваться в шаблоне, вы в любой момент можете обновить и дополнить файл. Элемент <folder> служит для объявления всех папок шаблона.
Позиции оставьте как есть - это стандартный набор, благодаря чему вы легко сможете переключиться на ваш шаблон со стандартного.
Создание базового index.php файла.
Данное руководство для версий Joomla! CMS 2.5 и 3.x
Файл index.php станет ядром всех страниц сайта, которые будут созданы Joomla. По сути, вы должны создать страницу, так же как вы создаёте любую страницу HTML, но поместить PHP код там, где должен быть контент вашего сайта. Шаблон добавляет сгенерированный Joomla код в заданные позиции модулей и секцию component, указанных в вашем шаблоне. Все, что добавлено в шаблон, будет выводится на всех страницах, за исключением того, что будет сгенерировано Joomla в соответствующие секции (или пользовательский код).
Ниже представлен скелет кода страницы, который вы можете скопировать в свой шаблон.
Начало
Любой шаблон Joomla начинается со следующих строк.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Первая строка нужна для предотвращения попыток взлома, она предотвращает просмотр кода страницы. Вторая строка сообщает браузеру какой тип документа используется на странице. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу. Использование doctype HTML 5 или выше, во многом обратно совместима с предыдущими версиями HTML, но так же позволяет использовать новые нововведения. Вы должны знать, что этот тип документа не поддерживается в Internet Explorer 8 и более ранних, без специального "хака". Возможно вам придется подумать о том какой тип документа лучше использовать в той или иной ситуации, или учесть предпочтения ваших клиентов. Однако HTML 5 используется в Joomla 3.x и выше из коробки.
Третья строка - это не что иное, как начало нашего HTML документа, с описанием, какой язык используется на страницах сайта. HTML документ разделен на две части: head и body. В head будет содержаться информация о странице (мета теги), а body содержит код страницы.
Head
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> </head>
Первые строки нужны для того, чтобы Joomla корректно выводила информацию тега head. Она включает в себя заголовок страницы, все мета-теги, а также здесь подключается JavaScript. Остальные строки подключают две системные таблицы стилей (CSS), а также вашу собственную (если она называется template.css и располагается в папке css вашего шаблона. Например, если ваш шаблон http://www.mysite.com/templates/my_template/, то стили будут расположены в папке http://www.mysite.com/templates/my_template/css).
Body
<body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body>
Удивительно, но это все! Конечно же это только базовый шаблон страницы, но и этого достаточно для того, чтобы он работал. Все остальное сделать Joomla! В этих строках, обычно, вызывается JDoc (метод отображения содержимого (модуля) на странице), указывающий Joomla о необходимости вывода данных из определенных частей (модулей) системы. Примечаение: Убедитесь, что в данном шаблоне, вывод модуля меню осуществляется в позицию "top".
Позиции модулей
Выше в строке, содержащей name="top", добавляется позиция модуля названная "top", позволяющая добавлять модуль в эту секцию шаблона. Строка Type="component" содержит в себе все статьи и основной контент страницы (на самом деле, это Component, своего рода базовое расширение Joomla) и она очень важна. Он располагается в центре страницы.
Примечание: Вы можете добавить строки своего модуля в body там, где захотите, но вы должны добавить соответствующие строки в templateDetails.xml, который лежит рядом с index.php вашего шаблона.
Завершающий этап
Завершите его последней строкой:
</html>
Пользовательское изображение
Если вы хотите добавить какое-то изображение в шаблон, вы должны сделать следующее:
<img src="/<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" class="customImage" />
Здесь переменная baseurl подставит путь к вашему шаблону за вас.
Пользовательский CSS
Вы можете добавлять свой css файл, следующим образом:
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />
Каждый файл, который вы добавите, должен иметь соответствующую строку в templateDetails.xml вашего шаблона.
Теперь ваш файл должен иметь такой вид:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body> </html>
Тестирование шаблона
Найдите шаблон в Менеджере Шаблонов, выберете его и нажмите "Установить по умолчанию", чтобы сделать его шаблоном по умолчанию.
В Joomla 1.5 ваш шаблон будет сразу доступен в Менеджере Шаблонов (Template Manager) Joomla, доступный в меню Расширения -> Менеджер шаблонов (Extensions -> Template Manager.).
В версии Joomla 2.5 и более поздних, вы сначала должны сообщить Joomla о том, что вы создали новый шаблон. Эта функция вызывается через Поиск Расширений (Discover Extensions), вызываемая через Расширения - > Менеджер Расширений -> Поиск (Extensions -> Extension Manager -> Discover) (т.е. вкладка поиск). Нажмите на Поиск, (т.е. на кнопку Поиск) чтобы найти ваш шаблон, затем нажмите Установить, чтобы установить его. Теперь ваш шаблон должен появиться в Менеджере Шаблонов, вызываемый через Расширения -> Менеджер Шаблонов (Extensions -> Template Manager).
Внимание: Вы можете создавать шаблон отдельно от Joomla и просто установить его как любое расширение.
Совет: Есть несколько способов, которые позволяют предварительно посмотреть, как будет выглядеть ваш шаблон - это или вставить стили непосредственно в тег head вашего шаблона, или временно напрямую подключить таблицу стилей через мета-тег link.
Упаковка шаблона для установки
Комментарии
Does running a well-establishe d website such as yours take a massive amount work?
I am brand new to writing a blog however I do write in my
diary on a daily basis. I'd like to start a blog so I will be able to share my personal experience and
views online. Please let me know if you have any kind of recommendations or tips for new aspiring blog owners.
Appreciate it!
He was entirely right. This post truly made my
day. You can not imagine just how much time I had spent for this information! Thanks!
may as well check things out. I like what I see so now i'm following you.
Look forward to looking at your web page yet again.
Extremely helpful info specifically the last part :) I care
for such information a lot. I was looking for this certain info for a very long time.
Thank you and best of luck.
this web site is really pleasant and the visitors are truly sharing pleasant thoughts.
here it takes place.
around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!
but your sites really nice, keep it up! I'll go ahead and bookmark your site to come back in the future.
Cheers
Extremely helpful info particularly the last part :) I care for such info a lot.
I was looking for this certain information for a very long time.
Thank you and good luck.
You must proceed your writing. I'm confident, you've a huge readers' base already!
not sure whether this post is written by him as no one
else know such detailed about my trouble. You are wonderful!
Thanks!
know I am getting experience every day by reading thes fastidious posts.
I have joined your feed and look ahead to in the hunt for extra of your great post.
Additionally, I've shared your website in my social networks
articles. I'll bookmark your blog and check again here frequently.
I'm quite certain I will learn lots of new stuff right here!
Best of luck for the next!
as a finest site for newest updates.
should also visit this web site on regular basis to get updated from newest news update.
News. Do you have any tips on how to get listed in Yahoo News?
I've been trying for a while but I never seem to get there!
Many thanks
web. You certainly know how to bring an issue to
light and make it important. More and more people should look at this and understand this side of your story.
I was surprised you're not more popular since you definitely have the gift.
I'll be sure to bookmark it and return to read more of your
helpful info. Thank you for the post. I will definitely return.
Keep it up!
Short but very accurate information… Thank you for sharing this one.
A must read article!
Extremely useful information particularly the last part :) I care for
such info much. I used to be seeking this certain information for a very lengthy time.
Thank you and best of luck.
for providing this information.
Simple but very accurate information… Many thanks for sharing this one.
A must read article!
Do you have any suggestions on how to get listed in Yahoo News?
I've been trying for a while but I never seem to get there!
Thank you
you ought to write more on this subject, it might not be a taboo subject but usually folks don't speak about such issues.
To the next! Many thanks!!
well as from our argument made at this place.
methods to your won web site.
the best I've discovered so far. However, what in regards to the conclusion? Are you sure concerning
the supply?
Reading this post reminds me of my good old room mate!
He always kept talking about this. I will forward this article to him.
Fairly certain he will have a good read. Thank you for sharing!
web site or even a weblog from start to end.
be just what I'm looking for. Does one offer guest writers to write content for yourself?
I wouldn't mind composing a post or elaborating on a few
of the subjects you write in relation to here.
Again, awesome site!
you have here on this post. I will be coming back to your site for
more soon.
В предложении ошибка
Сайт шустро работает, и проекты интересные
RSS лента комментариев этой записи