Відеоурок 2. Самостійна розробка сайтів на Joomla 4

• Відеоурок.
• Посилання та розширення з відеоуроку.
• Компоненти, модулі та плагіни.
• Де шукати розширення Joomla?
• Шаблон та його позиції, сітка Bootstrap.
• Меню Joomla та пункти меню.

Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).

Відеоурок

• Запуск XAMPP з теки – 00:00:58.
• Як зайти в адмінку сайту – 00:01:37.
• Збільшення тривалості сесії – 00:02:00.
• Встановлення мови для Джумла 4 з файлу – 00:03:31.
• Встановлення шаблону в Joomla 4 – 00:04:35.
• Встановлення розширень в Joomla 4 – 00:06:20.
• Налаштування шаблону та створення шапки сайту – 00:07:14. Детальніше про налаштування шаблону можна дізнатись у окремих відеоуроках.
• Створення меню в Джумла 4 – 00:18:12.
• Створення підвалу сайту (робота з модулями) – 00:19:44.
• Перегляд позицій будь-якого шаблону – 00:23:11.
• Робота з SP Easy Image Gallery – 00:24:07.
• Помилка генерації мініатюр на XAMPP – 00:25:52.

Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти на моєму YouTube каналі.

Посилання та розширення з відеоуроку

• Попередній відеоурок.
• Вхід в адмінку Joomla – «http://localhost/joomla/administrator/». У вас замість «joomla» буде назва саме вашої теки з сайтом.
• Мови для Joomla.
• Шаблон Helix Ultimate.
• Конструктор сторінок SP Page Builder 4 Lite.
• Компонент галереї SP Easy Image Gallery.
• Перегляд позицій модулів – «?tp=1».
• Пошук функції PHP у «php.ini» – «extension=gd».

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

У попередньому відеоуроці «Відеоурок 1. Самостійне створення сайту на Joomla 4» ми встановили та налаштували локальний сервер XAMPP, установили в нього Joomla 4, додали до неї українську мову та частково налаштували. У цьому відеоуроці розглянемо, як можна встановлювати розширення, попрацюємо з налаштуваннями шаблону та займемося шапкою та підвалом сайту.

Примітки щодо відеоуроків. Наприкінці кожної статті з відеоуроком можуть бути надані посилання на додаткові матеріали та посилання на завантаження різних розширень, які використовувалися у відео (якщо такі були).

В уроці бере участь остання доступна мені, на момент написання статті (01.01.2023), версія Joomla 4.2.6  українською мовою, шаблон та фреймворк Helix Ultimate 2.0.11, локальний сервер XAMPP Windows x64 8.1.12 0 VS16. Тестовий комп’ютер працює на Windows 11 Pro 22H2 х64 (22621.963, Windows Feature Experience Pack 1000.22638.1000.0).

Компоненти, модулі та плагіни

Функціональність Joomla доповнюється та змінюється, в основному, за рахунок встановлення розширень, які поділяються на:

• Компоненти.
• Плагіни.
• Модулі.

Ще є такі розширення:

• Шаблони.
• Плагіни для компонентів.
• Файли локалізацій (мов).

Під «розширеннями» маю на увазі всі вищезгадані пункти.

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

Усі розширення, крім плагінів для компонентів, установлюються однаково через адмінку в менеджері розширень Joomla (Система – Розширення (в області Встановлення)). Плагіни для компонентів, зазвичай, встановлюються через відповідні компоненти.

У Joomla є свої власні (вбудовані) розширення. Але можна встановлювати додаткові.

Компоненти для Joomla. Доступні для налаштування адміністратора в меню Компоненти. Вони, як правило, становлять основну функціональність сайту. Наприклад, компонент SP Page Builder (рисунок нижче) служить для створення сторінок. З ним попрацюємо у наступних уроках.

Щоб відобразити сторінки компонента у фронтальній частині сайту, потрібно створити відповідні їм пункти меню в менеджері меню (про це далі).

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

Плагіни Joomla. Доступні для налаштування в адмінці, у меню Система – Плагіни (рисунок нижче). Вони можуть розширювати функціональність компонентів або виступати як окремі одиниці. Наприклад, Akeeba Backup дозволяє спростити резервне копіювання сайту, а плагін AllVideos служить для вставки відео з YouTube в матеріалах Joomla (всередині статей) (цей плагін розширює можливості компонента).

Результати дій одних плагінів може бути не видно на сайті, якщо не дивитися у вихідний код. Наприклад, плагіни можуть оптимізувати швидкість завантаження сайту. А результат дій інших плагінів відображається у вигляді галерей, відео, посилань/таблиць на завантаження файлів тощо. Роботу таких плагінів ми наочно розглянемо у наших уроках зі створення сайтів на Joomla 4.

