Як перемістити скрипти в нижній або нижній колонтитул в WordPress

  1. Переваги переходу скрипта в низ
  2. Правильний спосіб додавання скриптів в WordPress
  3. Знайти вихідний код на JavaScript
  4. Зареєструвати та поставити в чергу скрипт

Нещодавно один з наших читачів задав нам, як вони можуть переміщати скрипти в низ щоб збільшити швидкість завантаження сторінки. Ми раді, що запитали, тому що ми чесно хотіли написати про це. Раніше ми говорили про те, як правильно додавати JavaScript і стилі CSS в WordPress. У цій статті ми покажемо вам, як перенести скрипти в вниз в WordPress, так що ви можете поліпшити час завантаження вашого сайту, і ваша сторінка в Google набрати швидкість.

Переваги переходу скрипта в низ

JavaScript - це клієнтський мову програмування. Вона виконується і управляється в веб-браузері користувача, а не на веб-сервері. Коли ви помістіть код JavaScript в верху, браузери можуть виконувати процес або JavaScript - код перед завантаженням іншої частини вашої сторінки. Коли скрипти поміщаються вниз, ваш веб-сервер буде швидко рендерить сторінки, а потім браузер користувача буде виконувати сценарії JavaScript. Оскільки всі серверні рендеринга вже зроблено, код JavaScript буде завантажуватися у фоновому режимі, що робить загальне навантаження швидше.

Це поліпшить вашу швидкість при тестуванні з Google сторінки. Google та інші пошукові системи в даний час розглядають швидкість сторінки, як одну з матриць при відображенні результатів пошуку. Це означає, що сайти, які завантажуються швидше з'явиться більш помітними в результатах пошуку.

Правильний спосіб додавання скриптів в WordPress

WordPress має потужну систему, яка дозволяє тема і плагін розробникам додавати свої скрипти в чергу і завантажувати їх у міру необхідності. Відправляючи скрипти і стилі правильно можна істотно поліпшити Швидкість завантаження веб сторінок.

Щоб показати тобі простий приклад, ми додамо трохи JavaScript в тему WordPress . Зберегти свій JavaScript у файлі .JS і помісти його в вашу тему в каталог JS. Якщо ваша тема не має каталогу для Java-скриптів, то створіть його. Після розміщення файлу скрипта, відредагуйте файл вашої теми functions.php і додайте цей код:

function wpb_add_scripts () {w p_register_script ( 'my-script', get_template_directory_uri (). '/js/my-script.js','','1.2', true); wp_enqueue_script ( 'my-script'); } Add_action ( 'wp_enqueue_scripts', 'wpb_add_scripts');

У цьому коді ми використовували функцію wp_register_script (). Ця функція має такі параметри:

<? Php wp_register_script ($ handle, $ src, $ deps, $ ver, $ in_footer); ?>

Щоб додати скрипт в футере (або внизу) сторінки WordPress, все, що вам потрібно зробити, це встановити $ in_footer параметра значення в True.

Ми також використовували іншу функцію get_template_directory_uri (), яка повертає URL-адресу каталогу шаблонів. Ця функція повинна використовуватися для реєстрації скриптів і стилів в темі WordPress. Для плагінів ми будемо використовувати функцію plugins_url ().

проблема:

Проблема полягає в тому, що кілька разів плагіни WordPress додають власний JavaScript для сторінки всередині <Head> або всередині тіла сторінки. Для того щоб перемістити ці скрипти на футер, необхідно редагувати файли плагінів і правильно перемістити скрипти в низ.

Знайти вихідний код на JavaScript

Відкрийте ваш сайт в браузері і подивіться на вихідний код сторінки. Ви побачите посилання на файл JavaScript із зазначенням місця розташування і джерело файлу. Наприклад, на скріншоті нижче говорить нам, що наш сценарій належить плагін під назвою 'тест-plugin101'. Файл скрипта знаходиться в папці JS.

Іноді ви побачите, JavaScript, доданий безпосередньо на сторінку і не пов'язаний через окремий файл .JS. В такому випадку, вам потрібно буде деактивувати всі плагіни по-одному. Оновлення сторінку після кожної деактивації плагіну, поки не знайдете те додавання скрипта до Web-сторінок. Якщо JavaScript жевріє навіть після відключення всіх плагінів, то спробуйте переключитися на іншу тему, щоб побачити, може JavaScript додається через Вашу тему.

Зареєструвати та поставити в чергу скрипт

Після того як ви знайшли плагін, або тему, яка є додавання JavaScript в заголовок розділу, наступний крок - дізнатися, де плагін має запитують файл. В одній вашої теми або плагіна файлів PHP ви побачите заклик до конкретного файлу .JS.

Якщо плагін або тема вже відправляють через додати файл JavaScript, то все, що вам потрібно зробити, це змінити wp_register_script функцію в своєму плагіні або теми і додати True для параметра $ in_footer. такий:

wp_register_script ( 'script-handle', plugins_url ( 'js / script.js', __FILE__), '', '1.0', true);

Давайте припустимо, що ваш плагін або тема додає JavaScript в заголовку або між змістом. Знайти необроблений код JavaScript в плагіні або файлів теми, скопіюйте JavaScript і зберегти його у файлі .JS. Потім використовуйте функцію wp_register_script (), як показано вище, щоб перемістити JavaScript в нижню частину.

Примітка редактора: важливо розуміти, що коли ви вносите зміни в ядро ​​при оновленні плагіна ваші зміни будуть видалені. Кращий спосіб зробити це, було б викреслити зі списку сценарій і перереєструвати його з вашої теми в файл functions.php . Як це зробити, подивіться цей підручник .

Крім переміщення скриптів в футер, ви повинні також розглянути можливість використання більш швидких плагін соціальних медіа та завантаження зображень. Разом з тим ви повинні також використовувати плагін кеш-пам'яті, щоб поліпшити швидкість вашого сайту.

Ми сподіваємося, що ця стаття допомогла вам зрозуміти як перемістити скрипти в футер в WordPress і підвищити швидкість завантаження. Для питань та зворотного зв'язку, будь ласка, залиште коментар нижче.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

Php wp_register_script ($ handle, $ src, $ deps, $ ver, $ in_footer); ?