Доброго времени суток. 🙂
Данная статья не столько материал о котором хочется поговорить, а универсальная инструкция для многих статей на моем сайте. Хочу один раз расписать подробно, как подключать скрипт на сайте, где это можно сделать и как лучше. Если вы на моем сайте бываете часто и используете материалы из статей, то замечали, что в каждой статье где идет упоминание о добавлении скриптов, я постоянно пишу о том где их вставить. Мне надоело повторять одно и то же, легче будет добавлять ссылку на эту статью. У меня уже была схожая статья Как подключить скрипты и где лучше это сделать. Тогда я не полностью раскрыл данный вопрос. Удалять старую статью или переписывать не хочу, поэтому создам новую. Не будем затягивать и приступим.
Где подключать скрипты?
Если у вас имеется элемент для сайта, который использует javascript. jQuery и его библиотеки, то их нужно будет подключить. обычно все подключается в шапке сайта перед закрывающимся head или в подвал перед закрывающимсяbody. Тут стоит выбирать вам и опираться на задачу и обстоятельства.
Есть скрипты, которые попросту не работают в шапке или наоборот в подвале. Возможно на вашем сайте все вызовы скриптов уже размещены в подвале для улучшения скорости загрузки или вы следовали указанием сервисов на подобии PageSpeed Insights. Если это так, то естественно и новые скрипты тоже размещаете в подвале.
Хочу отдельно упомянуть про WordPress. В шапке подключайте свои скрипты после wp_head();.В подвале имеется функция wp_footer();. все подключения после нее. В зависимости от настроек эти функции выводят библиотеку jQuery и другие скрипты WordPress, после которых и следует подключать свои. хотя если у вас простенький javascript код, то можно и не придерживаться этого правила.
Как подключать скрипт?
Подключать скрипты можно несколькими способами. Для начала рассмотрим вариант для лендингов, страниц, простых сайтов. Обычно используется два варианта. первый — непосредственно в коде страницы разместить скрипт заключив его в теги. К примеру в статью мы вставляем простой скрипт, выглядеть это будет так.
Как видите, наш скрипт заключен в теги — <script>. </script>. как раз они и отделяют наш скрипт от основного HTML кода. Такой вариант в принципе не плох, если код небольшой.
По этому принципу подключается и библиотека jQuery. Обычно это выглядит так:
Следует учесть, что нельзя подключать несколько библиотеки jQuery. Если это сделано уже ранее, то не следует повторять. Внимательно просматривайте код на наличие такого подключения. Чаще всего, в системах управления сайтами, типа WordPress, библиотека подключена по умолчанию. Не всегда можно найти в файлах такую строку, нужно смотреть через браузер. Опять, в том же WordPress библиотека выводится в wp_head(); или wp_footer();. о которых я упомянул выше, в зависимости от настроек.
Библиотека jQuery по коду должна быть первой, а скрипты что нуждаются в ней должны быть размещены после нее. Простые java скрипты этому правилу не подчиняются, только jQuery. Запомните это правило. Оно поможет избежать вам в будущем множества проблем.
Но если он занимает большой объем, занимать им место на странице, как по мне не разумно и не удобно.
Для этого существует второй способ, с вложением кода в отдельный файл и дальнейшим его подключением к странице. Суть способа в том, чтобы создать файл, например — script. js. Далее внутрь файла добавляем нужный скрипт. Добавлять скрипт нужно БЕЗ ТЕГОВ. — <script>. </script> .
В один файл можно размещать множество скриптов. Лично я часто пользуюсь таким методом. Причем одновременно можно добавлять как и обычный javascript. так и jQuery скрипты.
После того, как скрипт или скрипты в файл добавлены, его подключаем так же как и библиотеку. С помощью тегов указывая путь к файлу. Файл, естественно заливаете на сайт в папку с другими файлами сайта. В какую именно, решать вам, в зависимости от того какая система у вас или как вы захотите. Например, вы создали рядом с файлом где HTML код, папку с названием js и в нее поместили наш файл.
Теперь просто после библиотеки в подвале или в шапке, смотря где вы размещаете добавляете строку с подключением нашего файла.
Если файл с скриптом вне папки, а рядом с файлом в котором он подключается, то просто указывается его название. Можно так же указывать полный путь, если теряетесь в правильности, у вас много папок и не сразу понятно как указать путь. Получится типа — site. com/papka/js/script. js .
Подключение скриптов в WordPress
Отдельно хочу рассказать о том как лучше подключать скрипты в Вордпрессе. Можно использовать и предыдущие способы, но как по мне лучше использовать чисто Вордпрессовский метод с помощью функции — wp_enqueue_script(). Для этого нужно использовать файл пользовательских функций WordPress — function. php. В нем уже может быть такое подключение и его можно дополнить. Если нет, то создавайте новое. Давайте рассмотрим как это работает.
По сути вы проворачиваете фокус с отдельным файлом. Так что как и в предыдущем пункте создаете файл помещаете в него скрипт или скрипты и кладете его в папку с текущей темой. Ну или в папке с темой создаете еще папку, в которой будут хранится скрипты, а уже в нее наш файл. Далее уже подключаем через функцию в function. php. Если подключать только этот один файл — script. js, функция будет такой:
Такой код добавляется в любое место function. php, если вы разбираетесь в function. php. если же все что в нем вам не понятно, то добавлять нужно в конец файла функций. Если в конце файла есть закрывающий тег PHP — ?>. то добавлять нужно перед ним.
Разберем функцию по-порядку:
- my_scripts — название функции, в первой и последней строке. Название выдумываете, какое захотите.
- wp_enqueue_script — наша функция подключения нового скрипта.
- new_script — название для нашего скрипта. Еще его называют — рабочее название.
- get_template_directory_uri(). /js/custom_script. js — путь к файлу, где get_template_directory_uri() — функция указывающая путь к текущей папке с темой. далее уже вручную прописанный путь к папке JS и самому файлу. Если вы поймете суть по какому принципу указывается путь, то легко сможете указывать правильный.
- add_action — регистрируем наше событие в виде подключения скриптов. Где указываем функцию подключения и наше название.
Помните я в начале говорил о том, что можно настроить вывод в подвале и в шапке. Данная функция по умолчанию выведет скрипт в шапке. Чтобы добавить в подвал нужно добавить в строку с подключением еще один параметр.
- array(‘jquery’) — это параметр, который выводит название массива скриптов от которых зависит наш файл с скриптом. В данном примере наш файл будет подвязан к библиотеке jquery. Причем массив, должен быть загружен перед нашим скриптом. Как понимаете мы соблюдаем этим параметром условие загрузки библиотеки перед скриптами.
- далее идут пустые кавычки. В них можно написать версию скрипта, если она есть. чаще всего нет никакой версии, поэтому просто пустота.
- true — тот самый параметр, который и выведет скрипт в подвале. По умолчанию — FALSE. В нашем же случаи указано true, то есть размещение в подвале — ПРАВДА.
Если Вы захотите подключить 2 файла то функция будет такой:
Как видите, мы подключили еще и скрипт — newscript. js. Ему задали новое имя — new_script_two. Это обязательно. Если у обоих файлов будет одинаковое имя, хорошего будет мало. Таким образом можно подключать множество скриптов.
Так же, с помощью такой функции можно подключать и библиотеку jQuery. Но есть один момент. По умолчанию WordPress уже использует библиотеку, поэтому вторую так просто нельзя подключать, нужно отключить старую.
лично я всегда отключаю встроенную библиотеку и подключаю от Google. Делается это следующим образом. В примере будет и переподключение библиотеки и подключение файла со скриптом, чтобы вы видели как это выглядит и понимали что все просто и по тому же принципу.
- wp_deregister_script — отключаем скрипт с названием — jquery. То есть нашу библиотеку по-умолчанию.
- 2-я строка — подключаем новую библиотеку по тому же принципу, но указываем полный путь, ссылку на сайт google, где лежит библиотека.
- Далее идет уже обговоренное и описанное выше подключение скрипта.
Возможно покажется сложным, но если разобраться и понять суть все станет ясно, легко и просто. Такое подключение для WordPress является правильным и наилучшим.
Сжатие скриптов
Несмотря на то, как вы подключили скрипт, вы можете облегчит его загрузку браузером. Обычно скрипт имеет вот такой вид:
Согласитесь, читать такой скрипт легко и удобно, понятно и не напряжно. Но если такой понятный скрипт занимает 100 строк. В нем тысячи пробелов, комментариев и прочего ненужного хлама, что не влияет на скрипт. Но браузеру нужно немного больше времени чтобы его загрузить. А если таких скриптов больше десятка? Нагрузка на сайт увеличивается и время его загрузки тоже. А если скрипт станет таким?
Не плохо правда? Всего одна длинная строка, но намного меньше по объему. Читать такой скрипт сложнее, но если вам не нужно его постоянно править, вы настроили его один раз и все, то такое сжатие принесет только плюсы. Чтобы сделать это, можно помучатся вручную или воспользоваться любым сервисом по сжатию java скриптов.
После сжатия и правильного подключения ваши скрипты будут отлично работать и минимально нагружать сайт.
На этом все, спасибо за внимание. 🙂