Як створити свій власний шаблон для Joomla 2.5 і Joomla 3

1. Де знаходяться шаблони Joomla?
2. З чого почати?
3. Index.php - головний файл шаблону
4. Як додати нову позицію для модуля?
5. Як прибрати порожню колонку?
6. Налаштування файлу templateDetails.xml - інсталяційний пролог
7. Упаковка шаблону для інсталяції
8. Інші статті по темі шаблонів в Joomla
9. Стаття виявилася вам корисною? Підпишіться, щоб не пропустити нові!

Наша взаимовыгодная связь https://banwar.org/

Замітка: активована адаптивна версія сайту, яка автоматично підлаштовується під невеликий розмір Вашого браузера і приховує деякі деталі сайту для зручності читання. Приємного перегляду!

03.12.2013

Привіт, дорогі читачі! Через мого від'їзду у нас з вами вийшов знову довгий проміжок між виходом нових статей. Не знаю як ви, а я скучив і тому сьогодні ми розглянемо дуже важливу тему, без якої, як я вважаю, створити якісний сайт на Joomla просто неможливо!

Так, сьогодні ми навчимося створювати свої власні шаблони для Joomla версії 2.5 і вище. Та не просто аби які, а щоб їх потім і продавати не соромно було! Але щоб так голосно говорити, потрібно спочатку добре попрацювати, а тому я планую написати цикл статей по цій темі, щоб максимально занурити вас в дану атмосферу.

Тезово про те, чому свій шаблон завжди краще завантаженого:

• Швидше завантажується;
• Не містить прихованих посилань і вірусів;
• Авторські права належать вам;
• Налаштуйте його так, як душа забажає, ніяких обмежень!

Але натомість від вас будуть потрібні:

• Мінімальні знання PHP, раджу заглянути сюди ;
• Хоча б середні знання HTML і CSS;
• Дочитати цю статтю, і підписатися, щоб стежити за продовженням.

Зовсім не знаєте PHP? Нічого страшного, дочитавши статтю, ви зможете робити все по аналогії.

Тож почнемо!

Де знаходяться шаблони Joomla?

Існують 2 види шаблонів для Joomla: front-end (лицьова сторона) і back-end (адміністративна панель). Щоб не розтягувати статтю до непристойності, сьогодні ми розглянемо тільки front-end, тобто ту частину сайту, яка створена для користувачів (ваших клієнтів), а не для адміністраторів.

Так ось все front-end шаблони знаходяться в папці / templates /, в ній є кілька папок, одна з яких system (її не чіпаємо), а всі інші папки - це і є встановлені нами (або за замовчуванням) шаблони.

З чого почати?

У себе на локальному комп'ютері, в будь-якому місці, де вам зручно, створіть нову папку і назвіть її так, як буде називатися ваш шаблон.

Увага:
в назвах файлів і папок краще завжди уникати прогалин та інших символів крім цифр, латинського алфавіту, дефіса та символу підкреслення.

Я все роблю разом з вами і назву свою папку site-on. Далі в цій папці ви можете створювати скільки завгодно будь-яких інших файлів і папок. Але є 2 обов'язкових файлу - це index.php і templateDetails.xml

Створіть їх і поки що залиште порожніми, далі (це вже не обов'язково) я раджу створити вам папку images, куди ми будемо складати всю графіку (картинки), з якої буде складатися наш шаблон.

Увага:
кожна папка вашого сайту повинна містити порожній файл index.html, це прийом для захисту від парсинга директорій. До речі, на хостингу "Україна" це реалізовано на рівні сервера, але завжди потрібно розраховувати тільки на себе, тим більше не на всіх хостингах буде ця опція.

Далі в англомовній документації для розробників нам пропонують створити ще окрему папку для наших CSS файлів. З точки зору програмування - мати безліч різних CSS файлів і підключати необхідні з них в потрібні моменти - логічніше, ніж тримати все в одному файлі.

Але ті, хто читав мою статтю про створення правильного SEO макета сайту , Знають, що кожен HTTP запит для підключення файлів займає достатню кількість часу, щоб в результаті сильно уповільнити завантаження сторінок вашого сайту. Тому на практиці все виграють, якщо CSS файл буде один на весь сайт.

Тому ми не будемо створювати окрему папку для CSS файлів, а створимо наш файл стилів прямо в корені шаблону, заодно і шлях до нього буде коротше :)