Модулі Joomla. Доступні для налаштування в адмінці меню Система – Модулі сайту або Зміст – Модулі сайту (рисунок нижче). Вони служать для відображення інформації на сайті (як в адмінці, так і у фронтальній частині). Вони можуть відображати галереї, текст, меню, картинки, відео тощо. Модулі можуть виводити інформацію з компонентів або окремими одиницями. Наприклад, RSContact дозволяє відображати форму контактів (це «самостійний» модуль), Tag Transform – модуль, який відображає у фронтальній частині сайту теги стандартного компонента тегів Joomla (цей модуль розширює можливості штатного компонента «Мітки») (com_tags)).

Модулі відображаються в адмінці та передній частині сайту в позиціях шаблону (про це нижче).

Плагіни для компонентів. Встановлюються через панелі керування компонентів або через менеджер розширень Joomla. Служать для розширення можливостей компонентів. Наприклад, Dependent Custom Fields For All – це плагін для компоненту інтернет-магазину VirtueMart, який дозволяє створювати залежні поля. Як правило, такі плагіни працюють лише за наявності компонента, для яких вони призначені.

Файли локалізацій (мов). Переклади інтерфейсів розширень різними мовами (для адмінки та сайту). Встановлюються через менеджера розширень Joomla (або просто копіюються до папок сайту).

Де шукати розширення Joomla

Існує спеціальний сайт – Joomla! Extensions Directory (JED). Це офіційний каталог розширень Joomla. Там є платні та безкоштовні розширення. На 31.12.2022 у каталозі нараховується 5922 розширення. Є пошук та зручний фільтр. Сайт англійською мовою.

Рекомендую шукати там. Також можна шукати за допомогою пошукових систем. У будь-якому випадку краще завантажувати розширення виключно з офіційних сайтів розробників. Нічого краденого, завантаженого з форумів та різних «лівих» сайтів використовувати не слід.

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

• Unitemplates.com.
• Joomshaper.com.
• RSJoomla!.
• Dj-extensions.com.
• Yootheme.com.

Шаблон та його позиції, сітка Bootstrap

Шаблон Joomla – це розширення Joomla, яке дозволяє задавати зовнішній вигляд та взаємне розташування різним елементам сайту. Це можна назвати одним словом «дизайн». Сам термін «шаблон» застосовується через те, що в Joomla англійською мовою подібні розширення називають «template» – у перекладі з англійської це якраз і є «шаблон».

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

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

Позиції шаблонів мають назви. Вказуючи ці назви в налаштуваннях модулів, можна відображати ті чи інші модулі у різних позиціях шаблону.

У готових професійних шаблонів є багато переваг. Але ніхто не заважає вам створювати власні.

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

Шаблон Joomla – це набір PHP, CSS, JS, PNG, SVG та інших файлів, що містять вихідний код дизайну сайту. Склад та кількість файлів залежить від кожного конкретного шаблону. Серед файлів шаблону може бути файл із налаштуваннями стилю Joomla. На сайті може бути один або декілька шаблонів. Один шаблон може мати один або кілька стилів. Як правило, із шаблоном працюють для зміни вихідного коду або його перевизначення.

Стиль Joomla – це набір налаштувань шаблонів Joomla. Налаштування можуть зберігатися у базі даних сайту або серед файлів шаблону. Якщо розробники шаблону передбачають якісь налаштування, вони знаходяться саме в стилях. Стилі можна прив'язати до пунктів меню. У різних пунктах меню можуть бути різні стилі. При цьому можна задавати декільком пунктам меню стилі від різних шаблонів, а можна – від одного. Як правило, з шаблоном працюють для зміни його налаштувань. Для цього не потрібні навичка верстки або програмування, на відміну від випадків зміни вихідного коду шаблону.

Меню Joomla та пункти меню

Меню Джумла (малюнок нижче) - дуже важливий елемент.

1. Меню може відображатися на сайті та служити як навігація.
2. За допомогою меню виводяться компоненти сайту у його фронтальну частину.
3. Меню бере участь у формуванні URL-адрес сторінок.
4. На основі меню можна керувати відображенням модулів на тій чи іншій сторінці.

Можна створювати меню або пункти меню, але не відображати їх у фронтальній частині сайту. Таке може знадобитися для формування URL-адрес окремих сторінок, на які не повинні вести посилання з основного меню сайту. Наприклад, сторінка з результатами пошуку на сайті.

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

У наступній статті «Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4» ми створимо головну сторінку сайту у безкоштовному конструкторі контенту SP Page Builder 4 Lite.

Автор статті – Хорошевський Олексій

Кандидат технічних наук, викладач Харківського національного університету радіоелектроніки, веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Надає послуги зі створення, доопрацювання, супроводу та просування сайтів. Докладніше про автора… Контакти: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Соціальні мережі: LinkedIn Facebook YouTube (Twitter) Публікації та робота: Google Академія Scopus Upwork Freelance.ua