< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Joomla » Правильное подключение стилей и JS плагинов в Joomla

Правильное подключение стилей и JS плагинов в Joomla

Правильное подключение стилей и JS плагинов в Joomla

Пост был обновлен: Ноя 10, 2016

Всем привет! В прошлой статье я рассказывал о jQuery плагине модальных окон для сайта Magnific Popup. В статье я затронул подключение плагина к сайту, но в данной статье хочу показать, как правильно подключать стили, jQuery плагины и скрипты на Joomla (в том числе и инициализация плагинов). В комментариях к статье как-то интересовались этим вопросом и конкретно интересовала Joomla. Ну что ж, думаю этот вопрос многих заинтересует. В качестве примера подключения плагина возьму опять таки Magnific Popup. Все остальные плагины подключаются примерно также.

Подключение стилей

Давайте сначала подключим файл стилей, т.к. сначала всегда подключаются стили, а потом уже скрипты на JS. Обычно файл стилей обзывают — style.css. Он может быть общим, также могут быть и дополнительные — меню (menu.css), адаптивная сетка (gride.css), типографика (typography.css) и т.д.

Итак, для подключения стилей открываем главный файл вашего шаблона — index.php. Расположен он по адресу — «/templates/папка вашего шаблона/index.php«. Открываем данный файл любым текстовым редактором, а еще лучше редактором кода — Sublime, Notepad++ и др. и в начале документа выше кода «defined(‘_JEXEC’) or die;» вставляем следующий код:

$doc = JFactory::getDocument();
$baseUrl = JUri::base();

$doc->addStyleSheet($baseUrl.'templates/'.$this->template.'/css/style.css');

У меня файл стилей style.css лежит в папке «CSS». Проследите за тем, чтобы был указан именно правильный адрес до файла стилей. Обратите внимание в адресе вместо названия папки шаблона подставлен код «$this->template«. Данный код автоматически выводит название папки шаблона, т.е. если вы вдруг переименуете папку, то новое название папки  выведется автоматически.

Также желательно все пути до стилей и скриптов указывать в абсолютном виде, т.е. с доменом сайта. Для этого мы создаем переменную «$baseUrl» и заносим в нее значение «JUri::base()«. Можно конечно сразу в путь дописать «JUri::base()«, не создавая переменную. Но так лучше делать, если вы используете «JUri::base()» только один раз, а если хотя бы 2 раза и более, то лучше уже через переменную. Таким образом, код будет быстрее интерпретироваться сервером и потреблять меньше памяти. На глаз вы можете это и не заметить, но тем не менее нужно делать именно так.

В результате в исходном коде страницы в секции «<head></head>» у нас появится строка подключения файла стилей.

<link rel="stylesheet" href="http://ваш домен.ru/templates/ваш шаблон/css/style.css" type="text/css" />

Если вы хотите подключить несколько файлов стилей, то просто копируете подключение выше и меняете имя файла.

$doc->addStyleSheet($baseUrl.'templates/'.$this->template.'/css/gride.css');
Внимание! Переменные $doc и $baseUrl не копируйте. Они создается один раз и все.

Можно также подключить еще один файл стилей в самом файле style.css, используя импорт — @import url(‘путь до файла’). Открываете подключенный файл стилей, в моем случае это файл style.css, и в самом начале вставляете следующий код — @import url(‘gride.css’); У меня файл gride.css лежит в той же папке, что и файл style.css. Если у вас они лежат в разных папках, то указывайте правильный путь.

Все, с подключением стилей разобрались. Теперь давайте перейдем к скриптам.

Читайте также:  Как сделать резервную копию сайта на joomla 3? Akeeba backup - резервная копия сайта по шагам в картинках

Подключение скриптов

Скрипты подключаются примерно также, как и стили. Ниже строки подключения стилей выводим следующий код:

$doc->addScript($baseUrl.'templates/'.$this->template.'/js/magnific-popup.min.js');

В результате в исходном коде страницы в секции «<head></head>» получим строку подключения скрипта Magnific Popup:

<script src="http://ваш домен.ru/templates/ваш шаблон/js/magnific-popup.min.js" type="text/javascript"></script>

Вообще, я в последнее время не подключаю скрипты в head, т.к. скрипты тормозят загрузку страницы. Я подключаю их в конце документа до закрывающего тега «</body>«. Подключение делаю следующим образом:

<script src="/templates/<?php echo $this->template ?>/js/magnific-popup.min.js"></script>

Как видим здесь скрипт подключается также, как и в любом другом html-документе.

