Відповіді на запитання стосовно шаблонів для Joomla

• Переваги та недоліки готових шаблонів.
• Переваги викрадених шаблонів.
• Недоліки викрадених шаблонів.
• Ідея 12-ї колонкової сітки Bootstrap.

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

Переваги та недоліки готових шаблонів

Назвемо ряд позитивних та негативних сторін готових шаблонів Joomla порівняно з такими:

1. Унікальними, зробленими командою професіоналів спеціально під конкретний проект.
2. Унікальними, зробленими 1-2 фрілансерами, спеціально під конкретний проект
3. Шаблонами, зробленими самостійно у різних програмах та сервісах.

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

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

• Низька вартість самого шаблону, технічної підтримки та отримання оновлень.
• «Моментальне» отримання готового шаблону відразу після оплати.
• Універсальність. Надалі, при розвитку проекту, оновленні CMS та її компонентів, допомога з боку розробника не потрібна.
• Можна відразу побачити, як виглядає шаблон на демосайті.
• Наявність параметрів, які дозволяють змінювати параметри шаблону без виправлення вихідного коду.
• До складу (у вартість ліцензії) можуть входити корисні та функціональні розширення (модулі меню, галереї тощо).

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

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

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

• За менші або ті ж гроші ви, швидше за все, отримуєте якісніший результат ( валідність коду, краща адаптивність, продуманіший зовнішній вигляд різних дрібниць: системних повідомлень, іконок і так далі). До того ж технічна підтримка та оновлення надалі.
• Універсальність.
• Можна відразу побачити, як виглядає шаблон.
• «Моментальне» отримання готового шаблону відразу після оплати.
• Наявність параметрів, які дозволяють змінювати параметри шаблону без виправлення вихідного коду.
• До складу можуть входити корисні та функціональні розширення.

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

Переваги готових шаблонів порівняно зі зробленими самостійно в різних програмах та сервісах:

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

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

• Такий дизайн може бути на іншому сайті.
• Набагато менше налаштувань шаблону (за умови повторної зміни шаблону у програмі та встановлення його на сайт).
• Менш універсальні.

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

Орієнтовна вартість готового професійного шаблону, в середньому, коливається від 35 $ до 150 $ (є ліцензійно-безкоштовні).

Шаблони, зроблені, наприклад, у TemplateToaster можуть коштувати від 49$ до 99$ за ліцензію. Щоправда, за допомогою програми можна створити необмежену кількість різних шаблонів під різні CMS, причому самостійно. Ось їхня «краса» повністю залежить від ваших дизайнерських здібностей.

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

Переваги викрадених шаблонів

1. Вони безкоштовні.

Недоліки викрадених шаблонів

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

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

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

1. Шаблон може мати шкідливий код.
2. У шаблоні можуть бути приховані посилання.
3. Нема підтримки від розробника.
4. Немає можливості завантажувати нові версії із сайту розробника.
5. Нема доступу до доповнень до шаблону на сайті розробника.
6. Розробнику може стати невигідно продовжувати підтримку оновлення шаблона під нові версії Джумли, якщо його мало купують.
7. Немає гарантії працездатності шаблону або його нормального зовнішнього вигляду.
8. Це нелегально.

Дещо уточню деякі пункти.

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

• Погано для позицій сайту у пошуковій видачі.
• Згубно позначається на репутації сайту.
• Хостинг-провайдер може заблокувати сайт.
• Може згубно впливати на функціональність, швидкодію та зовнішній вигляд сайту.
• Можна потрапити до чорних списків пошукових систем та антивірусних програм. Це зменшить трафік на сайт.

У шаблоні можуть бути приховані посилання. Це один із способів заробітку зловмисників. Негативні моменти для вас:

• Погано для позицій сайту у пошуковій видачі.

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

• Витрати часу.
• Затримки оновлення до нових версій CMS.

Для усунення наслідків від установлення крадених шаблонів не завжди буде досить легко придбати ліцензію. Крім часу, зусиль, витрачених на перевстановлення, ваш сайт уже може бути заражений (поза файлами шаблону) або занесений до «чорних» списків. Не завжди приховані посилання і шкідливий код можна легко видалити. Як правило, це вимагає знань та досвіду, оскільки код зашифрований та дуже сильно інтегрований у шаблон. Просто видаливши підозрілий фрагмент, можна порушити роботу\зовнішній вигляд шаблону.

