Подключить js файл wordpress
Обновлено: 04.07.2024
Рекомендуемый метод подключения скриптов WordPress. Имеет ряд особенностей:
- JS-файлы вставляются на страницы сайта через функции wp_head() и wp_footer(),
- в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php ,
- позволяет подключать скрипты с учетом их зависимостей друг от друга;
То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.
Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.
Параметры функции wp_enqueue_script()
Пример 1 – подключение JS файла
Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts , пример:
Тот же самый пример, но только с зависимостью от jQuery:
Пример подключения в админке
Для подключения скриптов только в админке используйте хук admin_enqueue_scripts , например:
Пример 2 – подключение jQuery CDN
Иногда бывает, что вы хотите подключите какой-то скрипт с CDN, это даже не обязательно должен быть jQuery, в этом случае указываем полный URL файла.
Пример 3 – как подключить JS к HTML
Небольшое отклонение от нашей темы и от функции wp_enqueue_script() – хочу показать вам именно способы подключения JS к HTML сайта в <head> или в футере при помощи тегов <script> .
Для подключения между тегами <head> и </head> мы будем использовать хук wp_head:
А для футера сайта соответственно используем хук wp_footer:
Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.
Пример 4. Подключение JS только на странице настроек конкретного плагина
Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!
Таблица стандартных скриптов в WordPress
| Идентификатор | Файл | Зависимости |
|---|---|---|
| jcrop | /wp-includes/js/jcrop/jquery.Jcrop.min.js | |
| swfobject | /wp-includes/js/swfobject.js | |
| swfupload | /wp-includes/js/swfupload/swfupload.js | |
| swfupload-queue | /wp-includes/js/swfupload/plugins/swfupload.queue.js | |
| swfupload-handlers | /wp-includes/js/swfupload/handlers.min.js | |
| jquery | /wp-includes/js/jquery/jquery.js | json2 (для AJAX запросов) |
| jquery-form | /wp-includes/js/jquery/jquery.form.min.js | jquery |
| jquery-color | /wp-includes/js/jquery/jquery.color.min.js | jquery |
| jquery-masonry | /wp-includes/js/jquery/jquery.masonry.min.js | jquery |
| jquery-ui-core | /wp-includes/js/jquery/ui/jquery.ui.core.min.js | jquery |
| jquery-ui-widget | /wp-includes/js/jquery/ui/jquery.ui.widget.min.js | jquery |
| jquery-ui-mouse | /wp-includes/js/jquery/ui/jquery.ui.mouse.min.js | jquery |
| jquery-ui-accordion | /wp-includes/js/jquery/ui/jquery.ui.accordion.min.js | jquery |
| jquery-ui-autocomplete | /wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js | jquery |
| jquery-ui-slider | /wp-includes/js/jquery/ui/jquery.ui.slider.min.js | jquery |
| jquery-ui-tabs | /wp-includes/js/jquery/ui/jquery.ui.tabs.min.js | jquery |
| jquery-ui-sortable | /wp-includes/js/jquery/ui/jquery.ui.sortable.min.js | jquery |
| jquery-ui-draggable | /wp-includes/js/jquery/ui/jquery.ui.draggable.min.js | jquery |
| jquery-ui-droppable | /wp-includes/js/jquery/ui/jquery.ui.droppable.min.js | jquery |
| jquery-ui-selectable | /wp-includes/js/jquery/ui/jquery.ui.selectable.min.js | jquery |
| jquery-ui-position | /wp-includes/js/jquery/ui/jquery.ui.position.min.js | jquery |
| jquery-ui-datepicker | /wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js | jquery |
| jquery-ui-resizable | /wp-includes/js/jquery/ui/jquery.ui.resizable.min.js | jquery |
| jquery-ui-dialog | /wp-includes/js/jquery/ui/jquery.ui.dialog.min.js | jquery |
| jquery-ui-button | /wp-includes/js/jquery/ui/jquery.ui.button.min.js | jquery |
| jquery-effects-core | /wp-includes/js/jquery/ui/jquery.ui.effect.min.js | jquery |
| jquery-effects-blind | /wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js | jquery-effects-core |
| jquery-effects-bounce | /wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js | jquery-effects-core |
| jquery-effects-clip | /wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js | jquery-effects-core |
| jquery-effects-drop | /wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js | jquery-effects-core |
| jquery-effects-explode | /wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js | jquery-effects-core |
| jquery-effects-fade | /wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js | jquery-effects-core |
| jquery-effects-fold | /wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js | jquery-effects-core |
| jquery-effects-highlight | /wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js | jquery-effects-core |
| jquery-effects-pulsate | /wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js | jquery-effects-core |
| jquery-effects-scale | /wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js | jquery-effects-core |
| jquery-effects-shake | /wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js | jquery-effects-core |
| jquery-effects-slide | /wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js | jquery-effects-core |
| jquery-effects-transfer | /wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js | jquery-effects-core |
| schedule | /wp-includes/js/jquery/jquery.schedule.js | jquery |
| suggest | /wp-includes/js/jquery/suggest.min.js | jquery |
| thickbox | /wp-includes/js/thickbox/thickbox.js | |
| jquery-hotkeys | /wp-includes/js/jquery/jquery.hotkeys.min.js | jquery |
| sack | /wp-includes/js/tw-sack.min.js | |
| quicktags | /wp-includes/js/quicktags.min.js | |
| autosave | /wp-includes/js/autosave.min.js | |
| wp-ajax-response | /wp-includes/js/wp-ajax-response.min.js | |
| wp-lists | /wp-includes/js/wp-lists.min.js | |
| common | /wp-admin/js/common.min.js | |
| password-strength-meter | /wp-admin/js/password-strength-meter.min.js | |
| comment-reply | /wp-includes/js/comment-reply.min.js | |
| media-upload | /wp-admin/js/media-upload.min.js | |
| word-count | /wp-admin/js/word-count.min.js | |
| json2 | /wp-includes/js/json2.min.js | |
| plupload | /wp-includes/js/plupload/plupload.js | |
| underscore | /wp-includes/js/underscore.min.js | |
| backbone | /wp-includes/js/backbone.min.js |
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
В процессе работы с WordPress, иногда, возникает необходимость подключить javascript в посте или странице WP. Некоторые горе программисты решают эту задачу подключая все файлы яваскрипт в шапке или просто запихнув код в пост, если первый вариант невозможный. Сегодня я расскажу и покажу вам несколько вариантов подключения любого кода javascript на wordpress странице.
Зачем нужно у вордпрессе подключать javascript на странице:
- Для вывода карты, проверки координат, запроса адреса и геолокации.
- Для вызова внешнего API JavaScript.
- Для Аякс запроса и многое другое.
Подключаем wordpress javascript на странице через шорткод
к менюСамый простой способ вставки javascript на странице wordpress - запихнуть его в шорткод и вызвать в нужном месте.
Делается это довольно просто:
1) Открываем файл темы functions.php.
2) В самом начале файла создаем шорткод вот таким способом:
Если нужно подключить отдельный файл javascript:
<?php function myJavascript1() <$str='<script type="text/javascript" src="https://help-wp.ru/wordpress-javascript-na-stranice-ili-poste/%D0%BC%D0%BE%D0%B9%D1%81%D0%B0%D0%B9%D1%82/js/script.js"></script>';
return $str;
>
add_shortcode( 'myJavascript1', 'myJavascript1');?>
или же вот такой код, если вам нужно вывести код в странице WordPress:
<?php function myJavascript1() <$str='<script type="text/javascript">alert("пример");</script>';
return $str;
>
add_shortcode( 'myJavascript1', 'myJavascript1');?>
Вместо alert("пример"); можно писать свой яваскрипт код, только следите чтоб кавычки были правильные и не конфликтовали. Все ' надо закрывать в /' для яваскрипта внутри этого ПХП.
3) Для вызова шорткода воспользуйтесь кодом [myJavascript1] - его можно вставить в любое место вашего поста или страницы WP.
Более подробно о том, как создать шорткод wordpress (откроется в новом окне) читайте по ссылке.
Многие программисты могут меня упрекнуть, что мол это не самый хороший код для вызова wordpress javascript на странице, но он рабочий. Далее я расскажу вам другие способы добавления яваскрипт.
Добавляем javascript на страницу wordpress через wp_enqueue_script
к менюФункция wp_enqueue_script идеально подходит для подключения яваскрипта к теме, но немножко туговато для подключения к отдельной странице, но все же с точки зрения правильности кода, такой вариант более правильный чем первый.
Подробные параметры функции wp_enqueue_script (откроется в новом окне) можно прочитать перейдя по ссылке, сейчас я вам покажу пример для отдельной страницы и отдельного поста.
Предположим, что нам нужно подключить javascript файл "myScript.js" для страницы с идентификатором 15, которому для работы нужна библиотека jQuery:
1) Открываем файл темы functions.php.
2) В самое начало записываем код:
add_action( 'wp_enqueue_scripts', 'my_scripts_add' );function my_scripts_add() if(is_page(15)) wp_enqueue_script("myScript", get_bloginfo( 'stylesheet_directory' ) . '/js/myScript.js',array('jquery'),"0.1",false);
>
>
3) Сохраняем, и заливаем на сервер, теперь на странице 15 будет вызываться файл под именем myScript.js
4) Если нам потребуется подключить этот javascript для поста wordpress с ид 21, то код будет такого плана:
add_action( 'wp_enqueue_scripts', 'my_scripts_add' );function my_scripts_add() if(is_single(21)) wp_enqueue_script("myScript", get_bloginfo( 'stylesheet_directory' ) . '/js/myScript.js',array('jquery'),"0.1",false);
>
>
Подключение wordpress javascript на странице в файле header.php
к менюЭто самый плохой вариант подключения javascript на странице WordPress, - я решил расказать о нем лиш по тому, что он лучше чем просто закинуть код в редактор записи, а также его реализация более проста для новичков.
1) Открываем файл темы header.php.
2) Перед закрывающимся тегом </head> пишем:
или вот так, если нам нужно подключить файл до поста:
или вот так если нужно до категории:
3) Если вам нужно не подключить код, а просто вывести его, то выглядеть это будет по аналогии с пунктом 2:
На этом у меня все, надеюсь эти 3 реализации подключения javascript на странице wordpress помогут вам правильно подключить код или вывести его.
Комментарии к записи «Как подключить javascript на странице или посте wordpress»:Я не большой любитель WP, но вот заказали на нем сайт, да и сам подумал, что для человека никогда не администрировавшего сайт, cms'ка пойдет. У меня такой вопрос: можно ли массивом добавлять идентификаторы страниц? Влияет ли вложенность страниц на срабатывание скрипта? Буду рад ответу.
Добрый день.
Так понимаю "массивом идентификаторы страниц" это вот так is_page(array(15,10,22,11)) ?? (Да, можно)
Но если вам ко многим страницам надо подключить скрипт, то проще тогда подключать полностью на весь сайт, без всяких проверок if(is_page(15)).
Вложенность страницы вроде никак не влияет на срабатывание скрипта. На подключение скрипта влияет очередь и что должно быть подключено до его подключения.
Благодарю за ответ. Вчера я пришел к этому сам, сочинив вот такой велосипед: (и это далеко не все страницы )) )
function tables_template_scripts() if( is_page(array('187','223','212','214','217','245','241','239','223','225','235','229','233','227','243','231','219','198','192','210','196','208','221')) )
wp_enqueue_script("js-zoom", get_template_directory_uri() . '/js/jquery.zoom.js',array('jquery'), '', false);
wp_enqueue_script("js-count", get_template_directory_uri() . '/js/count.me.js',array(), '', false);
wp_enqueue_script("js-bedview", get_template_directory_uri() . '/js/bed-veiw.js',array(), '', true);
>
add_action( 'wp_enqueue_scripts',
'tables_template_scripts' );
Я думал в таком ключе, если у меня есть родительская страница, а остальные к которым нужно подключить скрипты - ее дочерние, то сделав запрос if (is_page(родительская), как-то состыковать с запросом get_page_children и подключить скрипты. Вариант с шорт-кодом, хоть и не предполагает автоматизации, но на крайний случай тоже сгодится(( Так же, читая коментарии я понял, что один из скриптов с функцией onclick нужно передавать именно в text/javascript в консоли кидает ошибку ReferenceError: event is not defined библиотека jquery-1.10.2.min.js (в functions.php jquery по умолчанию). У Вас хороший сайт, посоветуйте свою статью про поиск wp с ajax без отдельного плагина? (если сталкивались).
Да, сложно с wp после october, сортировки медиафайлов нет, bootstrap 4 меню, чтобы полностью вывести с depth 3 знатно покрасноглазил (в итоге поменял разметку), для подключения конкретных скриптов и стилей нужен массив с id поста, иное почему-то у меня не прокатило, плагины на бесплатном хостинге, либо отказываются работать, либо работают корректно только их платные версии, в общем я повеселился, поседел и запил)) Благо уже на финишной прямой. Успехов!
А можете написать код как скомбинировать шорткод и wp_enqueue_script ?
Спасибо
ДД, а чем плох первый способ?
ДД, чем плох 1й способ? Вроде наоборот, скрипт грузится только на нужных страницах. Если таких не много, то это положительно сказывается на работе сайта.
P.S. Во втором способе скрипт тоже грузится только там где нужно.
Со страницами наверное можно использовать специально созданный шаблон, и подключать только в нем.
Только как модифицировать if чтобы проверялся шаблон?
Хотя наверное можно и с постами и с использовать мета поле, скажем script = 1, тогда подключается скрипт.
Так правильно будет?
P.S. вместо true можно писать false так вроде лучше работает
Не совсем понял последний вариант. Нужно вставлять код прямо на странице? Вроде же это не очень хорошо?
В общем с нетерпением жду обновления статьи с "правильным решением" подключения по требованию скриптов на странице/постах.))
Спасибо
1) Если ваш скрипт используется на всем сайте то правильней всего его подключать через wp_enqueue_script в файл functions.php (понятное дело в этом случаи не нужно ни каких if() условий)
2) Если вам нужно подключить скрипт в шорткоде то в сам шорткод в начало или конец вставляем wp_enqueue_script как я писал выше (тогда тоже условия не нужны).
3) Если нужно вставить на конкретную страницу или в конкретный шаблон, тогда лучше всего вставлять через functions.php но с добавлением правильного условия. например нужен код только на страницах поста, мы пишем if(is_single())
Давайте я поясню на своем примере.
Я хотел бы подключить скрипт кластеризации карт от гугл. Но используется он всего лишь на нескольких страницах их 600 (там где я вывожу карты). Скрипт достаточно тяжелый. Зачем грузить его на все страницы? Шорткодом было бы удобно, но вы говорите это не правильно.
Вот и думаю как сделать так чтобы только на определенных страницах/постах подключался этот скрипт, но, при этом, это было бы правильно реализовано. Через мета поле, как мне кажется, это было бы самым удобным вариантом.
Можно и через мета поле можно и через шорткод, глоавное чтоб подключалось через функцию wp_enqueue_script, а не хтмл кодом через тег <script type="text напрямую.
Здравствуйте! Подскажите, пожалуйста, как реализовать следующую конструкцию в wordpress?
Добрый день.
Не сильно понимаю ваш вопрос и как он относится к подключению яваскрипт у вордпрес.
А что делать, если нужно сделать шорткод скрипта состоящего из нескольких файлов, такой вот (-url-)
Добрый день.
Никто не запрещает вызвать несколько подключений яваскрипта типа wp_enqueue_script в шорткоде. В таком случаи скрипты допишутся в низ страницы. Со стилями аналогично только функция другая wp_enqueue_style
Для подключения скриптов JavaScript и JQuery в WordPress предусмотрена специальная функция wp_enqueue_script(). И очень важно подключать собственные скрипты используя именно ее. Функция избавит от подключения скрипта несколько раз (если один из плагинов уже использует одноименный скрипт), предотвратит конфликт скриптов и правильно подключит зависящие от библиотеки jQuery скрипты (после подключения библиотеки).Содержание статьи:
Подключение JavaScript к WordPress
Данный код подключает JavaScript в header шаблона WordPress.
- my_scripts_method — название вашей функции, можно любое, какое придет на ум, без пробелов, в нижнем регистре;
- wp_enqueue_script — функция для подключения js файлов WordPress;
- custom — название скрипта, любое, главное не повторять при подключении нескольких скриптов;
- get_template_directory_uri() — указывает на то, что скрипт находится в папке с шаблоном сайта, путь к файлу;
- /js/custom.js — в данном случае подключаемый скрипт должен находиться в папке js, custom.js — название js файла;
Для увеличения скорости загрузки сайта логичнее подключать скрипты в footer сайта, если скрипт не участвует в отрисовке страницы.
Данный код подключает JavaScript в footer шаблона WordPress.
Все то же самое, только добавлено true — команда для подключения JavaScript в footer.
Подключение зависящих от библиотеки JQuery скриптов к WordPress
Подключение аналогично подключению JavaScript, в функции указывается лишь массив JQuery, для правильной работы скрипта.
array(‘jquery’) — указывает зависимость от библиотеки JQuery.
Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.
Можно указать версию подключаемого скрипта к WordPress
‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.
Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.
Подключение стороннего скрипта к WordPress
В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.
Подключение скрипта к дочерней теме WordPress
Важно
При подключении скриптов в дочерней теме важно указывать директорию стилей CSS дочерней темы — get_stylesheet_directory_uri().
Перерегистрация, обновление библиотеки jQery
Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:
Добавление кода JavaScript в WordPress с использованием хуков wp_head и wp_footer
Во-первых, давайте посмотрим, как добавить код в заголовок вашего сайта WordPress. Вам нужно будет добавить следующий код в файл functions.php вашей темы или плагин Code Snippets.
Добавление JavaScript хуком к определенной публикации или странице WordPress
Предположим, вы хотите загрузить этот javascript только в конкретный пост WordPress. Для этого вам необходимо добавить условную логику в код. Взгляните на следующий пример:
Теперь этот код будет работать для любого типа поста с кроме страниц. Давайте рассмотрим другой пример, за исключением того, что он проверяет конкретный идентификатор страницы перед добавлением кода JavaScript в раздел head.
Вместо is_single мы теперь используем is_page для проверки идентификатора страницы.
Мы можем использовать тот же код с небольшими изменениями, чтобы добавить код JavaScript в нижний колонтитул footer вашего сайта. Посмотрите на следующий пример.
Подключение JS и jQery в плагине WordPress
При создании собственного плагина иногда требуется подключить JS. Также, если тема обновляется разработчиками, но нужно расширить ее функционал и для этого требуется подключение JS и jQery, нужно воспользоваться нижеприведенным кодом.
Подключаем файлы скриптов .js через functions.php
jQuery регистрируется в WP по умолчанию. Поэтому для его подключения достаточно одной строки:
Зарегистрировать и подключить новый скрипт (скрипт подключится в <head> ):
Чтобы подключить скрипт в футере после основного содержимого, можно использовать такой формат:
jQuery можно не подключать дополнительно, если один из скриптов указывает на зависимость от jQuery array('jquery') , то есть библиотека jQuery подключится вместе с этим скриптом.
Кстати, библиотека jQuery подключается в <head> из-за того, что много других скриптов и плагинов зависят от нее, и поэтому она должна быть подключена в первую очередь.
Использование
Шаблон использования
Параметры
$handle (строка) (обязательный)
Название скрипта (рабочее название). Строка в нижнем регистре.
Если строка содержит знак вопроса (?): scriptaculous&v=1.2 , то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.
$deps (массив)
Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array()
$ver (строка)
Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.
Если указать null , то никакая версия не будет добавлена.
По умолчанию: false
$in_footer (логический)
Подключить скрипт в подвал?
Обычно скрипт подключается в <head> документа, если указать true, то скрипт будет подключен перед тегом </body>, точнее там где вызывается тег шаблона wp_footer() .
Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнорировано.
Для понятного чтения кода, вместо true можно указать любую строку, например 'in_footer' .
По умолчанию: false
Рабочий пример
Примерно в таком формате я подключаю скрипты на своих сайтах.
Пример, как подключить скрипт для определенной страницы
Рекомендую к прочтению:
Комментарии (2) к “Подключаем правильно скрипты js в шаблоне WordPress”
Нурик
Спасибо. правильное подключение сразу убивает лишние баги. Например у меня в хедере тусили vue стайлы. После верного подключения все встало как положено
Читайте также: