Макети Joomla. Як зробити ваш сайт максимально унікальним.

1. Що таке макет?
2. Де знаходяться макети Joomla?
3. Перевизначення макетів в Joomla
4. Альтернативні макети Joomla
5. Які бувають макети?
6. макети компонентів
7. макети категорій
8. Макети пунктів меню
9. макети модулів

Тільки уявіть: оформлення кожного модуля, кожної категорії, та хоч кожного матеріалу ви можете зробити неповторним. Цікаво? Тоді читаємо далі ...

Сьогодні я хочу представити вашій увазі дуже цікаву статтю. Використовуючи техніку, яка в ній описується, ви зможете додати вашому сайту, зробленому на Joomla, максимальну гнучкість і унікальність. Що я маю на увазі? Тільки уявіть: оформлення кожного модуля, кожної категорії, та хоч кожного матеріалу ви можете зробити неповторним. Цікаво? Тоді читаємо далі ...

Отже, в чому ж річ? Справа в перевизначенні макетів або створенні власних унікальних макетів і їх прив'язці до певних елементів Joomla. Багато шанувальників Joomla знають про можливості перевизначення макетів. Ми можемо перевизначати і змінювати під себе на сайті практично все. Але давайте докладніше.

Що таке макет?

Почнемо з основ. Ми звикли, що в Joomla є деякі загальні елементи. Це матеріал, категорія, модуль, компонент, шаблон, плагін і пункт меню. Давайте уявимо, що у нас є наступна задача:

Замовник хоче, щоб в статті категорія, автор, дата створення і іконки кнопок з'являлися перед, а після основного тексту матеріалу.

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

В Joomla, є шаблони. У стандартному варіанті вони змінюють тільки загальну конструкцію сайту. Простіше кажучи, за допомогою шаблону Joomla ми міняємо редагуємо шапку, підвал, центральну частину, задаємо позиції модулів і загальне оформлення. А якщо нам потрібно зазирнути в конструкцію статті? У шаблоні Joomla вказується тільки те, що ми викликаємо компонент. Для зміни конструкції статей, категорій, модулів, як раз і використовуються макети. Макет Joomla (Joomla layout) - це як би шаблон в шаблоні. Це шаблон контенту Joomla.

Для вирішення нашої задачі нам необхідно відредагувати макет статті, змінивши в ній послідовність елементів.

Де знаходяться макети Joomla?

"Добре" - скажете ви - "Але де шукати ці макети? В шаблоні ж їх немає". Так, дійсно. У шаблоні за замовчуванням макетів немає. Макет - елемент властивий розширенню Joomla, яке може відображатися на сайті. Зазвичай макети бувають у модулів і компонентів. плагинам Joomla макети властиві рідко, але буває і таке.

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

1. Зрозуміти, макет чого ми шукаємо: компонента або модуля. Якщо це контент в центрі сайту, який змінюється від сторінці на сторінку, то, ймовірно, ми шукаємо компонент. Якщо це блок з інформацією, яка залишається однаковою або близькою для різних сторінок, і розташовується не в центрі, а в колонці, шапці або підвалі сайту, то швидше за все це модуль. Зрештою можна просто подивитися в адмінці де саме розташований той чи інший контент.
2. Якщо нам потрібен макет компонента, шукаємо його в / components / НАЗВАНІЕ_КОМПОНЕНТА / views /
3. Якщо нам потрібен макет модуля, шукаємо його в / modules / НАЗВАНІЕ_МОДУЛЯ / tmpl /

Добре, файл макета ми знайшли. Що далі?

Перевизначення макетів в Joomla

Просто так вносити зміни в макет Joomla можна. Чому? Справа в тому, що ми створимо хак. Про те, що таке хак, і чому це погано, ви можете почитати в окремій статті . Якщо говорити коротко, після внесення змін до системні файли Joomla вони можуть бути стерті при оновленні CMS, тому що файл зі змінами буде перезаписан файлом з оновлення.

Через проблеми хаков якраз і з'явився такий термін, як "Перевизначення макетів Joomla" (Joomla layout overrides).

Під перевизначенням макета мається на увазі копіювання його файлу в який використовується на сайті шаблон Joomla.

