WordPress — правильное подключение скриптов

wp register script 620x419 - WordPress — правильное подключение скриптов

Есть два варианта, как можно добавить сторонний скрипт в WordPress:

  • классический способ — указать путь в HEAD или перед закрывающим BODY;
  • правильный — воспользоваться внутренней инфраструктурой CMS, дабы скрипт мог кэшироваться, не конфликтовать с другими скриптами и быть быстрее;

Первый вариант мы проигнорируем, как неэффективный в принципе и рассмотрим второй.

Правильное подключение JavaScript в WordPress

В данной CMS имеется функция wp_enqueue_script () или ее аналог wp_register_script (), которые регистрируют и подключают на страницах сайта указанный скрипт с учетом зависимостей от остальных. Для этого используется индивидуальный для каждой темы файл-конфигуратор functions.php.

Мы будем
использовать функцию wp_enqueue_script ().
У нее есть несколько основных параметров:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  • $handle — любое имя файла, например, самое прямое: script-js:
  • $src — путь к файлу;
  • $depsне обязательный параметр в видемассива. Зависимость от остальных скриптов, т.е. тех, которые
    должны быть загружены ранее (обычно jquery);
  • $ver  null или текст. Не обязательный параметр.
    Версия скрипта;
  • $in_footer true — загружать перед закрывающим BODY, false — между тегами HEAD;

Примеры использования wp_enqueue_script ()

Рассмотрим пример
подключения скрипта с зависимостью от jQuery перед закрывающим тегом BODY

wp_enqueue_script('banners', site_url() . '/uploads/b/banners.js', ['jquery'], 'null', true);
  • banners — любое название. Взято имя файла (banners.js);
  • site_url ()
    .
    '/uploads/b/banners.jsпуть к скрипту
    внутри папки с и с темой. Использована функция, выводящая корневой адрес сайта
    с добавлением строки в виде пути;
  • [‘jquery’] —зависимость от библиотеки jQuery, которая будет загружена перед данным
    скриптом;
  • null —
    без версии;
  •  trueзагружать перед
    закрывающим тегом BODY т.е. в файле footer.php;

Итоговый вывод всех функций

Пример выше
является лишь частью составной конструкции. Функция wp_enqueue_script () может объявляться неограниченное количество раз
внутри функции со любым названием:

function wpdev_scripts() {

	wp_enqueue_script('jquery');
	wp_enqueue_script('fontawesomejs', 'https://use.fontawesome.com/releases/v5.0.6/js/all.js', ['jquery'], 'null', true);
	wp_enqueue_script('tooltip', get_template_directory_uri() . '/js/tooltip.js', ['jquery'], 'null', true);
	wp_enqueue_script('banners', site_url() . '/uploads/b/banners.js', ['jquery'], 'null', true);
	wp_enqueue_script('wp_spoiler', get_template_directory_uri() . '/js/wordpress-spoiler.js', ['jquery'], 'null', true);
	wp_enqueue_script('init', get_template_directory_uri() . '/js/init.js', ['jquery'], 'null', true);
}

И вызывается другой функцией в любом месте файла functions.php

# Подключение стилей и скриптов
add_action('wp_enqueue_scripts', 'wpdev_scripts');

Собственно, все. Файлы CSS подключаются аналогичным способом с помощью wp_enqueue_style () внутри этой же функции.

.

Читайте также

Похожие записи

WordPress — простая HTML карта сайта без модулей
Есть несколько способов настроить HTML карту сайта для CMS WordPress. Можно установить модуль и приукрасить его на CSS. Но для...
WordPress — SQL запрос для смены адреса сайта
Случается так, что сайт меняет доменное имя. Ничего страшного в этом нет, но WordPress остается привязан к старому адресу на...
WordPress — как изменить разметку отдельных элементов в посте
Посмотрите на расположение картинок и текст их описания на скриншоте выше. Сверстать подобное не составит никакого труда, если это редактор...
WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи
Задача: разработать для статей блок с индивидуальным дизайном дабы была возможность выделять некоторый контент. Данный блок должен вставляться в статью...
WordPress SEO Friendly Images — плагин для изображений
SEO Frendly Images — плагин для WordPress, автоматически добавляющий HTML5 разметку для изображений FIGURE, FIGCAPTION (точно не уверен — возможно...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *