Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Подключение собственных стилей CSS в шаблон сайта Joomla

Разобравшись, как подключить HTML-заголовки шаблона сайта в Joomla с помощью <jdoc:include type="head"/>, возникает вопрос: «Как подключить собственные CSS стили в шаблон сайта?» Для этого нужно воспользоваться классом JHtml, который в том числе может помочь решить и этот вопрос. Ниже в этой статье рассмотрим то, как включить собственные CSS стили в шаблон сайта так, чтобы они попали в заголовок HTML-документа в контейнер <head>.



Подключение собственных стилей CSS из папки шаблона сайта в Joomla

Самым очевидным способом будет вручную прописать путь до сайта в контейнер <head> файла index.php шаблона:

<link href="/templates/template_name/css/template.css" rel="stylesheet" type="text/css" />

Подключив таким образом CSS стили шаблона, всё начнёт работать и стили подключатся, однако если сервер выставляет время хранения кэша в браузере пользователя, при обновлении стилей, придётся менять название файла или связываться с пользователем для того, чтобы он почистил кэш браузера. Морока ещё та, и есть решение, которое позволяет решить эту задачу средствами Joomla.

Для этого нужно подключать собственные CSS-стили шаблона используя класс JHtml и выглядит это следующим образом:

<?php Html::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => 'true')); ?>

Использование класса JHtml Joomla для подключения собственных стилей CSS из папки шаблона сайта

Рассмотрим подробнее, какие именно аргументы передаются классу JHtml и что в итоге получается.

Вставлять конструкцию подключения собственных стилей CSS можно в любом месте шаблона в файле index.php, но лучше это делать до или сразу после использования конструкции <jdoc:include type="head"/>, так как это наиболее логичное место, где в первую очередь придёт в голову искать данное подключение.

Итак, после вставки приведённого выше кода на выходе в HTML-документе получим такой результат, который позволит использовать собственные стили шаблона:

<link href="/templates/template_name/css/template.css?38a386ff1fe6ccae1ae2b154acd60f1a" rel="stylesheet" type="text/css" />

Соотнеся результат с введённым в шаблон кодом, можно выявить следующие закономерности:

  • аргумент 'stylesheet' преобразуется в аргумент HTML-тега <link> — rel="stylesheet"
  • аргумент 'template.css' преобразуется в аргумент HTML-тега <link>href="..." с правильным относительным путём до файла
  • аргументы массива:
    • 'version' => 'auto' преобразуется в случайное число, которое служит меткой для определения версии css-файла, и при обновлении шаблона, браузер запросит новую версию стилей у сервера автоматически
    • 'relative' => 'true' особо не на что не влияет

Выводы

Таким образом, воспользовавшись встроенным в Joomla классом JHtml можно без труда вставлять собственные CSS-файлы со стилями шаблона. Они автоматически подключаются в шаблон и встают в правильное место в вёрстке HTML-документа. При этом, если использовать расширение Joomla для того, чтобы убрать лишние пробельные символы из CSS файлов, наверняка эта операция применится и к собственным файлам с CSS-стилями.

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )


Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'