Где подключать скрипты?
Если у вас имеется элемент для сайта, который использует javascript, jQuery и его библиотеки, то их нужно будет подключить. Обычно все подключается в шапке сайта перед закрывающимся head или в подвал перед закрывающимсяbody. Тут стоит выбирать вам и опираться на задачу и обстоятельства.
Есть скрипты, которые попросту не работают в шапке или наоборот в подвале. Возможно на вашем сайте все вызовы скриптов уже размещены в подвале для улучшения скорости загрузки или вы следовали указанием сервисов на подобии PageSpeed Insights. Если это так, то естественно и новые скрипты тоже размещаете в подвале.
Хочу отдельно упомянуть про WordPress. В шапке подключайте свои скрипты после wp_head();. В подвале имеется функция wp_footer();, все подключения после нее. В зависимости от настроек эти функции выводят библиотеку jQuery и другие скрипты WordPress, после которых и следует подключать свои. хотя если у вас простенький javascript код, то можно и не придерживаться этого правила.
Как подключать скрипт?
Подключать скрипты можно несколькими способами. Для начала рассмотрим вариант для лендингов, страниц, простых сайтов. Обычно используется два варианта. Первый - непосредственно в коде страницы разместить скрипт заключив его в теги. К примеру в статью мы вставляем простой скрипт, выглядеть это будет так.
<script>
alert( 'Привет, Мир!' );
</script>
Как видите, наш скрипт заключен в теги - <script> ... </script>, как раз они и отделяют наш скрипт от основного HTML кода. Такой вариант в принципе не плох, если код небольшой.
По этому принципу подключается и библиотека jQuery. Обычно это выглядит так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Следует учесть, что нельзя подключать несколько библиотеки jQuery. Если это сделано уже ранее, то не следует повторять. Внимательно просматривайте код на наличие такого подключения. Чаще всего, в системах управления сайтами, типа WordPress, библиотека подключена по умолчанию. Не всегда можно найти в файлах такую строку, нужно смотреть через браузер. Опять, в том же WordPress библиотека выводится в wp_head(); или wp_footer();, о которых я упомянул выше, в зависимости от настроек.
Библиотека jQuery по коду должна быть первой, а скрипты что нуждаются в ней должны быть размещены после нее. Простые java скрипты этому правилу не подчиняются, только jQuery. Запомните это правило. Оно поможет избежать вам в будущем множества проблем.
Но если он занимает большой объем, занимать им место на странице, как по мне не разумно и не удобно.
Для этого существует второй способ, с вложением кода в отдельный файл и дальнейшим его подключением к странице. Суть способа в том, чтобы создать файл, например - script.js. Далее внутрь файла добавляем нужный скрипт. Добавлять скрипт нужно БЕЗ ТЕГОВ!!! - <script> ... </script>.
В один файл можно размещать множество скриптов. Лично я часто пользуюсь таким методом. Причем одновременно можно добавлять как и обычный javascript, так и jQuery скрипты.
После того, как скрипт или скрипты в файл добавлены, его подключаем так же как и библиотеку. С помощью тегов указывая путь к файлу. Файл, естественно заливаете на сайт в папку с другими файлами сайта. В какую именно, решать вам, в зависимости от того какая система у вас или как вы захотите. Например, вы создали рядом с файлом где HTML код, папку с названием js и в нее поместили наш файл.
Теперь просто после библиотеки в подвале или в шапке, смотря где вы размещаете добавляете строку с подключением нашего файла.
<script type="text/javascript" src="js/script.js"></script>
Если файл с скриптом вне папки, а рядом с файлом в котором он подключается, то просто указывается его название. Можно так же указывать полный путь, если теряетесь в правильности, у вас много папок и не сразу понятно как указать путь. Получится типа - site.com/papka/js/script.js.
Подключение скриптов в WordPress
Отдельно хочу рассказать о том как лучше подключать скрипты в Вордпрессе. Можно использовать и предыдущие способы, но как по мне лучше использовать чисто Вордпрессовский метод с помощью функции - wp_enqueue_script(). Для этого нужно использовать файл пользовательских функций WordPress - function.php. В нем уже может быть такое подключение и его можно дополнить. Если нет, то создавайте новое. Давайте рассмотрим как это работает.
По сути вы проворачиваете фокус с отдельным файлом. Так что как и в предыдущем пункте создаете файл помещаете в него скрипт или скрипты и кладете его в папку с текущей темой. Ну или в папке с темой создаете еще папку, в которой будут хранится скрипты, а уже в нее наш файл. Далее уже подключаем через функцию в function.php. Если подключать только этот один файл - script.js, функция будет такой:
function my_scripts(){
wp_enqueue_script( 'new_script', get_template_directory_uri() . '/js/script.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Такой код добавляется в любое место 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 - регистрируем наше событие в виде подключения скриптов. Где указываем функцию подключения и наше название.
Помните я в начале говорил о том, что можно настроить вывод в подвале и в шапке. Данная функция по умолчанию выведет скрипт в шапке. Чтобы добавить в подвал нужно добавить в строку с подключением еще один параметр.
wp_enqueue_script( 'new_script', get_template_directory_uri() . '/js/script.js', array('jquery'), '', true );
- array('jquery') - это параметр, который выводит название массива скриптов от которых зависит наш файл с скриптом. В данном примере наш файл будет подвязан к библиотеке jquery. Причем массив, должен быть загружен перед нашим скриптом. Как понимаете мы соблюдаем этим параметром условие загрузки библиотеки перед скриптами.
- далее идут пустые кавычки. В них можно написать версию скрипта, если она есть. чаще всего нет никакой версии, поэтому просто пустота.
- true - тот самый параметр, который и выведет скрипт в подвале. По умолчанию - FALSE. В нашем же случаи указано true, то есть размещение в подвале - ПРАВДА.
Если Вы захотите подключить 2 файла то функция будет такой:
function my_scripts(){
wp_enqueue_script( 'new_script', get_template_directory_uri() . '/js/script.js');
wp_enqueue_script( 'new_script_two', get_template_directory_uri() . '/js/newscript.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Как видите, мы подключили еще и скрипт - newscript.js. Ему задали новое имя - new_script_two. Это обязательно. Если у обоих файлов будет одинаковое имя, хорошего будет мало. Таким образом можно подключать множество скриптов.
Так же, с помощью такой функции можно подключать и библиотеку jQuery. Но есть один момент. По умолчанию WordPress уже использует библиотеку, поэтому вторую так просто нельзя подключать, нужно отключить старую.
лично я всегда отключаю встроенную библиотеку и подключаю от Google. Делается это следующим образом. В примере будет и переподключение библиотеки и подключение файла со скриптом, чтобы вы видели как это выглядит и понимали что все просто и по тому же принципу.
function my_scripts(){
wp_deregister_script( 'jquery' );
wp_enqueue_script('jquery' , 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
wp_enqueue_script( 'new_script', get_template_directory_uri() . '/js/script.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
- wp_deregister_script - отключаем скрипт с названием - jquery. То есть нашу библиотеку по-умолчанию.
- 2-я строка - подключаем новую библиотеку по тому же принципу, но указываем полный путь, ссылку на сайт google, где лежит библиотека.
- Далее идет уже обговоренное и описанное выше подключение скрипта.
Возможно покажется сложным, но если разобраться и понять суть все станет ясно, легко и просто. Такое подключение для WordPress является правильным и наилучшим.
Сжатие скриптов
Несмотря на то, как вы подключили скрипт, вы можете облегчит его загрузку браузером. Обычно скрипт имеет вот такой вид:
jQuery(document).ready(function($) {
$(window).scroll(function(){
if ($(window).scrollTop() > 300)
$('#slidebox').animate({'left':'0px'},500);//показываем блок
else
$('#slidebox').stop(true).animate({'left':'-230px'},500);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove(); //скрываем блок
});
});
Согласитесь, читать такой скрипт легко и удобно, понятно и не напряжно. Но если такой понятный скрипт занимает 100 строк. В нем тысячи пробелов, комментариев и прочего ненужного хлама, что не влияет на скрипт. Но браузеру нужно немного больше времени чтобы его загрузить. А если таких скриптов больше десятка? Нагрузка на сайт увеличивается и время его загрузки тоже. А если скрипт станет таким?
jQuery(document).ready(function($){$(window).scroll(function(){if($(window).scrollTop()>300)$('#slidebox').animate({'left':'0px'},500);else $('#slidebox').stop(true).animate({'left':'-230px'},500)});$('#slidebox .close').bind('click',function(){$(this).parent().remove()})});
Не плохо правда? Всего одна длинная строка, но намного меньше по объему. Читать такой скрипт сложнее, но если вам не нужно его постоянно править, вы настроили его один раз и все, то такое сжатие принесет только плюсы. Чтобы сделать это, можно помучатся вручную или воспользоваться любым сервисом по сжатию java скриптов.
После сжатия и правильного подключения ваши скрипты будут отлично работать и минимально нагружать сайт.
На этом все, спасибо за внимание. 🙂