Ідея 12 колонкової сітки Bootstrap

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

Якщо побажаєте розмістити 6 модулів в одній позиції в рядок, і хочете, щоб модулі були однакової ширини, то в налаштуваннях кожного модуля на вкладці Додаткові параметри для опції Розмір Bootstrap потрібно вказати «2».

Сума вказаних та використовуваних розмірів Bootstrap має бути 12.

Для 4-х модулів – у кожного необхідно вказати «3»; для 3-х - «4»; для 2-х - «6». На малюнку нижче показано приклад розташування 3-х модулів «Make an appointment», «Send us a message», «Visit us» в одній позиції. Для кожного з модулів на вкладці Додаткові параметри для опції Розмір Bootstrap вказано «4».

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

Є важлива відмінність у застосуванні 12 колонкової сітки Bootstrap при фіксованій і «гумовій» ширині шаблону. Розглянемо їх у прикладах.

Сітка Bootstrap при фіксованій і гумовій ширині

Трохи визначимося із термінологією.

• Осередок (клітка) – стовпець сітки Bootstrap.
• Контейнер містить позиції шаблону.
• Позиція шаблону містить модулі сайту.
• Стовпець (колонка) – елемент макету шаблону. Наприклад, ліва колонка, права колонка та середня колонка (колонка вмісту (контенту)).

На малюнку нижче:

• TOP-BAR-1 (та інші аналогічні написи) – позиції шаблону.
• «6х», «12х», «3х» - осередки (клітини).
• «1» - контейнери.

Нижче наведено приклад сітки Bootstrap при фіксованій ширині шаблону.

Усі контейнери позицій модулів, які відображаються в одному рядку, в сумі повинні дорівнювати 12 осередків (клітин). Якщо вам потрібно розділити будь-яку з позицій шаблону на кілька стовпців, пам'ятайте, що сума осередків повинна бути 12.

На малюнку нижче показано приклад сітки Bootstrap при гумовій ширині шаблону.

Всі контейнери позицій модулів, які відображаються в одному рядку, в сумі повинні дорівнювати 12 осередків (клітин), але на додаток до цього можна розділити кожен стовпець на 12 осередків.

Ця відмінність впливає на те, яке саме число (від 0 до 12) задається для кожного з модулів, в одній позиції, на вкладці Додаткові параметри в опції Розмір Bootstrap , щоб досягти потрібного ефекту (співвідношення ширини кожного модуля на сайті).

Приклад №1. Є дві позиції в одному рядку, у кожній позиції потрібно розмістити по два модулі.

1. Перший модуль лівої позиції повинен займати 15% усієї ширини екрана.
2. Другий модуль лівої позиції повинен займати 35% усієї ширини екрана.
3. Перший модуль правої позиції повинен займати 25% усієї ширини екрану
4. Другий модуль правої позиції повинен займати 25% усієї ширини екрана.

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

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

1. Для першого модуля у лівій позиції – «2».
2. Для другого модуля у лівій позиції – «4».
3. Для першого модуля правої позиції – «3».
4. Для другого модуля у правій позиції – «3».

На малюнку нижче візуально видно, що для досягнення поставленої задачі для «гумової» ширини екрану потрібно задати наступні опції: Розмір Bootstrap ( з огляду на особливість поділу кожного стовпця на 12 осередків ):

1. Для першого модуля у лівій позиції – «4».
2. Для другого модуля у лівій позиції – «8».
3. Для першого модуля у правій позиції – «6».
4. Для другого модуля у правій позиції – «6».

Приклад №2. Є одна позиція в одному рядку, у ньому потрібно розмістити три модулі.

1. Перший модуль повинен займати 25% усієї ширини екрану.
2. Другий модуль повинен займати 35% усієї ширини екрану.
3. Третій модуль повинен зайняти 50% всієї ширини екрана.

Завдання те саме, що у прикладі №1: зробити так, щоб таке співвідношення збереглося і за фіксованої ширини і за «гумової» (за умови зміни налаштувань модулів, які у цих позиціях). Тобто, потрібно знайти значення опцій Розмір Bootstrap кожного з модулів для кожної із ширин (фіксована «гумова»).

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

1. Для першого модуля – «3».
2. Для другого модуля – «3».
3. Для третього модуля - «6».

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

Кандидат технічних наук, викладач Харківського національного університету радіоелектроніки, веб-майстер та 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