Розробники Joomla передбачили проблему хаков і створили CMS таким чином, щоб при завантаженні макета, вона спочатку шукала його в шаблоні, і тільки потім, якщо там його немає, брала оригінальний макет з расшірерія. Це розумно. Ми можемо копіювати макет в шаблон і вносити в нього будь-які зміни, не побоюючись, що вони можуть бути перезаписані. Адже шаблон Joomla - це окреме розширення, яке не входить до складу CMS з коробки. Воно також не буде перезаписано при оновленні. Є винятки - у вигляді стандартних шаблонів Joomla, але навіть в цьому випадку в них спочатку немає файлів макетів.

Куди потрібно скопіювати макет, щоб він вважався перевизначення? Є жорстка декларація:

1. Макет модуля повинен бути поміщений в / templates / ВАШ_ШАБЛОН / html / НАЗВАНІЕ_МОДУЛЯ /
2. Макет компонента повинен бути поміщений в / templates / ВАШ_ШАБЛОН / html / НАЗВАНІЕ_КОМПОНЕНТА / ПОДПАПКА_МАКЕТОВ_КОМПОНЕНТА /

Давайте розглянемо пару реальних прикладів:

1. Перевизначення макета модуля останніх новин. Копіюємо файл: /modules/mod_articles_latest/tmpl/default.php в / templates / ВАШ _ШАБЛОН / html / mod_articles_latest /
2. Перепределеніе макета статті Joomla. Копіюємо файл: /components/com_content/views/article/tmpl/default.php в / templates / ВАШ _ШАБЛОН / html / com_content / article /

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

Крім ручного перевизначення макетів, є також автоматичне, доступне з адмінки Joomla. Щоб скористатися ним, в адмінці Joomla ви повинні перейти в "Розширення -> Шаблони -> Шаблони", клікнути по назві вашого шаблону Joomla, і у вікні, перейти на вкладку "Створити перевизначення". На малюнках нижче показано, як дістатися до цього вікна:

Якщо ви все зробили правильно, то побачите таке вікно:

У ньому показані всі макети компонентів і модулів Joomla. Для створення перевизначення вам достатньо клікнути але посиланню з потрібним макетом.

У сторонніх розширень Joomla, наприклад, у Virtuemart, також є макети і вони перевизначаються в шаблон тим же способом і з тих же причин, що і стандартні макети Joomla.

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

Альтернативні макети Joomla

Передпределеніе макетів це добре, але що робити, якщо для різних сторінок сайту нам потрібні різні макети?

Розглянемо завдання 2:

Замовник хоче, щоб в статье1 категорія, автор, дата створення і іконки кнопок з'являлися перед основним текстом, а в статье2 - після основного тексту матеріалу.

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

Ми можемо створити кілька файлів одного і того ж макету з різною структурою, назвавши їх унікальними іменами. Ви могли помітити, що в налаштуваннях матеріалів, категорій і модулів Joomla є опція «Альтернативний макет». Якщо в шаблоні існує кілька макетів, вона дозволяє вибрати будь-який з них. Завдяки цій опції, в Joomla ми можемо задавати власні макети хоч для кожного матеріалу і модуля, а також, як ми побачимо далі, і для кожного пункту меню.

Далі ми розглянемо основні типи стандартних макетів Joomla і способи створення альтернативних макетів для них.

Які бувають макети?

Всі макети, наявні в Joomla, можна розділити на кілька категорій:

• макети компонентів
• макети категорій
• Макети пунктів меню
• макети модулів

Є й деякі інші типи макетів, але вони використовуються дуже рідко і на даному етапі ними можна знехтувати.

Розглянемо кожну категорію докладніше.

макети компонентів

опис

Макети компонентів дозволяють змінювати структуру компонентів, створених за концепцією MVC. Всі стандартні компоненти Joomla можуть бути перебудовані. Розглянемо приклад на компоненті com_content - перешикуємо статтю.

алгоритм створення

Припустимо, що у нас використовується шаблон Beez_20.

1) У кореневій папці шаблону створюємо підпапку html

2) В папці html, створеної в п.1, створюємо підпапку com_content

3) У папці com_content, створеної в п.2. створюємо підпапку article

4) Заходимо в папку components \ com_ content \ views \ article \ tmpl і копіюємо файл default. php в папку article, створену в п.3.