Назвати його можна як завгодно: в стилі Джумли належить назвати його template.css, але слово template занадто довге, тому я люблю називати свої файли в стилі WordPress - style.css

І останній нюанс, давайте створимо папку html - це зарезервоване назву папки в системі шаблонів Джумла. В папку html ми будемо розміщувати файли альтернативних макетів тій чи іншій частині сайту. Наприклад, альтернативний макет для категорії товарів VirtueMart, або альтернативний макет меню - неважливо. Детальніше про це в наступних статтях, а зараз головне, що ви дізналися про цю папці, і побачивши її в чужих шаблонах, хоч трохи представите про що йдеться.

Не забудьте і в неї помістити порожній index.html!

Отже, ми створили повноцінну структуру шаблону для Джумла, залишилося лише наповнити келихи файли вмістом.

Index.php - головний файл шаблону

Файл index.php шаблону завантажується кожен раз, коли відвідувач заходить на ваш сайт. Це фундамент макета вашого сайту, його скелет. Ось, як приблизно має виглядати цей файл на початку шляху:

<? Php defined ( '_JEXEC') or die; ?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ru-ru" lang = "ru-ru" dir = "ltr"> <head> <jdoc: include type = "head" / > <link rel = "stylesheet" href = "/ templates / system / css / system.css" type = "text / css" /> <link rel = "stylesheet" href = "/ templates / system / css / general. css "type =" text / css "/> <link rel =" stylesheet "href =" / templates / <? php echo $ this-> template;?> / style.css "type =" text / css "/> </ head> <body> <jdoc: include type = "message" /> <jdoc: include type = "component" /> </ body> </ html>

Перший рядок - це захист від прямого звернення до файлів, більш докладно про це я писав у статті про константи в PHP . Цей рядок обов'язкове, якщо не хочете, щоб вас зламали.

2 і 3 рядки - вказуємо тип документа для браузерів, можете змінити на свій, в даному прикладі тип документа XHTML 1.0, мова - російська, правопис: зліва направо.

Далі йде блок head, в 5 рядку ми підключаємо метод Джумли, який виводить необхідну інформацію в голові сайту (title сторінки, мета-теги, css і js файли модулів і компонентів). Цей рядок обов'язкове!

