×

Внимание

Ваш браузер . Для корректного серфинга сети рекомендуем установить один из современных браузеров Chrome или Firefox.

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Создание базового шаблона 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.

 

Упаковка шаблона для установки

 

Добавить комментарий


Защитный код
Обновить

Комментарии   

Boguslaw Lubanski
0 # Boguslaw Lubanski 07.07.2017 03:19
Hi, I do think this is a great website. I stumbledupon it
;) I'm going to return once again since i have bookmarked it.
Money and freedom is the best way to change, may you
be rich and continue to help others.
Ответить | Ответить с цитатой | Цитировать
Jan Pawel Bienias
0 # Jan Pawel Bienias 06.07.2017 20:16
Hello! Someone in my Facebook group shared this website
with us so I came to look it over. I'm definitely enjoying the information.
I'm bookmarking and will be tweeting this to my followers!

Great blog and fantastic design and style.
Ответить | Ответить с цитатой | Цитировать
Eliot Stefanowski
0 # Eliot Stefanowski 06.07.2017 07:17
Hello! I understand this is sort of off-topic but I had to ask.
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!
Ответить | Ответить с цитатой | Цитировать
Bogusz Kalużna
0 # Bogusz Kalużna 06.07.2017 01:16
My brother recommended I might like this website.
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!
Ответить | Ответить с цитатой | Цитировать
Romeo Pruski
0 # Romeo Pruski 05.07.2017 15:39
We stumbled over here from a different web address and thought I
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.
Ответить | Ответить с цитатой | Цитировать
Lucjusz Piecyk
0 # Lucjusz Piecyk 05.07.2017 12:09
Excellent post. I was checking continuously this blog and I am impressed!

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.
Ответить | Ответить с цитатой | Цитировать
Joachim Grochal
0 # Joachim Grochal 05.07.2017 06:39
What's up it's me, I am also visiting this site on a regular basis,
this web site is really pleasant and the visitors are truly sharing pleasant thoughts.
Ответить | Ответить с цитатой | Цитировать
Odo Jurkowski
0 # Odo Jurkowski 05.07.2017 00:05
Truly no matter if someone doesn't know then its up to other viewers that they will assist, so
here it takes place.
Ответить | Ответить с цитатой | Цитировать
Cyprian Glodek
0 # Cyprian Glodek 04.07.2017 21:16
Pretty nice post. I just stumbled upon your blog and wanted to mention that I have really loved surfing
around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!
Ответить | Ответить с цитатой | Цитировать
Ryszard Rosiak
0 # Ryszard Rosiak 04.07.2017 17:24
I’m not that much of a online reader to be honest
but your sites really nice, keep it up! I'll go ahead and bookmark your site to come back in the future.
Cheers
Ответить | Ответить с цитатой | Цитировать
Samuel luszczynski
0 # Samuel luszczynski 04.07.2017 09:28
Thanks for finally talking about >Создание базового шаблона Joomla
Ответить | Ответить с цитатой | Цитировать
Jan Jozef smiech
0 # Jan Jozef smiech 04.07.2017 06:37
Great post. I was checking continuously this blog and I'm impressed!
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.
Ответить | Ответить с цитатой | Цитировать
Horacy Grzeda
0 # Horacy Grzeda 04.07.2017 02:35
fantastic publish, very informative. I wonder why the opposite experts of this sector do not notice this.
You must proceed your writing. I'm confident, you've a huge readers' base already!
Ответить | Ответить с цитатой | Цитировать
Marcus Sekula
0 # Marcus Sekula 03.07.2017 04:49
I was suggested this blog by my cousin. I am
not sure whether this post is written by him as no one
else know such detailed about my trouble. You are wonderful!

