Вибираємо вкладки для свого сайту на Joomla!

Тип: Компонент, плагін, модуль
Версія Joomla!: Joomla! 2,5; 3 та вище
Ліцензія: Безкоштовні та урізані версії

Tabs Joomla!

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

Прийдеться тоді або шукати заміну (а скільки ж роботи прийдеться виконати при переході від одного розробника до іншого) або якщо ви великий програміст — самому все виправляти. Тому я сам стараюся використовувати або безкоштовні компоненти або їхні урізані версії (мається на увазі коли розробник має платний варіант певного продукту, а також безкоштовний). Інколи, навіть і можливостей безкоштовного компоненту для звичайного сайту може вистачити. І у такому випадку компонент, плагін чи модуль скоріш за все буде розвиватися разом із своїм безкоштовним аналогом. Це все завдяки тому платному варіанту, який все-таки хтось собі купив. Вибачте за відступ від статті…

Ото ж задача така: потрібно знайти та вибрати на сайт плагін чи компонент (можна на крайній випадок і модуль) для оформлення вкладок і поміщення у них контенту. Знайшов 2 версії урізаних безкоштовних продуктів та повністю безкоштовні. Почнемо тестування (свіжевстановлена CSM Joomla! версії 3.7.2). Для всіх компонентів, плагінів чи модулів використаю однакову статтю.

Плагін Tabs

Першим в тестування попадає Tabs. Встановлюємо як звичайно (відео як встановлювати компоненти, плагіни та модулі в CSM Joomla!) та переходимо в менеджер плагінів. Увівши в пошук tabs бачимо два плагіни: Button – Regular – Labs – Tabs та System – Regular – Labs – Tabs. Для налаштувань нам потрібний другий плагін.

Tabs Joomla!

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

Tabs Joomla!

Йдемо далі на вкладку «Описание» у якій можна подивитися теги, за допомогою яких можна додавати вкладки у редакторі при додаванні новин.

Tabs Joomla!

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

Tabs Joomla!

Остання вкладка «Настройки кнопки редактора» дозволяє відобразити свій текст на кнопці, задати максимальну кількість вкладок та ін.

Tabs Joomla!

Приклад використання:

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

Tabs Joomla!

Скриншот вкладок на сайті:

Tabs Joomla!

Додати вкладки можна і іншим способом. Створюємо новий матеріал: Материалы → Менеджер материалов → Создать материал. Знаходимо вгорі чи у нижній частині візуального редактора надпис (кнопку) «Вкладка» та клацаємо на ній. Відкриється вікно плагіна Tabs. Даємо назви для потрібної кількості вкладок та вставляємо в статтю. Лишається лише додати текст до заголовків.

Tabs Joomla!

Tabs Joomla!

Результат у візуальному редакторі:

Tabs Joomla!

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

Сайт плагіна Tabs
Сторінка на extensions.joomla.org
Демонстрація плагіна Tabs

Плагін Tabs and Sliders

Наступним мені попався плагін Tabs and Sliders. Встановлюємо та можемо перейти в менеджер плагінів. Налаштувань він практично не має. Можна змінити тему відображення вкладок.

Tabs Joomla!

Для додавання інформації у вкладках (у вигляді акордеону) використовуємо наступні теги:

Tabs Joomla!

Як бачимо, потрібно для кожної вкладки та вкладок між ними і відкривати і закривати тег. Використовуючи такі теги ми виведемо контент у вигляді акордеону.

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

Tabs Joomla!

Скриншот вкладок на сайті:

Tabs Joomla!

Приклад із іншою темою (вибирається у менеджері плагінів):

Tabs Joomla!

А використовуючи теги:

Tabs Joomla!

ми виведемо контент у вигляді вкладок, як і у попередньому варіанті. Дивимося скриншот (зверху у вигляді акордеону, а знизу у вигляді вкладок):

Tabs Joomla!

Сайт плагіна Tabs and Sliders
Сторінка на extensions.joomla.org
Демонстрація плагіна Tabs and Sliders

Модуль SJ Module Tabs

Наступний супер-пупер вкладочний модуль SJ Module Tabs. Зразу після встановлення кілька хвилин дивився на нього і не розумів — чи то модуль кривий чи то зі мною щось не так:). Насправді даний модуль відображає у вкладках не матеріали, а інші модулі. Як це працює? Спочатку задаємо одну позицію для модулів, які хочемо потім помістити у вкладки (наприклад, position-8). Це може бути меню (одне чи декілька), форма входу, будь-який модуль.