У 6-8 рядках ми підключаємо стилі нашого сайту, 6-7 рядки - це стандартні стилі Джумла (раджу їх підключити, хоча необов'язково), а 8 рядок, це створений нами style.css

11 рядок - це висновок системних повідомлень Джумли. Наприклад, повідомлення про помилки при реєстрації (невірний пароль, непідтверджений адресу електронної пошти), а також різні підказки. Вона не обов'язкова, але насправді я строго рекомендую її залишити, так як такі повідомлення дуже сильно допомагають вашим користувачам, так і вам в тому числі.

12 рядок - це висновок основної інформації сторінки (тексту статті, картки товару і тд.). Якщо говорити термінами джумли, то висновок компонента для кожної сторінки. Вона обов'язкова.

Як додати нову позицію для модуля?

Вище ми розглянули найпростішу структуру файлу index.php, ви вже можете використовувати її як каркас для створення власних шаблонів. Тепер розберемося, як додавати позиції для модулів, якими так люблять хвалитися виробники шаблонів: "Наш шаблон містить 69 продуманих позицій ..."

Щоб не копіювати зайвого, повернемося до блоку body:

<Body> <jdoc: include type = "message" /> <jdoc: include type = "component" /> </ body>

Чого не вистачає нашому макету? Я думаю шапки, пари колонок і підвалу (футер, footer). Давайте створимо для них позиції модулів:

<Body> <jdoc: include type = "modules" name = "top-menu" /> <jdoc: include type = "modules" name = "left-column" /> <jdoc: include type = "message" /> <jdoc: include type = "component" /> <jdoc: include type = "modules" name = "right-column" /> <jdoc: include type = "modules" name = "footer" /> </ body>

Ми створили 4 нових позиції для модулів Джумли:

• top-menu
• left-column
• right-column
• footer

Після установки шаблону всі ці позиції будуть доступні при виборі позиції модуля з адміністративної панелі Джумли.

Але це був короткий варіант створення модуля. Насправді в тих позиціях, де ви збираєтеся відображати кілька модулів один за іншим, наприклад, в правій і лівій колонках сайту, буде зручно використовувати «обрамлення модуля» (оригінальна назва: module chrome).

Обрамлення (обгортка) модуля - це HTML структура, в яку буде обгорнутий наш модуль при виведенні в конкретної позиції. Обрамлення служить для зручності стилізації при верстці і розширює можливості виведення. Щоб краще зрозуміти, просто порівняйте 2 варіанти виведення одного і того ж модуля. Перед вами стандартний модуль меню (складається з 2-ох пунктів меню) без використання module chrome:

<Ul class = "menu"> <li class = "item-104 current active"> <a href="/"> Головна </a> </ li> <li class = "item-105"> <a href = "/ vasha-korzina"> Ваша корзина </a> </ li> </ ul>

З використанням module chrome:

<Div class = "moduletable_menu"> <h3> Верхнє меню </ h3> <ul class = "menu"> <li class = "item-104 current active"> <a href="/"> Головна </a> </ li> <li class = "item-105"> <a href="/vasha-korzina"> Ваша корзина </a> </ li> </ ul> </ div>

Відмінностей не так вже й багато, але вони є і грають свою роль, по-перше, при використанні module chrome у нас на сторінці з'явилася назва, яке ми записали в адміністративній панелі для цього модуля: «Верхнє меню» (див. Попередню картинку) .

По-друге, весь модуль обернувся в тег div з класом moduletable_menu.

Мені відома тільки одна обгортка, якою всі користуються, вона була представлена в прикладі вище і називається xhtml (це просто назва, не проводьте аналогій з мовою розмітки XHTML).

Щоб обернути наші модулі, ми повинні до тегу позиції додати атрибут style з назвою потрібної обгортки (не плутайте з атрибутом style в мові HTML, вони не мають нічого спільного, в нашому випадку - це чисто синтаксис Joomla):

<Jdoc: include type = "modules" name = "left-column" style = "xhtml" />

Обгортки, як і шаблони, теж можна створювати самим, але про це в наступній статті, а тепер давайте додамо трохи лиску нашому макету:

<Body> <div id = "layout"> <div id = "header"> <jdoc: include type = "modules" name = "top-menu" /> </ div> <div id = "left"> < jdoc: include type = "modules" name = "left-column" style = "xhtml" /> </ div> <div id = "content"> <jdoc: include type = "message" /> <jdoc: include type = "component" /> </ div> <div id = "right"> <jdoc: include type = "modules" name = "right-column" style = "xhtml" /> </ div> <div class = " clear "> </ div> <div id =" footer "> <jdoc: include type =" modules "name =" footer "style =" xhtml "/> </ div> </ div> </ body>

А в файл style.css напишемо:

* {Margin: 0; padding: 0;} #layout {width: 990px; margin: 0 auto;} #header {margin-bottom: 20px;} #header ul {text-align: center;} #header ul li { list-style: none; display: inline-block; margin: 0 5px;} # left, # content, # right {float: left;} #left {width: 176px;} #content {width: 610px; margin: 0 10px;} #right {width: 176px;} #footer {margin-top: 20px;} # header, # left, # content, # right, # footer {border: 1px solid grey;} .clear {clear: both; }

І в результаті у мене вийшов ось такий макет:

Але ви на даному етапі не можете звіритися, тому в кінці я обов'язково викладу для вас вийшов шаблон.

Як прибрати порожню колонку?

На скріншоті я через адмін. панель додав кілька модулів в позицію right-column і кілька модулів в позицію left-column. Але що робити, якщо ви хочете, наприклад, мати 3 колонки тільки на головній сторінці, а на всіх інших по дві?

Я розповім про один з можливих способів реалізації даної ідеї, але насправді їх досить багато. Наприклад, для цього в налаштуваннях модуля ви можете вказати, що такі-то модулі повинні виводитися тільки на головній, наприклад:

І ось що ми отримуємо на всіх інших сторінках:

А саме: всередині правої колонки нічого немає, але сама колонка залишилася, ми бачимо її кордон і вона продовжує займати місце.

Щоб повністю прибрати порожню колонку, ми можемо використовувати перевірку на PHP. Як саме їй користуватися, залежить лише від вас, я покажу вам свій варіант:

<? Php if (($ this-> countModules ( 'right-column') == 0) and ($ this-> countModules ( 'left-column') == 0)) {$ column = 'all-hidden' ; } Elseif ($ this-> countModules ( 'right-column') == 0) {$ column = 'right-hidden'; } Elseif ($ this-> countModules ( 'left-column') == 0) {$ column = 'left-hidden'; }?> <Body class = "<? Php if (isset ($ column)) echo $ column?>">

Що ми зробили? пояснюю:

if (($ this-> countModules ( 'right-column') == false) and ($ this-> countModules ( 'left-column') == false)) {$ column = 'all-hidden'; }

Якщо в позиціях right-column і left-column немає модулів, то в придуману мною змінну $ column заносимо текст: all-hidden. Але якщо в одній з цих колонок є модулі, то перевіряємо по аналогії кожну колонку окремо і в залежності від того, в якій позиції немає модулів - заносимо довільний текст. Цей текст, наприклад, all-hidden - це назва класу, яке ми виводимо в самій останній сходинці описаного вище коду.

Тобто якщо у нас в правій колонці немає модулів, то ми отримаємо:

<Body class = "right-hidden">

А якщо, наприклад, у нас всюди будуть модулі (і справа і зліва), то отримаємо:

<Body class = "">

Body з порожнім класом.

А далі справа за CSS:

/ * Приховали обидві колонки * / .all-hidden # right, .all-hidden #left {display: none;} .all-hidden #content {width: 100%;} / * приховали тільки праву колонку * / .right- hidden #right {display: none;} .right-hidden #content {width: 786px;} / * приховали тільки ліву колонку * / .left-hidden #left {display: none;} .left-hidden #content {width: 786px;}

результат:

Це лише варіант, як можна було застосовувати цю перевірку:

if ($ this-> countModules ( 'назва позиції') == 0) {...}

Де $ this-> countModules () - це вбудований PHP метод Джумли, який повертає число модулів в даній позиції.

Тільки що був представлений елементарний шматок PHP коду, тому якщо ви нічого не зрозуміли - нічого страшного, просто зайдіть в розділ PHP даного блогу і уважно прочитайте все з першої статті до статті під назвою: урок 3 (Включно). Не лякайтеся, там трохи, але вам відразу стане набагато зрозуміліше.

Налаштування файлу templateDetails.xml - інсталяційний пролог

Шаблон ми створили, залишилося встановити.

Файл templateDetails.xml - це файл установки, без нього неможливо встановити створений нами шаблон через установник Джумли.

У нашому випадку він буде виглядати так (і для версії 2.5 і для Joomla 3.x):

<? Xml version = "1.0" encoding = "utf-8"?> <Extension version = "2.5" type = "template" client = "site"> <name> site-on </ name> <creationDate> 01.12. 2013 </ creationDate> <author> Rud Sergey </ author> <authorEmail> [email protected] </ authorEmail> <authorUrl> http://site-on.net </ authorUrl> <copyright> Rud Sergey 2013 </ copyright> <license> GNU / GPL </ license> <version> 1.0.0 </ version> <description> <! [CDATA [Професійний шаблон, створений за інструкцією блогу про створення і просування сайтів: <a target = " _blank "href =" http://site-on.net/ "> Site on! </a>]]> </ description> <files> <filename> index.php </ filename> <filename> index.html </ filename> <filename> templateDetails.xml </ filename> <filename> style.css </ filename> <folder> images </ folder> <folder> html </ folder> </ files> <positions> <position> top-menu </ position> <position> left-column </ position> <position> right-column </ position> <position> footer </ position> </ positions> </ extension>

На початку ми перерахували загальну інформацію про шаблон, вказали ім'я автора, опис шаблону і тд:

<Name> site-on </ name> <creationDate> 01.12.2013 </ creationDate> <author> Rud Sergey </ author> <authorEmail> [email protected] </ authorEmail> <authorUrl> http: // site-on.net </ authorUrl> <copyright> Rud Sergey 2013 </ copyright> <license> GNU / GPL </ license> <version> 1.0.0 </ version> <description> <! [CDATA [Професійний шаблон, створений за інструкцією блогу про створення і просування сайтів: <a target="_blank" href="http://site-on.net/"> Site on! </a>]]> </ description>

Потім ми перераховуємо всі папки та файли, які знаходяться в корені нашого шаблону:

<Files> <filename> index.php </ filename> <filename> index.html </ filename> <filename> templateDetails.xml </ filename> <filename> style.css </ filename> <folder> images </ folder > <folder> html </ folder> </ files>

Якщо ви забудете тут написати якийсь файл або папку, вони просто не завантажаться на сайт, але ви завжди зможете завантажити їх вручну.

Увага:
папки не повинні бути порожніми! У них повинен бути хоча б 1 файл, як мінімум - порожній index.html

Далі ми перераховуємо назви всіх позицій:

<Positions> <position> top-menu </ position> <position> left-column </ position> <position> right-column </ position> <position> footer </ position> </ positions>

Ті позиції, які ми забули тут перерахувати, все одно будуть працювати так само добре, просто вони не з'являться в віконці вибору позицій (в настройках модуля), ми повинні будемо вписувати назву вручну. Насправді вручну буває навіть швидше (ніж клікати мишкою), просто в такому випадку ви повинні знати назви позицій напам'ять :)