5) Для створення альтернативного макета змінюємо назву файлу default. php на будь-який інший, що містить тільки латинські букви і цифри, але не має в собі знака нижнього підкреслення «_», наприклад, myarticle. php

6) Якщо наш макет вимагає підключення додаткових файлів, то створюємо їх аналогічно п.5, з тією відмінністю, що ім'я файлу повинна починатися зі знака нижнього підкреслення «_», наприклад, _ myarticledop1. php

7) Редагуємо файл myarticle. php, змінюючи його структуру під свої потреби.

8) Якщо ми хочемо, щоб цей файл застосовувався для всіх статей за замовчуванням, в настройках менеджера матеріалів в опції «альтернативний макет» вибираємо myarticle. php

9) Якщо ми хочемо, щоб цей макет застосовувався тільки для однієї статті, в настройках статті в опції «альтернативний макет» вибираємо myarticle. php

10) Не обов'язково. Для перекладу назви макета додаємо в файл локалізації шаблону (ru-RU.tpl_beez_20.sys.ini) наступний рядок:

TPL_BEEZ_20_COM_CONTENT_ARTICLE_LAYOUT_myarticle = "Назва макета"

11) Якщо макет не застосовуючи, дивимося обмеження, описані нижче, думаємо, аналізуємо.

обмеження

Альтернативні макети можуть використовуватися тільки при дотриманні двох правил:

• Вони були вказані в параметрах компонента (в нашому випадку статті або настройки статей)
• Ні пункту меню для цього компонента. Наприклад якщо ви використовуєте один або кілька пунктів меню типу "Матеріал", то альтернативний макет для цього матеріалу не буде використовуватися. Це пояснюється тим, що параметри пункту меню є більш пріоритетними, ніж параметри матеріалу, і вони будуть перекривати їх.

макети категорій

опис

Макети категорій дозволяють змінювати структуру категорій, Joomla. Сенс такої ж, як і у макетів компонентів. За замовчуванням існує два макети категорії блог і список. Ви можете змінювати їх структуру або створювати власні макети. Нижче розглянемо зміна макета блогу категорії.

алгоритм створення

Припустимо, що у нас використовується шаблон Beez_20.

1) У кореневій папці шаблону створюємо підпапку html

2) В папці html, створеної в п.1, створюємо підпапку com_content

3) У папці com_content, створеної в п.2. створюємо підпапку category

4) Заходимо в папку components \ com_ content \ views \ category \ tmpl і копіюємо файл blog. php в папку category, створену в п.3.

5) Для створення альтернативного макета змінюємо назву файлу blog. php на будь-який інший, що містить тільки латинські букви і цифри, але не має в собі знака нижнього підкреслення «_», наприклад, myblog. php

6) якщо наш макет вимагає підключення додаткових файлів, то створюємо їх аналогічно п.4, з тією відмінністю, що ім'я файлу повинна починатися зі знака нижнього підкреслення «_», наприклад, _ myblogdop1. php

7) редагуємо файл myblog. php, змінюючи його структуру під свої потреби.

8) якщо ми хочемо, щоб цей файл застосовувався для всіх категорій за замовчуванням, в настройках менеджера матеріалів в опції «альтернативний макет» вибираємо myblog. php

9) якщо ми хочемо, щоб цей макет застосовувався тільки для однієї категорії, в настройках категорії в опції «альтернативний макет» вибираємо myblog. php

10) Не обов'язково. Для перекладу назви макета додаємо в файл локалізації шаблону (ru-RU.tpl_beez_20.sys.ini) наступний рядок:

TPL_BEEZ_20_COM_CONTENT_CATEGORY_LAYOUT_myblog = "Назва макета"

11) якщо макет не застосовуючи, дивимося обмеження, описані нижче, думаємо, аналізуємо.

обмеження

Альтернативні макети можуть використовуватися тільки при дотриманні двох правил:

• Вони були вказані в параметрах компонента (в нашому випадку категорії або настройки категорій)
• Ні пункту меню для цього компонента. Наприклад якщо ви використовуєте один або кілька пунктів меню типу "У блозі категорій", то альтернативний макет для цієї категорії не буде використовуватися. Це пояснюється тим, що параметри пункту меню є більш пріоритетними, ніж параметри категорії, і вони будуть перекривати їх.

