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

Joomla - це дуже популярна у всьому світі система управління контентом (від англ. Content management system, CMS) (движок). За даними на грудень 2017 вона займає друге місце серед безкоштовних CMS ( серед доменів в зоні «RU» ). Рейтингів існує маса, тому дані можуть відрізнятися. Плюс, варто відзначити, що Joomla - універсальна CMS, на ній можна створювати сайти різних типів (за допомогою додаткових розширень), включаючи форуми, блоги, інтернет-магазини, Лендінзі, невеликі соц. мережі, корпоративні сайти і т.д .. Але є і спеціалізовані CMS, спрямовані, наприклад, на створення інтернет-магазинів або форумів і т.д.

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

Я працюю з Joomla, приблизно, з кінця 2009 року. Починав з версії Joomla 1.5.7. Планомірно переходив на 1.6, 1.7, 2.5 ... 3.х і ось тепер буду переходити на Joomla 4. Є кілька проектів крім цього сайту. наприклад, ось і ось . Роблю сайти на замовлення. В основному, це сайти фірм, приватних підприємців і невеликі інтернет-магазини. Крім створення сайтів на Joomla займаюся збільшенням швидкості завантаження, захисту від злому, SEO-оптимізацією і іншими супутніми процесами. Незважаючи на те, що Joomla не найпопулярніша CMS, за весь час роботи з нею у мене не виникало необхідності переходити на іншу систему.

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

У наступному циклі відео-уроків Ви дізнаєтесь про те, як можна створити інтернет-магазин на Joomla .

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

уроки Joomla Як створити сайт самостійно Створення сайту кафе Уроки для початківців по Joomla

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

Відео уроки будуть проходити в останньої стабільної, на момент їх записи (19.12.2017), російськомовної версії Joomla 3.8.3.

Підготовка до створення сайта

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

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

Крок 1. Визначтеся з метою і завданнями сайту. Для себе відповідайте на питання (в перспективі на 1,5-2 роки):

• Що Ви хочете отримати від цього сайту?
• Що отримають відвідувачі Вашого сайту, чи потрібно їм це і наскільки?

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

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

Це дуже важливий крок. На підставі семантичного ядра і потреб цільової аудиторії потрібно буде будувати структуру сайту, URL адреси, писати мета-дані, створювати контент задовольняє потребам аудиторії і т.д. Плюс, це все потім можна використовувати і для контектсной реклами.

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

Крок 4. Ознайомтеся з загальними рекомендаціями щодо створення сайтів від вагомих гравців ринку інтернет-індустрії і дотримуйтесь їх рекомендацій:

Також не зайвим буде регулярне читання галузевих блогів і форумів. Особисто мені корисні і своєчасні були поради сайтів:

А ось в підручниках ВНЗ актуального годі й шукати. Там або все те, що вже є в мережі, або той же, але іншими словами. Хоча ... Може і є винятки.

У будь-якому випадку, не варто бездумно кидатися робити те, про що прочитали. Подумайте, почитайте ще, порадьтеся.

Крок 5. Знайдіть в пошукових системах сайти конкурентів. Наприклад, якщо плануєте, щоб Ваш сайт був на лідируючих позиціях в пошуковій видачі, відкрийте 1-3 найпопулярніших серед Вашої цільової аудиторії пошукових систем і введіть туди ключове слово. Ключове слово - це можливе слово або фраза, по якій Вас будуть знаходити люди в пошуковій системі. Наприклад, для сайту інтернет-магазину товарів для бджоляра таким словом може бути «купити товари для бджоляра». Краще, якщо Ви ці ключові слова підберете на підставі аналізу статистики пошукових запитів. Рекомендую підібрати 3-5 таких ключових слів, по черзі вводите їх в кожну з пошукових систем і складайте список з перших 10 сайтів, які з'являться за запитом (краще записувати позиції, які вони займають, і пошукову систему, в якій знаходяться в топі).

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

Для цього кроку я використовую Rank Tracker (Малюнок нижче), але можна і «вручну» - безкоштовно.

Аналіз пошукової видачі

Крок 6. Перегляньте сайти 10 найсильніших конкурентів. Шукайте і записуйте все, що стосується зовнішнього вигляду, функціональності, інформації, цін і т.д. Я складаю таблицю. Наприклад, таку.

конкурент 1

конкурент 2

Конкурент ...

Кількість товарів в каталозі

1500

500

5000

Адаптивна версія сайту

1

1

1

Юридична адреса магазину і міський номер телефону

0

1

1

HTTPS

1

0

0

Онлайн консультант

0

1

1

Пошук по сайту

1

1

1

Фільтр товарів в категоріях

0

0

1

...

1

1

1

Плюс, записуйте по сайтам все, що вважаєте за потрібне, важливим, корисним, цікавим. У таблиці використовую «0» і «1» (в якості «є», «ні»), щоб потім підсумувати по рядках і зрозуміти, що з знайденого зустрічається на сайтах конкурентів частіше або рідше.

Крок 7. На підставі знайдених «фішок» на кроці №6 почніть планувати, що буде у Вас на сайті. Можна розбити його на завдання по пріоритетності.

