Как вставить свой код в Helix Ultimate (CSS / JS / Meta)
CSS / JS / Meta пользовательский код в Helix Ultimate


Вставка кода Яндекса, Google, CSS-кода, JS-кода и HTML-тегов/кода в Helix Ultimate.

Существует множество вариантов настройки шаблона во фрейворке шаблонов Helix для Jooml. Настройки можно выполнять через Template Options, пользовательские файлы или с помощью модулей/плагинов с пользовательским кодом, что безопаснее, чем редактирование кода шаблона. Кроме того, в шаблоне можно применять коды отслеживания Google, CSS-коды, JS-коды и HTML-теги/коды. Поэтому, прежде чем применять эти коды, необходимо убедиться в наличии определенных знаний по ним.

В Helix Ultimate 2.0 можно легко использовать пользовательский код.

Как вставить пользовательский код в Helix

Пользовательский код в настройках шаблона Joomla в Helix Ultimate

Для использования этой возможности перейдите на вкладку Template Options - Custom Code. Там вы найдете:

Перед </head>

Любой код, размещенный в этом разделе, будет отображаться в разделе <head> на каждой странице сайта. Эта функция полезна, когда необходимо добавить проверочный код, дополнительные метатеги, теги HTML link и другие метаданные. Эта функция также очень полезна, если необходимо ввести код отслеживания из Google Analytics. Эта часть HTML-документа не отображается в браузере при загрузке страницы.

Пример использования:

<link href="/templates/shaper_helixultimate/css/shop.css" rel="stylesheet" type="text/css" />
<link href="/images/favicons/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<meta name="google-site-verification" content="___" />

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

  • Брандмауэр, который может повредить код <javascript> - в этом случае проверьте настройки RSfirewall или Akeeba Tools Pro.
  • Настройки безопасности вашего сервера (Mod_Security или аналогичные) не позволяют использовать данный вид кода.
  • В коде указан неверный путь к файлу.
  • Вы забыли добавить закрывающий тег или пропустили какой-нибудь символ/букву.
  • Использование сервиса с внедряемым кодом приостановлено или имеет временные проблемы на сервере.
  • Используемый код содержит слишком много перенаправлений, что также может вызвать нарушение кода шаблона или длительную задержку загрузки.

Ошибочный пользовательский код:

В некоторых случаях добавленный пользовательский код может не работать и казаться поврежденным (<iframe> или <script>) - это происходит по вине компонента RSfirewall.

Решение: В разделе Компоненты > RSFirewall > Blocklist/Safelist > Добавить свой IP в SafeList > Сохранить изменения.
Это изменит параметры безопасности только для вашего профиля пользователя. Затем снова вставьте исходный код и сохраните настройки шаблона.
Испорченные HTML-теги сами не исправятся, их придется потом править вручную.

Внимание! Не используйте пользовательский php-код внутри параметров шаблона!

После <body>

Практически любой код, размещенный в этом месте, будет отображаться сразу после открывающего тега <body> на всех страницах вашего сайта. Эта функция полезна, если необходимо ввести код отслеживания (статистики) из Google Analytics, Piwik, Woopra или Clicky.

Перед </body>

Любой размещенный в этом разделе код будет отображаться в нижней части раздела перед закрывающим тегом </body> на всех страницах вашего сайта. Эта функция полезна, если необходимо ввести код отслеживания для счетчика состояний, например Clicky. Некоторые разработчики рекомендуют использовать их код непосредственно перед закрывающим тегом </body> вашей страницы (страниц).

Пользовательский CSS шаблона Joomla в Helix Ultimate

Использование пользовательского CSS дает возможность создать свой уникальный дизайн и настроить внешний вид выбранных элементов (цвета, размеры и т.д.).  Пользовательский CSS можно использовать для добавления своих стилей (корректировки CSS кода шаблона) или для перезаписи CSS по умолчанию из шаблона или расширения. Эта опция удобна для небольших изменений в дизайне.

Внимание! Не следует редактировать файл template.css или любой другой CSS-файл из фреймворка шаблонов Helix Ultimate. Это связано с тем, что все ваши изменения будут перезаписаны шаблонизатором, вернувшимся к исходному коду). Вместо этого рекомендуется использовать файл custom.css, в котором можно переопределить CSS-код по умолчанию, созданный разработчиками JoomShaper.

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

Обратите внимание! Это только для CSS-кода, не используйте здесь HTML или PHP-код.

Если каким-то образом ваш файл custom.css в структуре HTML-сайта загружается раньше файла template.css - переименуйте custom.css в override.css и поместите ссылку на него в поле Template Options - Custom Code - Before </head>:

<link href="/templates/NAME/css/override.css" rel="stylesheet" />

Вместо NAME нужно указать правильное имя папки шаблона (маленькими буквами).  Редактировать файл override.css можно так же, как и файл custom.css.

Пользовательский JavaScript шаблона Joomla в Helix Ultimate

Это поле используется для встраивания пользовательского JavaScript на весь сайт. Он загружает ваш пользовательский Javascript-код после всех остальных JavaScript-файлов (за исключением специальных жестко заданных случаев), позволяя вам быть последним, чьи действия будут влиять на работу сайта. Добавляйте сюда только JavaScript-код без начальных тегов.

Внимание! Неправильный JS-код может замедлить или даже временно повредить ваш сайт и заблокировать панель инструментов редактирования. Поэтому предварительно всегда делайте резервную копию.

Пользовательский код шаблона Joomla в файлах Helix Ultimate

Если планируется более масштабное изменение дизайна (более нескольких строк кода), рекомендуется использовать пользовательский файл(ы). По умолчанию указанные ниже файлы не существуют, поэтому необходимо создать новый файл в папке /css и/или /js шаблона. Это безопасный метод, позволяющий переходить от шаблона к шаблону и облегчающий отладку, если что-то пойдет не так.

custom.css

По умолчанию файл custom.css не существует, поэтому необходимо создать новый файл в папке /css шаблона. Это безопасный метод, позволяющий переходить от шаблона к шаблону и облегчающий отладку, если что-то пойдет не так. Помните, что CSS каскадируется в обратном порядке, то есть правила, появившиеся позже, всегда имеют приоритет над правилами, появившимися раньше.

Внимание! Не редактируйте файл template.css или любой другой CSS-файл из фреймворка шаблонов Helix Ultimate. Это связано с тем, что все внесенные вами изменения будут перезаписаны шаблонизатором (возврат к исходному коду). Вместо этого рекомендуется использовать файл custom.css, в котором можно переопределить CSS-код по умолчанию, имеющийся в шаблоне сайта.

custom.scss

По умолчанию файл custom.scss не существует, поэтому необходимо создать новый файл в папке /scss шаблона. В этот дополнительный файл можно поместить код SCSS (Sassy CSS). Любой стандартный CSS-документ может быть преобразован в Sassy CSS (SCSS) простым изменением расширения с .css на .scss.

custom.js

По умолчанию этот файл не существует, поэтому необходимо создать новый файл в папке /js шаблона.  На сайте можно использовать JavaScript - как с помощью сторонних библиотек, так и с помощью собственного скрипта. При этом следует помнить, что в некоторых случаях пользовательский JavaScript может вызывать конфликты с шаблоном Helix, компонентами, работающими на сайте, или даже с ядром Joomla.

Перевод с английского официальной документации JoomShaper по Helix Ultimate:
www.joomshaper.com

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню