Існуючі сторонні меню і вибір одного з них
Почну з невеличкої замітки: на сьогоднішній день вже існує досить велика кількість різноманітних меню під різні версії Joomla. Але у кожного з них є свій нюанс, і часом вони "криво" встановлюються на сайт або зовсім не підходять під потрібний шаблон. Щось поповзло, щось поїхало, ну. Ви і так прекрасно розумієте, про що я. Так ось, коли дуже потрібен модуль меню - правильно працює і не конфліктує з потрібним шаблоном - залишається два шляхи: купувати готовий модуль або написати його самому.
Перший виникає питання - з чого почати? А починати потрібно з розуміння, що ми хочемо отримати в результаті. Чи потрібно нам неймовірне динамічне меню з красивими ефектами "випливання" або ковзання, але яке потрібно дуже акуратно адаптувати під всі сучасні браузери? Щоб не дай Бог десь показати його або "випливало" не так, як потрібно. Або ж взяти просте меню, що випадає без ефектів і наворотів, але з гарантією правильної роботи в будь-якому браузері. Не знаю як Ви, а я ціную практичність і простоту. Тому обираю другий варіант. Але незалежно від того, яким шляхом йти, - необхідно вибрати те саме стороннє меню, з якого будемо випилювати наш модуль для Joomla.
Якщо Ви перейдете по посиланню і ознайомитеся з прикладами безкоштовних меню і уроками по їх створенню і вставці на Ваш сайт, то знову побачите - з усіх цих прикладів меню є наворочені, а є простіше. Я зупинився на наступному варіанті - 27. Simple jQuery Dropdowns. який Ви побачите, перейшовши за посиланням. Результат його переробки під модуль Joomla Ви в даний момент бачите на нашому сайті. Саме його я взяв за основу для адаптації під Joomla і на ньому покажу техніку написання модуля меню. Вибрав його з двох основних причин:
Що ще потрібно для гарного меню? ;)
Визначаємо кроки, необхідні для адаптації меню під Joomla і перетворення його в модуль
Отже, ми визначилися з вибором стороннього меню, знайшли прийнятний варіант і завантажили. Далі, звичайно, можна почати вивчати код, який змушує вбрання меню працювати. У більшості (якщо не у всіх) прикладах меню, які викачуються, демонстрація меню представляє з себе наступні файли:
Далі, коли ми розібралися з тим, що з себе представляє демо-приклад стороннього меню, ми повинні зробити наступні речі:
1. Написати порожній модуль- "заглушку" для Joomla і встановити його на наш сайт Joomla. Включити його через адмін-панель і встановити в потрібну позицію шаблону.
2. Прямо в установлений на сайт модуль-заглушку послідовно вставляти шматки коду з завантаженого нами прикладу. Тобто методом "Копіювати-Вставити" робимо перенесення CSS-стилів, розмітки, картинок і іншого. Якщо CSS-стилі можна вставляти спочатку прямо без змін, то html-код буде потрібно значно видозмінити, оскільки ми хочемо замість статичних демо-пунктів меню отримати реальні пункти внутрішнього меню Joomla.
3. "Доводити" код в нашій заглушці до стану готовності, тобто коли зовнішній вигляд меню і його правильна робота з ядром Joomla не стануть прийнятними для нас. Це частина найскладніша, оскільки тут вступають в силу такі нюанси, як коректна робота меню під максимальну кількість шаблонів і знання внутрішнього устрою меню Joomla. Хоча, якщо Ви не робите комерційний модуль, про це можна не турбуватися - головне, щоб меню працювало правильно хоча б у Вашому конкретному шаблоні. Таким чином, на цьому етапі наша порожня "заглушка" -модуль поступово перетвориться в повністю робочий модуль меню.
4. Коли модуль готовий, вирізати його в окрему папку, заархівувати і перетворити в повноцінний дистрибутив модуля меню Joomla.
Мабуть, я не зможу в цій статті охопити всі нюанси "доведення" модуля, оскільки в кожному конкретному випадку вона абсолютно різна і вимагає винахідливості, навичок, творчої складової, "бачення" як модуль повинен працювати, ну і, звичайно, великого бажання зробити свій модуль меню. Однак я поясню Новомосковсктелю наступні речі:
1. Як взяти порожню заглушку-модуль, і зробити з неї модуль меню
2. На що звернути увагу при доопрацюванні заглушки
3. Як влаштована внутрішня реалізація меню Joomla. Ми напишемо свій клас-помічник, який дозволить зручно працювати з меню.
Установка модуля-заглушки для майбутнього меню
Заглушку (майбутній модуль меню) назвемо mod_colormenu. Внутрішня структура модуля-заглушки буде стандартна для більшості модулів, і буде складатися з наступних файлів і каталогів:
Наша заглушка - це по суті найпростіший, "порожній" модуль-каркас для Joomla 2.5, і я не візьмуся пояснювати, як його написати для економії часу і місця.
Якщо Ви ще не знайомі з написанням модулів під Joomla 2.5, то знайти подібну інформацію про те, як написати Ваш перший модуль "HelloWorld" з нуля, можна тут.
Встановлюємо її на сайт (бажано локальний), де буде вестися розробка модуля меню, тому що нам знадобиться мати повний доступ до файлів встановленої заглушки. У нашому прикладі я вибрав стандартний шаблон Joomla Beez_20 для front-end частини і встановив модуль в позицію position-1:
А так наш модуль-заглушка виглядає на самому сайті. Як бачите, поки він просто виводить рядок тексту "Це заглушка для модуля меню":
наповнення заглушки
Після того, як ми встановили заглушку на сайт, починаємо потихеньку перетворювати її в повноцінний модуль. Щоб уникнути багаторазових установок, я вважаю за краще все правки робити прямо в тому місці, куди Joomla встановила модуль. Після того, як все працює належним чином, я упаковую файли модуля в архів і роблю повноцінний дистрибутив. Ми зробимо так само. Отже, переходимо в корінь сайту Joomla, і відкриваємо каталог з файлами нашої заглушки / modules / mod_colormenu /. Перше, що ми будемо робити - це наповнимо логікою файл helper.php. Створимо наступний клас MenuItem для зберігання елемента меню:
Копіюємо шматок коду з визначенням класу MenuItem. Наведений вище, і вставляємо його відразу після першого рядка, яка перевіряє санкционированность доступу до файлу helper.php:
Отже, на даному етапі у нас в файлі helper.php визначені два класи - MenuItem і клас помічника - modColorMenuHelper - він відразу був у файлі, але порожній, тобто без будь-якої логіки. Також, можна помітити, що метод render () класу MenuItem поки що порожній. Трохи пізніше ми напишемо код, який буде там використовуватися.
Меню Joomla з точки зору бази даних представлено у версії Joomla 2.5 в двох таблицях (для більш ранніх версій, наприклад 1.5 це також дві таблиці, однак склад полів у них вже інший):
- prefix_menu - в цій таблиці зберігаються всі елементи меню, причому це стосується всіх рівнів (вкладені елементи для меню 2-го, 3-го і т.д. рівнів також зберігаються в цій таблиці)
- prefix _menu_types - в цій таблиці зберігаються типи меню. Наприклад, якщо в менеджері меню Joomla ви створюєте нові меню, то вони потраплять в цю таблицю
* Prefix_ - це 5-ти символьний префікс таблиць в базі даних. Він визначається (генерується) на етапі початкової установки Joomla і відрізняється для різних баз даних. Наприклад, в моїй базі даних таблиця називається так: yrepq _menu. у вас вона буде називатися по-іншому.
Щоб краще розуміти - ось малюнок, де показана структура таблиці prefix _menu:
На замітку: на скріншотах ви можете бачити таблиці бази даних MySQL. Я рекомендую завантажити утиліту Navicat Lite для підключення до бази даних MySQL. Вона безкоштовна і дозволяє зручно переглядати всі таблиці Joomla. Завантажити її можна в нашому каталозі тут
Навіщо ми визначили клас MenuItem? По суті, в об'єктах даного класу будуть зберігатися записи з таблиці prefix _menu. В Joomla вже є механізм доступу до меню через системні виклики. Але на мій погляд, він не сильно зручний. Саме тому для зручного зберігання елемента меню і роботи з ним ми і написали клас MenuItem. Щоб ви краще орієнтувалися і розуміли, що собою являє цей клас, я приведу опис його полів:
Пишемо запит, який об'єднує таблиці menu і menu_types
Тепер, коли ми розглянули призначення полів класу я поясню, як написати SQL-запит до бази даних Joomla, який дозволить об'єднати дві таблиці: menu і menu_types. Навіщо об'єднувати ці таблиці? А для того, щоб порівняти кожен пункт меню з тим типом меню, для якого він заданий. Давайте поглянемо на малюнок, щоб краще розуміти, як об'єднуються таблиці по полю menutype:
Як бачимо поле menutype загальне для обох таблиць. І воно буде зв'язкою між пунктом меню і типом меню. якому він відповідає. Тепер залишилося написати такий SQL-запит і додати його в функцію в наш клас помічника modColormenuHelper. Функцію назвемо getDefMenuParams (від "get default menu params" - отримати параметри меню за замовчуванням):
Пишемо метод getMenuItems для отримання пунктів меню
Напишемо в нашому класі хелпера modColormenuHelper такий метод, який назвемо getMenuItems:
Після цього виклику ми маємо змінну $ menu. і через неї можемо отримати інформацію про пункти меню:
Але працювати з таким масивом не зовсім зручно, тому що ми не маємо структури для роботи з ієрархією меню. тобто такої структури, яка б дозволяла зручно зберігати інформацію про відносини "батько-нащадок" між пунктами меню. Саме тому ми писали свій клас MenuItem - щоб мати масив "дітей" (змінна класу $ children) для кожного типу меню. А в розглянутому щойно методі ми якраз заповнюємо цей масив дітей за наступним простому алгоритму:
1. Є масив пунктів меню $ resultItems. який повинні повернути на виході з методу
2. Якщо поточний оброблюваний пункт меню - вже батько, то просто додаємо його в масив $ resultItems
3. Якщо поточний оброблюваний пункт меню - НЕ батько, то ми біжимо по масиву $ resultItems і перевіряємо того з батьків, до якого потрібно додати поточний елемент як дочірній