Крок 8. Продумайте структуру сайту. Наприклад.

Головна

Каталог товарів

підрозділ 1

товар 1

товар 2

Товар ...

підрозділ 2

товар 1

товар 2

Товар ...

Підрозділ ...

товар 1

товар 2

Товар ...

Доставка і оплата

Контакти

Блог

Стаття 1

Стаття 2

Стаття ...

По суті, це відображення меню сайту і, частково, структури URL адрес (про це поговоримо далі).

Крок 9. Коротко розпишіть, що має бути на кожній сторінці. У цьому може допомогти аналіз конкурентів, знання цільової аудиторії і власний досвід. Наприклад.

Сторінка «Контакти». Карта Яндекс з відміткою нашого офісу (праворуч на сторінці); форма зворотного зв'язку (з полями «телефон», «повідомлення») (зліва на сторінці). Над формою, зліва від карти: телефон (клікабельним), адреса, короткий опис як проїхати, графік роботи.

І так по кожній типовій сторінці. Природно, подібні сторінки товарів окремо описувати не потрібно.

Крок 10. Пропишіть в плані додаткові завдання. Наприклад, «Повна швидкість завантаження сторінки товарів не повинна перевищувати 5 секунд за даними сервісу http://www.webpagetest.org/ (тест з Польщі)».

Крок 11. Підготуйте тексти, фотографій та іншого вмісту під кожну сторінку сайту.

Крок 12. Підберіть потрібні для реалізації сайту розширення Joomla. Про це поговоримо далі.

Крок 13. Підберіть шаблон Joomla. Про те, як це можна зробити, докладніше в статті « Огляд JM Computers and Electronics VirtueMart Storeу. Шаблон Joomla 3 ».

Без такої підготовки, вважаю, уроки Joomla для початківців будуть не настільки ефективними.

Передбачивши все необхідне, приступаємо до безпосереднього створення сайту (можна на локальному хостингу). Про це можна дізнатися в відео нижче. Потім підберіть хостинг і перенесіть створений сайт на нього. Про хостинг, який використовую я, читайте в статті « Огляд хостингу сайтів - Ukraine.com.ua ». А процес перенесення розглянемо в наступних статтях.

Щоб покращувати свій сайт і бізнес, який він представляє, постійно працюйте: регулярно стежте за новинками галузі, пробуйте, тестуйте, слухайте аудиторію, аналізуйте і вносите своєчасно актуальні правки.

Якщо Вам цікаво, в статті « якість сайту »Більш детальна інформація з цього питання.

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

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

1. Компоненти.
2. Модулі.
3. Модулі.

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

1. Шаблони.
2. Модулі для компонентів.
3. Файли локалізацій (мови). Наприклад, русифікатори.

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

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

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

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

Компоненти Joomla. Доступні для налаштування в адмінці в меню Компоненти. Вони, як правило, становлять основну функціональність сайту. Наприклад, компонент RSPageBuilder (Малюнок нижче) служить для створення сторінок. З ним попрацюємо в наступних уроках. або компонент DJ-Classifieds - служить для створення дошки оголошень.

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

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

компоненти Joomla

Модулі Joomla. Доступні для налаштування в адмінці в меню Розширення - Модулі (малюнок нижче). Вони можуть розширювати функціональність компонентів або виступати як окремі одиниці. наприклад, JAmp - плагін Joomla для створення сторінок за технологією Google AMP (це «самостійний» плагін), а плагін « Контент - RSMediaGallery »Служить для відображення галерей компонента RSMediaGallery в матеріалах Joomla (всередині статей) (цей плагін розширює можливості компонента).

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

Модулі Joomla

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

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

модулі Joomla

Модулі для компонентів. Встановлюються через панелі керування компонентів або через менеджер розширень Joomla. Служать для розширення можливостей компонентів. наприклад, BIT VirtueMart Google Analytics - плагін VirtueMart (компонента інтернет магазину) для збору статистики за допомогою Google Analytics (встановлюється через менеджер розширень Joomla). Як правило, такі плагіни працюють тільки при наявності компонента, для яких вони призначені.

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

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

Існує спеціальний сайт - « Joomla! Extensions Directory »(JED). Це офіційний каталог розширень Joomla. Там є платні і безкоштовні розширення. Шаблонів на даний момент немає. На 20.12.2017 в каталозі значиться 7997 розширень. Є пошук і зручний фільтр. Сайт англійською мовою.

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

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

1. Joomla-monster.com .
2. RSJoomla! .
3. RocketTheme .
4. Virtuemarttemplates.net . Шаблони для компонента інтернет магазину VirtueMart.

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

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

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

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

Позиції шаблону Джумла

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

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

У статтях « Відповіді на питання по шаблонах для Joomla. Установка, настройка, видалення »І« Відповіді на питання по шаблонах для Джумла. Внесення змін »Ви знайдете додатковий матеріал по роботі з шаблонами.

Керувати шаблонами можна в адмінці Джумла в Розширення - Шаблони.

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

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

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

Щоб створити меню, що відображається на сайті, Вам потрібно (це буде розглянуто в наших уроках Joomla):

