Подключение скрипта к WordPress


Здравствуйте, в этом посте публикую способы подключения скрипта к сайту, делая акцент на подключение скрипта в WordPress, который имеет особенности и кардинально отличается от обычного HTML-подключения. Имеются ввиду JavaScript и JQuery

подключение скрипта

Для начала вкрадце напишу про подключение скрипта к обычному HTML сайту или странице.

Что-бы подключить скрипт к обычной HTML странице нужно между тегами

<head>код скрипта</head>

прописать такой код:

<script type='text/javascript' src='/js/jquery-toltip.js'></script>

где jquery-toltip.js — название скрипта, название файла, а js — папка, в которую предварительно помещается скрипт.

Для подключения сторонних скриптов, например, если вы не хотите использовать библиотеку JQuery локально, а подгружать ее со стороннего ресурса, нужно прописывать полностью путь к этому файлу. Выглядеть будет все это следующим образом:

<script type='text/javascript' src='http://google/api/js/jquery/jquery.js?ver=1.11.2'></script>

Если скрипт не влияет на формирование страницы, то лучше его подключать в footer между тегами

<footer></footer>

В этом случае этот скрипт будет подгружаться в последнюю очередь и не будет сильно влиять на скорость загрузки страницы.

Есть еще способ подключения скриптов непосредственно в HTML код страницы. Делается это когда скрипт короткий. Это также позволяет немного ускорить скорость загрузки страницы. Берется непосредственно содержание js файла и прописывается непосредственно в head или footer. Только его нужно обязательно заключить в теги:

<script>здесь содержимое файла js</script>

Теперь рассмотрим как осуществляется правильное подключение скрипта к WordPress.

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

Для подключения скриптов в WordPress существует специальная функция wp enqueue script Что-бы подключить скрипт в WordPress, нужно открыть файл functions.php и добавить в окончание файла, перед закрывающей скобкой ?> (в некоторых темах такой скобки нет, тогда подключайте файл также, прямо в окончание файла) такой код:

 if ( !is_admin() ) {
function register_my_js() {
wp_enqueue_script( 'my_tab', get_bloginfo( 'template_directory' ).'/js/my_tab.js', array( 'jquery' ), '1.0', true );
}
add_action('init', 'register_my_js');
}
  • register_my_js — название функции, называйте как хотите, только без тире, можно с нижним подчеркиванием в нижнем регистре. Название функции должно встречаться в коде 2 раза.
  • my_tab — уникальное название скрипта, можно любое.
  • template_directory — директория сайта, то-есть скрипт должен находиться в папке с темой.
  • /js/my_tab.js — путь к скрипту. В данном случае это my_tab.js и, соответственно, папка под названием js.
  • 1.0 — версия скрипта, можно оставлять как есть.
  • true — загружаем скрипт в footer сайта, если заменить true на false, то скрипт будет загружаться в header.

Либо так:

function fwbs_scripts_styles() {
// Загружаем Bootstrap plugin jQuery.
wp_enqueue_script( 'bootstrap-plugin', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'fwbs_scripts_styles' );

Все аналогично первому варианту. На данном примере подключаю другой скрипт bootstrap.min.js

Оба способа подключения скриптов к WordPress являются верными, но предпочтительней второй вариант.

Подключение стороннего скрипта к WordPress

Иногда требуется подключение, подгрузка стороннего скрипта к WordPress, например с серверов CDN. Это делается в первую очередь для ускорения загрузки подключаемого скрипта и как следствие ускорение загрузки страницы. Хотя я проверял — разницы нет (все зависит от хостинг провайдера).

Как и в варианте локального подключения скриптов, описанного выше, в файл functions.php ставьте такой код:

function fwbs_scripts_styles() {
// Загружаем Bootstrap plugin jQuery.
wp_enqueue_script( 'bootstrap-plugin', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array( 'jquery' ), '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'fwbs_scripts_styles' );

Различие лишь в том, что естественно, убирается из кода get_template_directory_uri() — скрипт ведь не находится в директории темы.

И пишется полный адрес подгружаемого скрипта, без протокола http или https.

— Вам была полезна статья «Подключение скрипта к WordPress» ? Есть вопросы, пишите!

Где купить капсулы для кофемашины nespresso nespresso-original.ru.


Похожие по Тегам статьи


10 thoughts on “Подключение скрипта к WordPress

  1. Екатерина Худякова

    Егор, полезная статья =) А вот смотри, получается, вместо того, чтобы прописывать скрипт между тегами head, можно просто в functions его подключить? Этот метод всегда срабатывает или проверять нужно?

  2. Егор Автор записи

    Привет, почти все свои скрипты так или иначе на WP подключаются через файл functions.php, это стандарт . Если все правильно прописывать в функции подключения wp enqueue script , то естественно, все правильно работать будет. Обрати внимание, почти все свои скрипты лучше подключать в footer.php , через functions.php. Если все работает, то так и оставлять, если нет, то поменять true на false
    В статье об этом сказано.

  3. Pavel

    Еще нежно не забывать про зависимости при подключении библиотек. А то я помню намучался в свое время.

  4. Егор Автор записи

    Здравствуй, я там ссылочку оставил на WP кодекс. Кстати, я сознательно не стал углубляться в тему, у меня сайт рассчитан на обычных блоггеров, в основном. Кто серьезно занимается разработкой сайтов на WordPress, тому кодекс в руки и на ГитХаб 🙂

  5. Елена

    здравствуйте. я хочу реализовать возможность распечатать определенную область на странице вордпресс в соответствии с этой инструкцией: _http://szenprogs.ru/blog/delaem_quotversija_dlja_pechatiquot/2009-03-20-36. все получилось и работает, но я хотела бы подключить через файл js. первый код я вынесла в отдельный js-файл и поместил его в папку javascript активной темы, но не знаю, как подключить этот файл, чтобы все работало. пробовала делать, как описано в этой статье, с помощью файла functions.php, но не работает. подскажите, пожалуйста, в чём может быть дело?

    1. Егор Автор записи

      Елена, скорее всего пропишите правильный путь к файлу. Он должен находится в папке с темой, если get_bloginfo — это директория, тоесть положите скрипт в папку с темой.

  6. Егор Автор записи

    Вот так

     if ( !is_admin() ) {
    function register_my_js() {
    wp_enqueue_script( 'my_tab', get_bloginfo( 'template_directory' ).'/js/ваш файл', array( 'jquery' ), '1.0', true );
    }
    add_action('init', 'register_my_js');
    }
    
    1. Елена

      js-файл со скриптом записала в папку js активной темы, подключение в файле functions.php сделала по образцу и подобию, но ничего не происходит, ссылка на «печать», к сожалению, не появляется в записи(((

  7. Егор Автор записи

    Все подключается, только почему-то не работает. Нужно разбираться. Время нет на это.

  8. Егор Автор записи

    Попробуйте, что в index делали, то -же самое перенести в footer.php Тогда должно работать на всех страницах.