Як і де підключити скрипт? - Дизайн та розробка сайту

Де підключати скрипти?

Якщо у вас є елемент для сайту, який використовує 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 скриптів.

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

На цьому все, спасибі за увагу. 🙂