Tabs Joomla!

Далі заходимо в налаштування модуля Sj Module Tabs та вибираємо йому позицію виведення на сайті (я для прикладу вибрав footer). Далі в налаштуваннях модуля, вкладка «Модуль» напроти Select a position задаємо позицію модулів, які будуть виводитися у вкладках. В моєму випадку — це позиція: position-8.

Tabs Joomla!

Зберігаємо та бачимо всі наші модулі, які мають позицію «position-8» у вкладках.

Tabs Joomla!

Сайт модуля SJ Module Tabs
Сторінка на extensions.joomla.org
Демонстрація модуля SJ Module Tabs

Модуль JE Tabs

Модуль JE Tabs — цікаві задумка (правда останнє оновлення 2015 року). Після встановлення у менеджері модулів переходимо в налаштування JE Tabs.

Вкладка «Модуль» дозволяє задати колір тексту, анімацію, увімкнути  jQuery, вибрати стиль тексту.

Tabs Joomla!

Не забуваємо зробити прив’язку до пунктів меню:

Tabs Joomla!

Вкладка «>>> Manage Tabs <<<» слугує для додавання вкладок. Напроти «Tab Title» пишемо назву вкладки, а напроти «Tab Text» — текст, який має міститися у вкладці.

Tabs Joomla!

В пункті меню «Дополнительные параметры» можна задати  HTML-тег модуля, Розмір Bootstrap, HTML-тег заголовка, CSS-клас заголовка, Стиль модуля.

Tabs Joomla!

Щоб додати модуль в статтю потрібно: Материалы → Менеджер материалов → Создать материал. Далі клацаємо по кнопці (тексту) модуль та вибираємо «JE Tabs». Код в редакторі Joomla! Буде приблизно виглядати так: "loadmodule mod_je_tabs,JE Tabs". Зберігаємо матеріал та отримуємо свої вкладки:

Tabs Joomla!

Tabs Joomla!

Tabs Joomla!

Сайт модуля JE Tabs
Демонстрація JE Tabs

Плагін Crazy Tab Slider Embeding

Плагін Crazy Tab Slider Embeding повністю безкоштовний та має чималу кількість налаштувань. Вкладки можна виводити у верхній та нижній позиціях, а також лівій та правій.

Вкладка «Плагин». На даній вкладці можна видалити шорткоди із спливаючих вікон, RSS, форм, які працюють на Ajax. Можна приховати на домашній сторінці (Skip Home page). Опція «Select Menu(s)» дозволяє вибрати меню чи окремі категорії на яких буде включений даний плагін.

Tabs Joomla!

Вкладка «Com_Content Component Setting» відповідає за параметри ввімкнення/вимкнення плагіну в контенті. Зверніть увагу на опцію «Exclude Categories». В ній задаються категорії, де даний плагін працювати не буде (тобто вони виключаються).

Tabs Joomla!

В кого встановлений компонент K2, то для налаштувань використовуйте вкладку «Com_K2 Component Setting»  

Tabs Joomla!

І завершує налаштування плагіна вкладка «== Tab Slider Default Setting ==». Саме в ній задається позиція виведення вкладок (Tabs Position), ширина контенту та ін.

Tabs Joomla!

Приклад виклику плагіна для вставлення в контент:
{cbtabslider behavior=Tabs}
{cbtabslide title=”Вкладка 1″}Контент вкладки 1{/cbtabslide}
{cbtabslide title=”Вкладка 2″}Контент вкладки 2{/cbtabslide}
{/cbtabslider}

Приклад адміністративна частина:

Tabs Joomla!

Приклад фронтальна частина:

Tabs Joomla!

Сайт плагіна Crazy Tab Slider Embeding
Сторінка на extensions.joomla.org
Демонстрація плагіна Crazy Tab Slider Embeding

Модуль SP Tab

Модуль «SP Tab» виконує таку ж функцію як і SJ Module Tabs. Тобто виводить у вкладках різні модулі. Досить добре налаштовується, має вбудовані стилі, а також дає можливість використовувати свої.

Після встановлення не забудьте прив’язати модуль на всіх (чи вибраних вами) сторінках.

Розглянемо основні вкладки. Вкладка «Параметры» дозволяє вибрати модулі для відображення у вкладках. «Navigation position» визначає розміщення вкладок (зверху чи знизу). «Navigation Height» — задає висоту вкладок в пікселях. Решта можна проекспериментувати самому.

Tabs Joomla!

Вкладка «Preset Styles» дозволяє вибрати один із встановлених стилів або налаштувати самому.