1. В Меню - Менеджер меню создать меню.
2. У створеному меню створити пункт меню.
3. У Розширення - Модулі створити модуль меню, вибравши створене меню і вказавши позицію і сторінки (пункти меню), де потрібно відображати цей модуль.

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

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

Меню Joomla

URL, аліаси, імена файлів

URL адреси - важлива складова будь-якого сайту. Особливо це важливо у відношенні пошукових систем. Так як пошукові системи в своїй видачу дають користувачам саме URL адреси сайтів. Якщо спочатку створити неправильну / невдалу структуру URL адрес, то в подальшому будуть труднощі і проблеми з її зміною. В Joomla URL адреси сторінок, за великим рахунком, формуються на підставі меню. У більшості випадків, особливо зі стандартними розширеннями Joomla URL адреси сторінок повторюють вкладеність пунктів меню (ієрархію) і містять їх аліаси.

Аліас - слово (або словосполучення), яке використовується для створення скороченого URL адреси (ЧПУ). Аліаси можна задавати при створенні матеріалів, пунктів меню, категорій і т.д. (Малюнок нижче).

Приклад звичайного URL адреси:

http://domen.com/index.php?option=com_content&view=category&layout=blog&id=10

Приклад ЧПУ (SEF) URL адреси:

http://domen.com/menyu

Алиас пункту меню

І в першому, і в другому випадку адреса веде на одну і ту ж сторінку. У створюваному сайті кафе це сторінка «Меню». У першому випадку, в звичайному URL, видно параметри запиту до бази даних: компонент, категорія, макет сторінки, ID матеріалу. ID - це унікальний номер запису / елемента в рамках однієї таблиці бази даних. У моєму прикладі «10» - це ID категорії матеріалів Joomla.

ЧПУ (SEF) URL, як правило, більш кращі, тому що:

1. Зрозуміліше людям. Легше запам'ятати, записати, продиктувати по телефону.
2. Краще для SEO. Можна використовувати ключові слова в URL, красивіше відображаються в результатах пошукової видачі.
3. Безпечніше, так як не показують запит до бази даних, ніж трохи ускладнюють зловмисникам процес злому.

Як правило, ЧПУ URL адреса формується на підставі алиасов всіх «рівнів». Наприклад, є пункт меню - «Меню», тип блозі категорій. Його алиас - «menyu». Він виводить матеріали з категорії «Меню». У цій категорії є матеріал «Margarita». Алиас цього матеріалу - «margarita», ID матеріалу - «5». Кінцевий URL адреса сторінки матеріалу такої: «http://domen.com/menyu/5-margarita». В Joomla 3.8 і новіших версіях є можливість відключення відображень ID матеріалу в URL. Для цього в Матеріали - Менеджер матеріалів - Налаштування - Інтеграція для опції Маршрутизація URL виберіть Експериментальний і для опції Видалити ідентифікатори з URL виберіть Так.

Але не всі URL адреси сторінок формуються на підставі структури меню і не все можна з легкістю змінити. Це залежить від кожного конкретного компонента і типу пункту меню. У сторонніх компонентів можуть бути свої опції і принципи формування URL адрес.

Також існують сторонні компоненти для управління URL адресами. например, sh404SEF . У нього, як і у інших подібних компонентів є недоліки .

У статті " Огляд sh404SEF. ЧПУ Joomla »Зібрані рекомендації щодо формування людино-зрозумілих урлов (ЧПУ). Від англ. SEF - search engine friendly.

А в статті « Огляд Simple Image Gallery. Плагін галереї Joomla »Можна знайти рекомендації по іменах для файлів, які Ви додаєте на сайт: зображення, PDF, архіви і так далі.

Відео урок по створенню сайту №1

1. Установка і настройка локального сервера Open Server - з 1:14.
2. Установка Joomla в Open Server - з 7:08.
3. Базова настройка Joomla - з 11:19.
4. Установка безкоштовного шаблону (RSVario) і додаткових розширень - з 18:20.
5. Налаштування шаблону - з 20:57.
6. Створення меню Joomla - 24:13.
7. Створення слайд шоу в RSMediaGallery - 29:29.
8. Створення форми зворотного зв'язку (RSContact) - 33:19.
9. Створення слайд шоу в sigplus - 41:07.

Відео краще переглядати з якістю 720 HD. Цей та інші відео уроки Ви можете знайти на каналах сайту Aleksius.com в YouTube , Rutube и Mail.ru .

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

Вміст таблиці стилів ( «custom.css»):

/ * Приховування тексту "Залишок символів" в модулі контактів на слайдері * / # mod-rscontact-counter-93 {display: none; } / * Ширина форми в слайдері * / @media (min-width: 1050px) {.rstpl-slideshow-position .rstpl-rscontact {width: 25.5%; }}

У наступному відео уроці « Відео уроки Joomla (частина 2). Створюємо сайт з нуля самостійно »Ми розглянемо створення головної сторінки сайту кафе у вигляді Лендінзі за допомогою безкоштовного російськомовного компоненту RSPageBuilder.

Якщо у Вас виникнуть питання, задавайте їх у коментарях. Постараюся відповісти максимально швидко.

Схожі матеріали