Дом   /   Внешний вид и Функционал WP   /   Подключение скрипта к WordPress

Подключение скрипта к 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» ? Есть вопросы, пишите!

Брус купить в интернет магазине ozon по низкои цене брус 100х100 цена.

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

Лучшие бесплатные WordPress Темы для малого бизнеса 2016 Лучшие бесплатные WordPress Темы для малого бизнеса 2015

WordPress может использоваться для создания широкого спектра веб-сайтов. Вы можете создать портфолио сайты, новостные…

Сайдбары WordPress, создание сайдбара WordPress Сайдбары WordPress, создание сайдбара WordPress

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…

дочерняя тема WordPress Дочерний шаблон WordPress

В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…

Внешний вид и Функционал WP  |     |   Комментировать

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 Тогда должно работать на всех страницах.