Tabs Joomla!

«Animation Options» — керування анімацією. Можна вибрати як буде показуватися контент у вкладках (з анімацією чи без). Наприклад, опція «Activator» дозволяє вибрати спосіб переходу між вкладками: по наведенні курсору миші чи при клацанні на вкладку.

Tabs Joomla!

У вкладці «Дополнительные параметры» можна налаштувати кешування та ін.  

Tabs Joomla!

Скриншот із фронтальної частини сайту.

Tabs Joomla!

Сайт модуля SP Tab
Сторінка на extensions.joomla.org
Демонстрація модуля SP Tab

Модуль JM Simple Tabs

JM Simple Tabs — прив’язуємо на потрібних (або всіх) пунктах меню та переходимо в налаштування.

Tabs Joomla!

На вкладці «Модуль» натискаємо на кнопку «Add new» та заповнюємо заголовок (Title), підзаголовок (Subtitle, за потреби) та вставляємо контент (Content). Можна вибрати іконку чи зображення (Icon (image)) та іконку чи зображення при наведенні на вкладку курсора миші (Image (on hover and active)). Після цього натискаємо «Save item». Для інших вкладок повторюємо дії. Опція «Tabs align» визначає положення вкладок.

Tabs Joomla!

На вкладці «Дополнительные параметры» вмикаємо чи вимикаємо кешування, розмір Bootstrap, додаємо Суфікс CSS-класу модуля та ін.

Скриншот із фронтальної частини сайту:

Tabs Joomla!

Сайт модуля JM Simple Tabs
Сторінка на extensions.joomla.org
Демонстрація модуля JM Simple Tabs

Модуль BM Articles Tab

BM Articles Tab — модуль для виведення із категорій матеріалів та показ їх у вигляді вкладок. Встановлюємо та переходимо в менеджер модулів, де знаходимо BM Articles Tab. Робимо прив’язку на сторінках та переходимо в основну вкладку налаштувань — «Модуль».

Tabs Joomla!

Основні налаштування:

  • Категория — вибір однієї, декількох чи всіх категорій для виведення із них матеріалів.
  • Featured Articles — рекомендовані статті: показати/приховати;
  • Count — ввести числом кількість матеріалів (за умовчанням 5);
  • Order — сортувати за;
  • Authors — вказувати авторство чи ні;
  • Image's link — активний лінк по зображенню: так/ні;
  • mage's width — ширина зображень;
  • Image's height — висота зображень;
  • Show image — показати зображення: так/ні;
  • Select Resize Type — тип зміни розміру зображення;
  • Select effect — виберіть ефект;
  • Title limit — ліміт заголовку;
  • Show title — показати заголовок;
  • Readmore Limit — ліміт вступного тексту;
  • Show description — показати опис;
  • Kept Html — (точно не знаю але схоже на те, чи зберігати опис в Html);
  • Show readmore — показати «читати далі…»;
  • Readmore label — назва кнопки «читати далі…»;
  • Tab color — колір вкладки.

Налаштували, вибрали позицію, опублікували та натискаємо зберегти.

Скриншот фронтальної частини сайту:

Tabs Joomla!

Одне, що я ніяк не зміг заставити показувати це зображення. Можливо, у вас все вийде. А так модуль непоганий

Сайт модуля BM Articles Tab
Сторінка на extensions.joomla.org
Демонстрація модуля BM Articles Tab

Модуль Webhaus Responsive Tabs

Розглянемо ще один модуль: «Webhaus Responsive Tabs». На вкладці «Модуль» задаються розміри у пікселях. Але це, за словами автора, потрібно лише для правильного відображення у браузері IE8.

В модулі доступно п’ять вкладок. Кожна має заголовок (Tab title) та поле для вставляння тексту (Tab content). Мені сподобалося те, що контент можна редагувати за допомогою візуального редактора. Таким чином можна окремо задати стилі відображення тексту для кожної вкладки.

Tabs Joomla!

Скриншот фронтальної частини:

Tabs Joomla!

Сайт модуля Webhaus Responsive Tabs
Сторінка на extensions.joomla.org
Демонстрація модуля Webhaus Responsive Tabs

Модуль RokSprocket

RokSprocket — встановлюємо та переходимо в менеджер модулів. Натискаємо на кнопку «Создать» та клацаємо на «RokSprocket Module». Напроти «Заголовок» пишемо назву для нашого модуля. Процес створення розбитий на 3 частини.

  • 1. Вибираємо потрібний елемент (даний модуль, крім вкладок дозволяє додавати і інші елементи — дивимось скриншот).
  • 2. Pick a Content Provider — вибираємо Joomla.
  • 3. Create Module — натискаємо Continue.

