Правильне підключення стилів і js плагінів в joomla
підключення стилів
Давайте спочатку підключимо файл стилів, тому що спочатку завжди підключаються стилі, а потім вже скрипти на JS. Зазвичай файл стилів обзивають - style.css. Він може бути загальним, також можуть бути і додаткові - меню (menu.css), адаптивна сітка (gride.css), типографіка (typography.css) і т.д.
Також бажано все шляху до стилів і скриптів вказувати в абсолютному вигляді, тобто з доменом сайту. Для цього ми створюємо змінну «$ baseUrl» і заносимо в неї значення «JUri :: base ()«. Можна звичайно відразу в шлях дописати «JUri :: base ()«, не створюючи змінну. Але так краще робити, якщо ви використовуєте «JUri :: base ()» тільки один раз, а якщо хоча б 2 рази і більше, то краще вже через змінну. Таким чином, код буде швидше інтерпретуватися сервером і споживати менше пам'яті. На око ви можете це і не помітити, але тим не менше потрібно робити саме так.
В результаті у вихідному коді сторінки в секції «
»У нас з'явиться рядок підключення файлу стилів.
Якщо ви хочете підключити кілька файлів стилів, то просто копіюєте підключення вище і міняєте ім'я файлу.
Увага! Змінні $ doc і $ baseUrl не копіюйте. Вони створюється один раз і все.
Можна також підключити ще один файл стилів в самому файлі style.css, використовуючи імпорт - @import url ( 'шлях до файлу'). Відкриваєте підключений файл стилів, в моєму випадку це файл style.css. і на самому початку вставляєте наступний код - @import url ( 'gride.css'); У мене файл gride.css лежить в тій же папці, що і файл style.css. Якщо у вас вони лежать в різних папках, то вказуйте правильний шлях.
Все, з підключенням стилів розібралися. Тепер давайте перейдемо до скриптів.
Читайте також: Панель управління Joomla 2.5. Переклад Joomla 2.5 на українську мову
підключення скриптів
Скрипти підключаються приблизно також, як і стилі. Нижче рядка підключення стилів виводимо наступний код:
Взагалі, я останнім часом не підключаю скрипти в head. тому скрипти гальмують завантаження сторінки. Я підключаю їх в кінці документа до закриває тега «
«. Підключення роблю наступним чином:
Як бачимо тут скрипт підключається також, як і в будь-якому іншому html-документі.
Підключення скриптів в залежності від jQuery (jQuery плагіни)
Відразу скажу про порядок підключення. Якщо ваш скрипт працює в залежності від jQuery, (будь-jQuery плагін), то його підключення завжди має йти нижче підключення бібліотеки jQuery. JQuery завжди йде вище. Далі, ініціалізація плагіна - ініціалізація завжди йде нижче підключення самого плагіна. Виходить наступна ієрархія:
підключення jQuery;
підключення плагіна jQuery;
ініціалізація плагіна
Підключати потрібно саме в такому порядку, інакше нічого працювати не буде, а в консоль балці ви отримаєте помилку, втім про помилки ми ще поговоримо нижче.
Як я говорив вище в Joomla скрипти я підключаю в нижній частині сторінки, а бібліотека jQuery підключена в секції «
«, Правда підключення з ядра Joomla я відключаю і підключаю з CDN за допомогою невеликого плагіна. Як це робити я розповім в наступній статті, тому підписуйтесь на оновлення. Також, я відключаю бібліотеку Mootools, яка також підключається з ядра. Іноді вона викликає конфлікти скриптів, та й не потрібна вона зовсім. Сьогодні практично всі плагіни працюють на jQuery.
Покажу підключення і ініціалізацію плагіна Magnific Popup на прикладі:
Ініціалізацію (виклик плагіна) треба завжди оточувати кодом
яка говорить браузеру, що форматувати плагін потрібно, коли об'єктна модель сторінки вже завантажена і готова до роботи. Інакше, у вас працювати нічого не буде. Також ви можете зустріти і таке обрамлення:
Це одне і теж, просто в першому випадку ми локалізуємо псевдонім «$«, щоб він у нас не конфліктував з іншими бібліотеками, які можуть бути підключені на сайті. Наприклад, бібліотека Mootools в Joomla. Є також і такий запис:
Я завжди користуюся першим варіантом.
Також хотілося б відзначити, що підключати стилі скрипти можна не тільки в файлі index.php, а й у внутрішніх сторінках. Наприклад, у вас модальне вікно працює тільки на певній сторінці певного компонента. У цьому випадку логічніше буде зробити підключення стилів і скриптів саме в шаблоні даного компонента, що відповідає за виведення вмісту. Наприклад, це може бути сторінка товару магазину Joomshopping. Для того, щоб підключити стилі вставимо на сторінку шаблону знайомі рядки:
Як бачимо підключення файлу стилів нічим не відрізняється від підключення в файлі index.php шаблону сайту. Тільки єдине тут замість коду «$ this-> template" не буде виводитися назва вашого шаблону. Вписуємо його руками. Також в секцію «
»Можна відразу вставити стилі. Для цього вставимо наступний код:
Таким же чином підключаємо і скрипти:
Детальніше про підключення стилів і скриптів ви можете прочитати в офіційній документації Joomla. Якщо загляньте в документацію, то помітите, що підключати стилі і скрипти можна також і через клас JHtml. Приблизно так:
Читайте також: Сторінка 404 в Joomla 3. Як створити сторінку 404-ої помилки засобами Joomla?
Можливі помилки. консоль браузера
Буває таке, що начебто все зробили правильно, а не працює. Що не так і де шукати помилку? В першу чергу необхідно заглянути в консоль браузера на наявності в ньому помилок. Щоб відкрити консоль на відкритій в браузері сторінці натискаємо клавішу «F12» і в інспектора коду перемикається на вкладку «Console». Ось як виглядає консоль в браузері Google Chrome.
Ось як виглядає консоль в Mozilla Firefox:
Консоль в Firebug браузера Mozilla Firefox. Для тих, хто не знає що таке Firebug - це розширення для Firefox інспектора коду, написаний стороннім розробником.
Зазвичай для верстки сайтів я використовую браузер Firefox, і користуюся вбудованої консоллю, але буває і таке, що відкриваю Firebug. Тому я його тримаю на всякий випадок.
З консоллю розібралися, тепер перейдемо до помилок ...
Uncaught referenceError: JQuery is not defined
Дана помилка говорить про те, що не знайдено бібліотека jQuery. Тут є два варіанти - або ви неправильно вказали шлях до jQuery, або у вас jQuery підключена нижче інших скриптів. Рішення я думаю ви зрозуміли яке повинно бути.
TypeError: $ (...). *** is not a function
Замість *** буде підставлений метод, який створює плагін jQuery. Наприклад, в Magnific Popup це метод - «magnificPopup (); «. Так ось, якщо ви не підключите сам плагін Magnific Popup (я беру його для прикладу) і створите виклик даного плагіна, то в консолі у вас може з'явитися наступна помилка - «TypeError: $ (...) .magnificPopup is not a function». Така помилка може виникнути також, якщо ви підключите сам плагін нижче коду ініціалізації скрипта.
TypeError: $ (...) .ready is not a function
Дана помилка може виникнути, якщо ви не локалізували алиас «$«. Наприклад, якщо на вашому joomla сайті підключена бібліотека Mootools, то вам слід знати, що Mootools також, як і jQuery використовує алиас «$«, тому потрібно її локалізувати. Як це зробити я писав вище і показував три варіанти.
Якщо ви отримаєте помилку і не знаєте в якому коді її шукати, то можете клацнути по посиланню в правій частині вікна і відкрити документ в якому знаходиться код, який викликав помилку.