Подключение скриптов в зависимости от jQuery (jQuery плагины)

Теперь давайте поговорим о том, как подключать jQuery плагины. jQuery плагин это скрипт, написанный на языке программирования javaScript, используя методы jQuery, но тут есть некоторые моменты в подключении вместе с библиотекой jQuery.

Сразу скажу о порядке подключения. Если ваш скрипт работает в зависимости от jQuery, (любой jQuery плагин), то его подключение всегда должно идти ниже подключения библиотеки jQuery. JQuery всегда идет выше. Далее, инициализация плагина — инициализация всегда идет ниже подключения самого плагина. Получается следующая иерархия:

  1. подключение jQuery;
  2. подключение плагина jQuery;
  3. инициализация плагина

Подключать нужно именно в таком порядке, иначе ничего работать не будет, а в консоль логе вы получите ошибку, впрочем об ошибках мы еще поговорим ниже.

Как я говорил выше в Joomla скрипты я подключаю в нижней части страницы, а библиотека jQuery подключена в секции «<head></head>«, правда подключение из ядра Joomla я отключаю и подключаю из CDN с помощью небольшого плагина. Как это делать я расскажу в следующей статье, поэтому подписывайтесь на обновления. Также, я отключаю библиотеку Mootools, которая также подключается из ядра. Иногда она вызывает конфликты скриптов, да и не нужна она вовсе. Сегодня практически все плагины работают на jQuery.

Покажу подключение и инициализацию плагина Magnific Popup на примере:

<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/templates/<?php echo $this->template ?>/js/magnific-popup.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $('.popup-content').magnificPopup({
            type: 'inline'
        });
    });
</script>

Инициализацию (вызов плагина) надо всегда обрамлять кодом

jQuery(document).ready(function($) {
...
});

которая говорит браузеру, что инициализировать плагин нужно, когда объектная модель страницы уже загружена и готова к работе. Иначе, у вас работать ничего не будет. Также вы можете встретить и такое обрамление:

$(document).ready(function() {
...
});

Это одно и тоже, просто в первом случае мы локализуем псевдоним «$«, чтобы он у нас не конфликтовал с другими библиотеками, которые могут быть подключены на сайте. Например, библиотека Mootools в Joomla. Есть также и такая запись:

(function($){
...
})(jQuery);

Я всегда пользуюсь первым вариантом.

Также хотелось бы отметить, что подключать стили скрипты можно не только в файле index.php, но и во внутренних страницах. Например, у вас модальное окно работает только на определенной странице определенного компонента. В этом случае логичнее будет сделать подключение стилей и скриптов именно в шаблоне данного компонента, отвечающий за вывод содержимого. К примеру, это может быть страница товара магазина Joomshopping. Для того, чтобы подключить стили вставим на страницу шаблона знакомые строчки:

<?php
$doc = JFactory::getDocument();
$baseUrl = JUri::base();
$doc->addStyleSheet($baseUrl.'templates/папка шаблона/css/style.css');
?>

Как видим подключение файла стилей ничем не отличается от подключения в файле index.php шаблона сайта. Только единственное здесь вместо кода «$this->template» не будет выводиться название вашего шаблона. Вписываем его руками. Также в секцию «<head></head>» можно сразу вставить стили. Для этого вставим следующий код:

<?php
$doc = JFactory::getDocument();

// Добавление стилей в Head
$style = 'body {'
 . 'background: #00ff00;'
 . 'color: rgb(0,0,255);'
 . '}';
$doc->addStyleDeclaration($style);
?>

Таким же образом подключаем и скрипты:

$doc = JFactory::getDocument();
$doc->addScript($baseUrl.'templates/папка шаблона/js/magnific-popup.min.js');

Добавим код javaScript в Head документа:

<?php
$doc = JFactory::getDocument();

