Программирование HTML Joomla: простое добавление кода Javascript на сайт Sun, October 22 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Joomla: простое добавление кода Javascript на сайт Печать
Добавил(а) microsin   

Если анализируете трафик сайта на Joomla (что Вы несомненно должны делать, ИМХО), то Вам вероятно нужно для трекинга добавить некоторое программное обеспечения к сайту. Самое очевидное, что можно применить - Google Analytics. Можно также выбрать Crazyegg, GoingUp или другие инструменты. (Перевод статьи Kristoffer Sandven "How to easily add Javascript snippets to Joomla".)

google-analytics-ill

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

[Что такое позиции модуля]

Если работаете с Joomla, то наверняка знаете, что шаблон Joomla состоит из HTML и некоторых кусков кода PHP (PHP snippets).

Во-первых, шаблон содержит область компонента, где показывается вывод от разных компонентов (статьи, списки блога, дополнительные компоненты для каких-либо функций и т. п.). Во-вторых, шаблон Joomla также содержит несколько сниппетов PHP, которые называются "позиции модуля". Вы можете назначить модулям эти определенные позиции, и эти модули появятся именно в этих позициях на шаблоне Вашего сайта.

[Самый простой способ вставить сниппеты]

Конечно, Вы можете использовать расширение для каждого стороннего сценария, который нужно добавить (если таковое расширение имеется) - например, Jumi [1]. Проблема с таким подходом, тем не менее, состоит в том, что Вы должны отслеживать все эти расширения и их обновления (на предмет устранения ошибок и уязвимостей). С каждым добавленным сторонним расширением увеличиваются шансы взлома Вашего сайта. В конце концов, код сделан людьми, и люди делают ошибки.

По этой причине я предпочитаю использовать модуль 'Custom HTML' (пользовательский HTML), когда мне нужно вставить сниппеты кода. Чтобы достичь наилучшего результата, Вам нужно иметь заданными специальные позиции модуля для модулей сниппетов JavaScript. Таким способом Вы сможете управлять размещением исходного кода сниппетов (где именно он будет вставлен), что может быть крайне важным для работы сниппета.

Этот метод прост, однако весьма эффективен.

Вам нужны три позиции модуля, и столько же Вам потребуется модуля Custom HTML (по одному для каждого сниппета).

[Вставка позиций модуля в шаблон]

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

  1. endhead
  2. topbody
  3. endbody

Для добавления позиций модуля нужно добавить код в файл шаблона index.php. Его можно найти в следующем месте: /templates/yourtemplatename/index.php. Перед внесением изменений не забудьте сделать резервную копию этого файла. Введите сразу перед тегом < /head >:

< jdoc:include type="modules" name="endhead" />

И следующее сразу после тега < body >:

< jdoc:include type="modules" name="topbody" />

И следующий код перед тегом < /body >:

< jdoc:include type="modules" name="endbody" />

Сохраните Ваш шаблон.

Следующий шаг - добавление действительных модулей, которые будут нести в себе Ваш JavaScript. Перед этим необходимо немного подстроить установки текстового редактора (имеется в виду online-редактор статей Joomla).

[Как разрешить JavaScript в редакторе]

Чтобы можно было добавлять JavaScript в модуль Custom HTML, нужно разрешить использование Javascript в Вашем текстовом редакторе. Если Вы используете редактор TinyMCE, то можете найти эти установки в меню Extensions -> Plugin Manager -> Editor - TinyMCE 2.0. Убедитесь, что настройка 'Code Cleanup on Startup' поставлена в 'Off' и 'Code Cleanup on Save' в 'Never'. Этим Вы обеспечите, что редактор не будет вычищать Ваш добавленный код.

Joomla-TinyMCE-no-clean-code

Если Вы используете JCE editor, перейдите в меню Компоненты -> JCE Administration Editor Profiles (Groups) -> Default (или другую группу, которую Вы используете) -> Editor Parameters -> Options. Убедитесь, что опция 'Allow Javascript' установлена в 'Yes'.

Joomla-JCE-no-clean-code

[Добавление скрипта к модулю Custom HTML]

Теперь Вам нужно добавить реальный сниппет Javascript в модуль Custom HTML, и назначить этому модулю подходящую позицию модуля. В качестве примера я буду использовать код Google Analytics. Перейдите в Менеджер Модулей (меню Расширения -> Модули) и нажмите кнопку New (Новый). Тип модуля выберите 'Custom HTML' (пользовательский HTML). Далее Вы увидите настройку параметров модуля.

Введите в настройках заголовок для модуля, например 'Google Analytics code', разрешите модуль, и укажите не показывать заголовок модуля.

Для кода Google Analytics мы назначим модуль на только что созданную позицию 'endhead'. Это приведет к тому, что сниппет Google Analytics появится сразу перед закрывающим тегом HEAD (). Поскольку Вы не ввели новые позиции модуля в файл XML шаблона, они (новые позиции endhead, topbody, endbody) не появятся в выпадающем списке позиции модуля. Однако это не повод беспокойства: Вы можете просто ввести имя позиции 'endhead' прямо в поле ввода.

mod-custom-analytics

Напоследок переключите редактор в режим ввода HTML и сделайте copy/paste кода Google Analytics в окно редактирования. Сохраните модуль.

Перезагрузите страничку Вашего веб-сайта, чтобы добавленный сниппет Google Analytics заработал.

[Добавление большего количества сниппетов]

С помощью описанного метода Вы можете добавить столько сниппетов Javascript, сколько хотите. Вы можете управлять порядком появления сниппетов путем изменения порядка появления модулей в Менеджере Модулей. Я считаю этот метод простым в использовании и гибким.

[Словарик]

Сниппет (англ. snippet — фрагмент, отрывок) — программный термин, обозначающий небольшой фрагмент исходного кода или текста, пригодного для повторного использования. Сниппеты не являются заменой процедур, функций или других подобных понятий структурного программирования. Они обычно используются для более лёгкой читаемости кода функций, которые без их использования выглядят слишком перегруженными деталями, или для устранения повторения одного и того же общего участка кода.

[Ссылки]

1. Joomla: вставка произвольного кода на сайт с помощью Jumi.

 

Комментарии  

 
0 #3 Vitaldo 12.03.2016 12:18
Добавить любой скрипт как модуль AnyKod проблем особых нет. А вот добавить скрипт через редактор в описание категории или в описание определенной карточки товара уже проблема. Чтобы скрипты не конфликтовали между собой
Цитировать
 
 
+1 #2 Banan 08.12.2013 19:43
Отлично!

Начал разбираться с Джумлой, затык на затыке. Один из них решил здесь. Зер гут, Волдемар. )
Цитировать
 
 
+3 #1 astana 05.09.2012 15:14
Я использую редактор TinyMCE, но у меня нет этих "'Code Cleanup on Startup' поставлена в 'Off'" и "'Code Cleanup on Save' в 'Never'" параметров... :sigh:
Цитировать
 

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


Защитный код
Обновить

Top of Page