Макети пунктів меню

опис

Створення макетів пунктів меню відрізняється від створення макетів компонентів і категорій. Пункти меню мають більш високий пріоритет і будуть перекривати собою макети компонентів і категорій. Розглянемо приклад створення макета пункту меню матеріалу.

алгоритм створення

Припустимо, що у нас використовується шаблон Beez_20.

1) У кореневій папці шаблону створюємо підпапку html

2) В папці html, створеної в п.1, створюємо підпапку com_content

3) У папці com_content, створеної в п.2. створюємо підпапку article

4) Заходимо в папку components \ com_ content \ views \ article \ tmpl і копіюємо файли default. php і default.xml в папку article, створену в п.3.

5) Для створення альтернативного макета змінюємо назву файлів default. php і default.xml на будь-які інші (збігаються!), що містять тільки англійські букви і цифри, але не мають в собі знака нижнього підкреслення «_», наприклад, mymenuarticleitem. php і mymenuarticleitem. xml

6) якщо наш макет вимагає підключення додаткових файлів, то створюємо їх аналогічно п.4, з тією відмінністю, що ім'я файлу повинна починатися зі знака нижнього підкреслення «_», наприклад, _ mymenuarticleitem. php

7) редагуємо файл mymenuarticleitem. php, змінюючи його структуру під свої потреби. Редагуємо файл mymenuarticleitem. xml, змінюючи назву пункту меню в третьому рядку:

<layout title = "mymenuarticleitem" option = "com_content_article_view_default_option">

і додаючи в нього нові опції настройки пункту меню, якщо це потрібно.

8) Не обов'язково. Для перекладу назви макета додаємо в файл локалізації шаблону (ru-RU.tpl_beez_20.sys.ini) наступний рядок:

mymenuarticleitem = "Назва макета".

9) створюємо новий пункт меню і вибираємо тип з назвою, зазначеним в п.7 .:

макети модулів

опис

Макети модулів дозволяють змінювати структуру модулів. Перебудовані можуть бути будь-які модулі. Розглянемо приклад на модулі mod_login.

алгоритм створення

Припустимо, що у нас використовується шаблон Beez_20.

1) У кореневій папці шаблону створюємо підпапку html

2) В папці html, створеної в п.1, створюємо підпапку mod_login (назва папки має збігатися з оригінальною назвою папки модуля)

3) Заходимо в папку modules \ mod_ login \ tmpl і копіюємо файл default. php в папку mod_login, створену в п.3.

4) Для створення альтернативного макета змінюємо назву файлу default. php на будь-який інший, що містить тільки латинські букви і цифри, але не має в собі знака нижнього підкреслення «_», наприклад, mylogin. php

5) Якщо наш макет вимагає підключення додаткових файлів, то створюємо їх аналогічно п.4, з тією відмінністю, що ім'я файлу повинна починатися зі знака нижнього підкреслення «_», наприклад, _ mylogindop1. php

6) Редагуємо файл mylogin. php, змінюючи його структуру під свої потреби.

7) Щоб макет застосовувався до модуля, в настройках модуля в опції «альтернативний макет» вибираємо mylogin. php

8) Не обов'язково. Для перекладу назви макета додаємо в файл локалізації шаблону (ru-RU.tpl_beez_20.sys.ini) наступний рядок:

TPL_BEEZ_20_MOD_LOGIN_LAYOUT_mylogin = "Назва макета".

Тепер, якщо потрібно створити два різних відображення одного і того ж модуля, достатньо скопіювати модуль і змінити його макет і CSS-суфікс (до речі, про CSS-суффиксах я писав окрему статтю Суфікс класу модуля або як зробити кожен модуль Joomla унікальним. ). Поєднання суфіксів і макетів дає модулів неперевершену гнучкість.

Використовуючи шаблони, макети, і css-суфікси Joomla, ви можете як завгодно змінювати ваш шаблон. Тепер це справа техніки. І нехай після цього хтось спробує сказати, що шаблон Joomla не гнучкі :-). Успіхів!

про автора

Wedal (Віталій). Веб-розробник повного циклу (Full Stack). Творець і автор сайту Wedal.ru.

Основний профіль - створення сайтів і розширень на CMS Joomla.