// Добавление кода JS в Head
$doc->addScriptDeclaration('
    jQuery(document).ready(function($) {
        $('.popup-content').magnificPopup({
            type: 'inline'
        });
    });
');
?>

Подробнее про подключение стилей и скриптов вы можете прочитать в официальной документации Joomla. Если загляните в документацию, то заметите, что подключать стили и скрипты можно также и через класс JHtml. Примерно так:

<?php
    JHtml::stylesheet('com_search/search.css', array(), true);
    JHtml::script('com_search/search.min.js');
?>

Честно сказать, не увидел особой разницы между двумя этими методами. Если вдруг кто знает можете отписаться в комментариях, буду очень признателен. Второй вариант может показаться даже проще.

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

Возможные ошибки. Консоль браузера

Бывает такое, что вроде бы все сделали правильно, а не работает. Что не так и где искать ошибку? В первую очередь необходимо заглянуть в консоль браузера на наличии в нем ошибок. Чтобы открыть консоль на открытой в браузере странице нажимаем клавишу «F12» и в открывшемся инспекторе кода переключаемся на вкладку «Console». Вот как выглядит консоль в браузере Google Chrome.

Консоль Google Chrome

Вот как выглядит консоль в Mozilla Firefox:

Консоль в браузере Mozilla Firefox

Консоль в Firebug браузера Mozilla Firefox. Для тех, кто не знает что такое Firebug — это расширение для Firefox инспектора кода, написанный сторонним разработчиком.

Консоль в Firebug

Обычно для верстки сайтов я использую браузер 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 использует алиас «$«, поэтому нужно ее локализовать. Как это сделать я писал выше и показывал три варианта.

Если вы получите ошибку и не знаете в каком коде ее искать, то можете щелкнуть по ссылке в правой части окна и открыть документ в котором находится код, вызвавший ошибку.

Ссылка на код, вызвавший ошибку

Вот наверно на это все, что я хотел рассказать. Надеюсь я помог вам разобраться и теперь вы поняли что к чему. Будут вопросы — задавайте в комментариях, с удовольствием отвечу.

Пока и до новых встреч!

Пост был обновлен: Ноя 10, 2016

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (5 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

11 комментариев к статье "Правильное подключение стилей и JS плагинов в Joomla"

  • anurik Мар 09, 2017 в 15:10

    Здравствуйте. Сейчас занимаюсь скоростью сайта. PageSpeed Insights просит удалить css и javascript. Есть идеи?

    • Заур Магомедов
      Заур Магомедов Мар 09, 2017 в 15:58

      Здравствуйте! Идеи есть, но это сложновато будет. Если у вас нет опыта в веб-разработке, то лучше использовать плагины, например, jch optimize или autoptimize. Если хотите немного заморочиться, то читайте тут.

      • anurik Мар 11, 2017 в 13:45

        Что надо делать, чтобы удовлетворить PageSpeed Insights? чтобы знать смогу ли сам сделать. jch optimize не помогает.

        • Заур Магомедов
          Заур Магомедов Мар 11, 2017 в 16:37

          Попробуйте плагин autoptimize. Мне он немного помог. Я бы не советовал вам особо заморачиваться с этим пейдж спидом. Доведите до желтой зоны и хватает. Все равно большого эффекта не почувствуете от зеленой зоны, разве что только для успокоения души.

  • Вячеслав Фев 21, 2017 в 17:45

    Здравствуйте!
    а как добавить в строку
    $doc->addStyleSheet($baseUrl.’templates/’.$this->template.’/css/style.css’);
    условие для мобильных устройств
    media=»only screen and (max-device-width: 480px)» ?
    спасибо.

    • Заур Магомедов
      Заур Магомедов Фев 21, 2017 в 18:52

      Для чего вам это, не понимаю? Используйте медиа запросы и пишите код для мобильных.

      Можно на javascript использовать что-то типа:

      <script>
      if (screen.width <= '480') {
         document.write ('<link rel="stylesheet" href="/templates/you_template/css/mobile-style.css" />');
      }
      else
      {
       document.write ('<link rel="stylesheet" href="/templates/you_template/css/desktop-style.css" />');
      }
      </script>
      
      • Вячеслав Фев 22, 2017 в 6:16

        Ваша статья называется «Правильное подключение стилей и JS плагинов в Joomla»! Вот я и хотел бы знать, как правильно подключить таблицу стилей для мобильных устройств, используя описанный Вами метод.
        мне нужно в результате получить

        можно конечно просто ручками прописать в сеции , но меня интересует как добавить через

        • Вячеслав Фев 22, 2017 в 6:18

          получить

          <link rel="stylesheet" href="http://домен.ru/templates/шаблон/css/style.css" type="text/css" media="only screen and (max-device-width: 480px)" />

          через

          <jdoc:include type="head" />
          • Заур Магомедов
            Заур Магомедов Фев 22, 2017 в 11:39

            Это я вам не могу сказать.

  • Дмитрий Сен 27, 2016 в 13:01

    Спасибо большое)
    Статья мне помогла)

    • Заур Магомедов
      Заур Магомедов Сен 27, 2016 в 13:25

      Не за что!

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]