Tabs Joomla!

Основна вкладка «Options». Натискаємо «Add Specific Articles» та вибираємо модулі, які будуть показуватися у вкладках. Повторюємо дію для інших модулів.

Tabs Joomla!

Tabs Joomla!

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

Tabs Joomla!

Модуль має дуже багато налаштувань. Описувати їх не бачу сенсу. Тут все сугубо індивідуально. А якщо врахувати те, що крім вкладок модуль може працювати і з іншими елементами, то він заслуговує на увагу. Сама студія RocketTheme робить якісні продукти.

Опишу деякі параметри:

Tabs Joomla!

  1. Theme — дозволяє задати тему для відображення вкладок в модулі. Все залежить від шаблону.

  2. Display Limit — встановлює кількість елементів, які будуть відображатися при візуалізації: 0 або ∞ (необмежено);

  3. Tabs Position — значення встановлює де в модулі будуть з’являтися вкладки;

  4. Animation — дозволяє встановити тип анімації, яка буде відтворена при переході від одної вкладки до іншої;

  5. Autoplay — вказує, чи потрібно, щоб модуль автоматично розпочав переміщення за допомогою вкладок під час завантаження сторінки або до очікував команди від відвідувача;

  6. Autoplay Delay — змінює час між циклічними вкладками в модулі. Чим довша ця затримка (у секундах), тим довше одна стаття буде відображатися в модулі;

  7. Image Resize — ця опція дозволяє встановити максимальну ширину/висоту ескізу;

  8. Preview Length — параметр, який встановлює довжину (в словах) попереднього перегляду вмісту для кожного елемента;

  9. Strip HTML Tags — параметр, який дозволяє видалити чи зберегти теги HTML у описі статті;

  10. Default Title — встановлення назви за умовчанням або вказати іншу/взагалі відмовитися від назви;

  11. Default Icon — вибір іконки для вкладки;

  12. Default Link — визначає посилання за умовчанням;

  13. Default Article Text — дозволяє задати текст статті за умовчанням із всіх вкладок у модулі. Якщо значення не змінене, то використовується вступний текс статті.

Сайт модуля RokSprocket
Сторінка на extensions.joomla.org
Демонстрація модуля RokSprocket

Модуль SP Accordion module

SP Accordion module — простий модуль акордеону для виведення матеріалів із вказаних категорій. Після інсталяції переходимо в налаштування модуля та у вкладці «Модуль» напроти опції «Category» вибираємо категорії із яких будуть виводитися матеріали. Якщо потрібно вставити «Читати далі…», то ставимо так напроти «Show Readmore». Опція «Article Field to Order By» дозволяє сортувати матеріали за датою, заголовками, хітами та ін. Решта налаштовується вже із ваших вподобань.

Tabs Joomla!

Далі вибираємо позицію, публікуємо та бачимо результат:

Tabs Joomla!

Сайт модуля SP Accordion module
Сторінка на extensions.joomla.org

Демонстрація модуля SP Accordion module

Модуль Tabs GK5

Модуль вкладок «Tabs GK5» має трішки іншу панель керування. Налаштувань навіть більше ніж достатньо. Публікуємо модуль та вибираємо позицію відображення на сайті, наприклад, «footer». Не забуваємо увімкнути прив’язку до пунктів меню.

Переходимо на вкладку «Tabs» та натискаємо «Add new tab». Заповнюємо заголовок (Title:) та контент (Content:). Зберігаємо (Save) і повторюємо дії для додавання потрібної кількості вкладок.
Анімацію, позицію та інші параметри підбирайте під свій дизайн сайту.

Tabs Joomla!

Скриншот фронтальної частини сайту:

Tabs Joomla!

Сайт модуля SP Accordion module
Сторінка на extensions.joomla.org

До речі, можна скористатися плагіном для вставлення шорткодів від розробника bdthemes. Він має дві версії. Безкоштовна має меншу кількість шорткодів але і тієї кількості, що є вистачить практично всім.

 

Із переліченого вище обов’язково знайдеться те, що вам необхідно, а якщо ні — платний варіант:). Я для своїх цілей вибрав плагін Tabs and Sliders. Він має невеликий розмір та оновлюється при внесенні змін у CMS Joomla!, а також виправляються помилки та вноситься додатковий функціонал.

 

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

Додати коментар


© 2020-z-soft