Упаковка шаблону для інсталяції

Все готово, залишилося тільки створити архів з шаблоном. Підтримуються архіви форматів: ZIP (.zip), TAR-gzip (.tar.gz) і TAR-bz2 (.tar.bz2). Після створення архіву, вам залишається встановити свій шаблон через стандартний установник Джумла, так, як ви робите з будь-яким іншим шаблоном або розширенням. Пряме посилання на скачування шаблону з даної статті:

Завантажено

743 раз.

Давайте підіб'ємо підсумки. Сьогодні ми отримали всі необхідні знання для створення шаблонів під Joomla 2.5 і Joomla 3. Створили трьох стовпчик макет сайту і навчилися динамічно змінювати кількість колонок.

Цього більш ніж достатньо, для створення якісного сайту на Joomla. Однак в наступних статтях ми продовжимо вивчення тонкощів створення шаблонів для Джумли.

Дякую всім за увагу, незабутній підписуватися зручним для вас способом (пошта, соц. Мережі, RSS). Для вас - тільки актуальна інформація зі світу веб-технологій!

Інші статті по темі шаблонів в Joomla

Будь ласка, оцініть цю статтю

Середня оцінка: 4.88 з 5 (проголосувало: 155)

Стаття виявилася вам корисною? Підпишіться, щоб не пропустити нові!

Ви можете допомогти розвитку проекту, зробивши всього 1 клік:

Дякуємо!