Как и где подключить скрипт?

Віталий

8 років ago

Доброго времени суток. 🙂

Данная статья не столько материал о котором хочется поговорить, а универсальная инструкция для многих статей на моем сайте. Хочу один раз расписать подробно, как подключать скрипт на сайте, где это можно сделать и как лучше. Если вы на моем сайте бываете часто и используете материалы из статей, то замечали, что в каждой статье где идет упоминание о добавлении скриптов, я постоянно пишу о том где их вставить. Мне надоело повторять одно и то же, легче будет добавлять ссылку на эту статью. У меня уже была схожая статья Как подключить скрипты и где лучше это сделать. Тогда я не полностью раскрыл данный вопрос. Удалять старую статью или переписывать не хочу, поэтому создам новую. Не будем затягивать и приступим.

Где подключать скрипты?

Если у вас имеется элемент для сайта, который использует 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 скриптов.

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

На этом все, спасибо за внимание. 🙂

Exit mobile version