Thanks!
Ответить | Ответить с цитатой | Цитировать
Boleslaw Szafranski
0 # Boleslaw Szafranski 03.07.2017 02:36
My family all the time say that I am killing my time here at net, except I
know I am getting experience every day by reading thes fastidious posts.
Ответить | Ответить с цитатой | Цитировать
Emilian Frak
0 # Emilian Frak 02.07.2017 17:22
This is very fascinating, You are a very professional blogger.

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
Ответить | Ответить с цитатой | Цитировать
Oktawian Napierala
0 # Oktawian Napierala 02.07.2017 09:10
I like the helpful information you provide in your
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!
Ответить | Ответить с цитатой | Цитировать
Makary Golebiowski
0 # Makary Golebiowski 02.07.2017 06:19
For latest information you have to pay a quick visit internet and on internet I found this web page
as a finest site for newest updates.
Ответить | Ответить с цитатой | Цитировать
Kosma Starzec
0 # Kosma Starzec 02.07.2017 02:54
I'm gone to inform my little brother, that he
should also visit this web site on regular basis to get updated from newest news update.
Ответить | Ответить с цитатой | Цитировать
Stanislaw Fraczek
0 # Stanislaw Fraczek 01.07.2017 23:55
Wonderful blog! I found it while browsing on Yahoo
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
Ответить | Ответить с цитатой | Цитировать
Kolin Musiol
0 # Kolin Musiol 01.07.2017 21:32
Can I simply say what a relief to discover someone that truly understands what they are discussing on the
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.
Ответить | Ответить с цитатой | Цитировать
WhiskeyMan
0 # WhiskeyMan 01.07.2017 19:21
Thank you all, I tried ;)
Ответить | Ответить с цитатой | Цитировать
Oliwier Tomaszewski
0 # Oliwier Tomaszewski 01.07.2017 18:48
Hello There. I discovered your weblog the use of msn. That is an extremely well written article.
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.
Ответить | Ответить с цитатой | Цитировать
Odolan Blaszczyk
0 # Odolan Blaszczyk 01.07.2017 15:22
Very good post. I certainly love this website.
Keep it up!
Ответить | Ответить с цитатой | Цитировать
Denis Wojcicki
0 # Denis Wojcicki 01.07.2017 12:55
That is a very good tip especially to those new to the blogosphere.
Short but very accurate information… Thank you for sharing this one.
A must read article!
Ответить | Ответить с цитатой | Цитировать
Florian Jaworek
0 # Florian Jaworek 01.07.2017 09:55
Excellent post. I used to be checking constantly this blog and I'm inspired!
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.
Ответить | Ответить с цитатой | Цитировать
Saturnin Malachowski
0 # Saturnin Malachowski 01.07.2017 05:11
Pretty! This was an extremely wonderful post. Many thanks
for providing this information.
Ответить | Ответить с цитатой | Цитировать
Michal Jozefowicz
0 # Michal Jozefowicz 01.07.2017 02:50
That is a great tip particularly to those fresh to the blogosphere.

Simple but very accurate information… Many thanks for sharing this one.
A must read article!
Ответить | Ответить с цитатой | Цитировать
Arseniusz Pytlak
0 # Arseniusz Pytlak 30.06.2017 19:20
Wonderful blog! I found it while surfing around on Yahoo News.
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
Ответить | Ответить с цитатой | Цитировать
Jozef Twardowski
0 # Jozef Twardowski 30.06.2017 16:38
A motivating discussion is worth comment. I think that
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!!
Ответить | Ответить с цитатой | Цитировать
Leo Wasielewski
0 # Leo Wasielewski 14.06.2017 05:08
It's great that you are getting thoughts from this post as
well as from our argument made at this place.
Ответить | Ответить с цитатой | Цитировать
Anatol Dyrda
0 # Anatol Dyrda 14.06.2017 00:49
If you wish for to obtain a great deal from this piece of writing then you have to apply such
methods to your won web site.
Ответить | Ответить с цитатой | Цитировать
Samuel Cieplinski
0 # Samuel Cieplinski 11.06.2017 07:51
Thank you, I have recently been searching for information approximately this subject for a while and yours is
the best I've discovered so far. However, what in regards to the conclusion? Are you sure concerning
the supply?
Ответить | Ответить с цитатой | Цитировать
Julian Lisiak
0 # Julian Lisiak 10.06.2017 12:16
Keep this going please, great job!
Ответить | Ответить с цитатой | Цитировать
Kornel Ludwikowski
0 # Kornel Ludwikowski 08.06.2017 23:00
Hi there! This post could not be written any better!
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!
Ответить | Ответить с цитатой | Цитировать
Milan Koziarski
0 # Milan Koziarski 29.05.2017 17:39
This post will assist the internet viewers for setting up new
web site or even a weblog from start to end.
Ответить | Ответить с цитатой | Цитировать
Bastian Plotka
0 # Bastian Plotka 26.05.2017 12:51
Good article. I am dealing with many of these issues as well..
Ответить | Ответить с цитатой | Цитировать
Radoslaw Formela
0 # Radoslaw Formela 17.05.2017 19:09
We absolutely love your blog and find the majority of your post's to
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!
Ответить | Ответить с цитатой | Цитировать
Dominik Urbanik
0 # Dominik Urbanik 15.05.2017 20:30
Hi! I just want to give you a huge thumbs up for your great info
you have here on this post. I will be coming back to your site for
more soon.
Ответить | Ответить с цитатой | Цитировать
WhiskeyMan
0 # WhiskeyMan 31.07.2013 12:29
Спасибо за отзывы. Ошибки в Tipsy CMS исправляю позже, сейчас нет времени заниматься написанием CMS, одному тяжело.
Ответить | Ответить с цитатой | Цитировать
Anonymous
0 # Anonymous 30.07.2013 16:14
Домашняя страница проета Tipsy cms
В предложении ошибка

Сайт шустро работает, и проекты интересные
Ответить | Ответить с цитатой | Цитировать
Anonymous
0 # Anonymous 30.07.2013 16:05
Вы уже в google по запросу создание joomla
Ответить | Ответить с цитатой | Цитировать
Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter