А вообще, про подключение CSS и JS в WordPress на моём сайте есть отдельный видеоурок.
Рекомендуемый метод подключения файлов JavaScript в WordPress. Имеет ряд особенностей:
load-scripts.php
,То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.
wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )
null
, то версия не будет указываться. По умолчанию — текущая версия WordPress.<head>
. Если же указать данный параметр равным true
, тогда скрипт будет вставлен непосредственно перед закрывающим тегом </body>
.Конечно, вы можете просто засунуть это функцию в functions.php
, но тогда скрипт будет вставляться не только на страницах вашего сайта, но и в админке, а это может привести к некоторым багам.
Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts
, пример:
function true_include_myscript() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', '', '3.0', false ); } add_action( 'wp_enqueue_scripts', 'true_include_myscript' );
Тот же самый пример, но только с зависимостью от jQuery:
function true_include_myscript_dep_jquery() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'true_include_myscript_dep_jquery' );
Или подключим уже зарегистрированный ранее jQuery:
function true_include_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'true_include_jquery' );
Для подключения скриптов только в бэкэнде, т.е. только в админке, используйте хук admin_enqueue_scripts
, например:
function true_include_in_admin() { wp_enqueue_script( 'jquery' ); } add_action( 'admin_enqueue_scripts', 'true_include_in_admin' );
Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!
add_action( 'admin_init', 'true_plugin_admin_init' ); add_action( 'admin_menu', 'true_plugin_admin_menu' ); function true_plugin_admin_init() { /* * Регистрируем скрипт, * он кстати должен находиться той же папке, что и файл, в который будет вставлен этот код. */ wp_register_script( 'myscript', plugins_url( '/myscript.js', __FILE__ ) ); } function true_plugin_admin_menu() { /* * Добавляем субменю настроек плагина в Параметры. */ $page_hook_suffix = add_submenu_page( 'options-general.php', 'Мой плагин', 'Настройки моего плагина', 'manage_options', 'true-plugin', 'true_plugin_print_page' ); /* * Нетрудно догадаться, что вся фишка кроется в переменной $page_hook_suffix */ add_action('admin_print_scripts-' . $page_hook_suffix, 'true_plugin_admin_scripts'); } function true_plugin_admin_scripts() { /* * Подключаем наш уже зарегистрированный ранее скрипт. */ wp_enqueue_script( 'myscript' ); } function true_plugin_print_page() { /* * Cодержимое страницы настроек. */ echo 'Привет'; }
Все скрипты, перечисленные в этой таблице, регистрировать не нужно, достаточно указать их идентификатор при подключении, например: wp_enqueue_script('идентификатор')
.
Название скрипта | Идентификатор | Расположение файла | Зависимости |
---|---|---|---|
Jcrop | jcrop | /wp-includes/js/jcrop/jquery.Jcrop.min.js | |
SWFObject | swfobject | /wp-includes/js/swfobject.js | |
SWFUpload | swfupload | /wp-includes/js/swfupload/swfupload.js | |
SWFUpload Queue | swfupload-queue | /wp-includes/js/swfupload/plugins/swfupload.queue.js | |
SWFUpload Handlers | swfupload-handlers | /wp-includes/js/swfupload/handlers.min.js | |
jQuery | jquery | /wp-includes/js/jquery/jquery.js | json2 (для AJAX запросов) |
jQuery Form | jquery-form | /wp-includes/js/jquery/jquery.form.min.js | jquery |
jQuery Color | jquery-color | /wp-includes/js/jquery/jquery.color.min.js | jquery |
jQuery Masonry | jquery-masonry | /wp-includes/js/jquery/jquery.masonry.min.js | jquery |
jQuery UI Core | jquery-ui-core | /wp-includes/js/jquery/ui/jquery.ui.core.min.js | jquery |
jQuery UI Widget | jquery-ui-widget | /wp-includes/js/jquery/ui/jquery.ui.widget.min.js | jquery |
jQuery UI Mouse | jquery-ui-mouse | /wp-includes/js/jquery/ui/jquery.ui.mouse.min.js | jquery |
jQuery UI Accordion | jquery-ui-accordion | /wp-includes/js/jquery/ui/jquery.ui.accordion.min.js | jquery |
jQuery UI Autocomplete | jquery-ui-autocomplete | /wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js | jquery |
jQuery UI Slider | jquery-ui-slider | /wp-includes/js/jquery/ui/jquery.ui.slider.min.js | jquery |
jQuery UI Tabs | jquery-ui-tabs | /wp-includes/js/jquery/ui/jquery.ui.tabs.min.js | jquery |
jQuery UI Sortable | jquery-ui-sortable | /wp-includes/js/jquery/ui/jquery.ui.sortable.min.js | jquery |
jQuery UI Draggable | jquery-ui-draggable | /wp-includes/js/jquery/ui/jquery.ui.draggable.min.js | jquery |
jQuery UI Droppable | jquery-ui-droppable | /wp-includes/js/jquery/ui/jquery.ui.droppable.min.js | jquery |
jQuery UI Selectable | jquery-ui-selectable | /wp-includes/js/jquery/ui/jquery.ui.selectable.min.js | jquery |
jQuery UI Position | jquery-ui-position | /wp-includes/js/jquery/ui/jquery.ui.position.min.js | jquery |
jQuery UI Datepicker | jquery-ui-datepicker | /wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js | jquery |
jQuery UI Resizable | jquery-ui-resizable | /wp-includes/js/jquery/ui/jquery.ui.resizable.min.js | jquery |
jQuery UI Dialog | jquery-ui-dialog | /wp-includes/js/jquery/ui/jquery.ui.dialog.min.js | jquery |
jQuery UI Button | jquery-ui-button | /wp-includes/js/jquery/ui/jquery.ui.button.min.js | jquery |
jQuery UI Effects | jquery-effects-core | /wp-includes/js/jquery/ui/jquery.ui.effect.min.js | jquery |
jQuery UI Effects — Blind | jquery-effects-blind | /wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js | jquery-effects-core |
jQuery UI Effects — Bounce | jquery-effects-bounce | /wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js | jquery-effects-core |
jQuery UI Effects — Clip | jquery-effects-clip | /wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js | jquery-effects-core |
jQuery UI Effects — Drop | jquery-effects-drop | /wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js | jquery-effects-core |
jQuery UI Effects — Explode | jquery-effects-explode | /wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js | jquery-effects-core |
jQuery UI Effects — Fade | jquery-effects-fade | /wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js | jquery-effects-core |
jQuery UI Effects — Fold | jquery-effects-fold | /wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js | jquery-effects-core |
jQuery UI Effects — Highlight | jquery-effects-highlight | /wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js | jquery-effects-core |
jQuery UI Effects — Pulsate | jquery-effects-pulsate | /wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js | jquery-effects-core |
jQuery UI Effects — Scale | jquery-effects-scale | /wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js | jquery-effects-core |
jQuery UI Effects — Shake | jquery-effects-shake | /wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js | jquery-effects-core |
jQuery UI Effects — Slide | jquery-effects-slide | /wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js | jquery-effects-core |
jQuery UI Effects — Transfer | jquery-effects-transfer | /wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js | jquery-effects-core |
jQuery Schedule | schedule | /wp-includes/js/jquery/jquery.schedule.js | jquery |
jQuery Suggest | suggest | /wp-includes/js/jquery/suggest.min.js | jquery |
ThickBox | thickbox | /wp-includes/js/thickbox/thickbox.js | |
jQuery Hotkeys | jquery-hotkeys | /wp-includes/js/jquery/jquery.hotkeys.min.js | jquery |
Simple AJAX Code-Kit | sack | /wp-includes/js/tw-sack.min.js | |
QuickTags | quicktags | /wp-includes/js/quicktags.min.js | |
Autosave | autosave | /wp-includes/js/autosave.min.js | |
WordPress AJAX Response | wp-ajax-response | /wp-includes/js/wp-ajax-response.min.js | |
List Manipulation | wp-lists | /wp-includes/js/wp-lists.min.js | |
WP Common | 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 | |
JSON for JS | json2 | /wp-includes/js/json2.min.js | |
Plupload | plupload | /wp-includes/js/plupload/plupload.js | |
Underscore js | underscore | /wp-includes/js/underscore.min.js | |
Backbone js | backbone | /wp-includes/js/backbone.min.js |
Михаил, здравствуйте! Возник вопрос: в Кодексе в описании этой функции нет параметра in_footer. Так как все-таки на самом деле? Дело в том, что занимаюсь переносом скриптов из хедера в подвал, и было бы очень удобно, если бы функция действительно принимала этот параметр)
Добрый день)
а в чем собственно вопрос? этот параметр есть, по умолчанию принимает значение
false
Вопрос только в том, что на странице описания этой функции в Кодексе об этом параметре нет ни слова. А у Вас прочитала, вот и спрашиваю.
русская версия Кодекса мягко говоря не очень) да и в английской иногда бывают недочеты.
И вернулась сказать спасибо) Действительно есть и действительно работает. Большое спасибо 🙂
пожалуйста)
Спасибо за статью.
Нашел тут сайт с русским сервером скриптов
http://salat-production.ru/interactive-jquery-mootools-cdn.php
Доброй ночи.
Подскажи, пожалуйста, а как подключить новый медиазагрузчик?
Вот такой код выводит "старый"
пробовала менять media-upload на plupload-full, но не работает.
$deps
(массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт
Вот про $deps я вообще ничего не понял какие там должны быть идентификаторы?? Что от чего зависит (т.е как может быть что бы скрипты друг от друга зависили)??
Можете пожалуйста подробнее растолковать.
Ну например у вас есть какой-то код jQuery и он не будет работать пока не поключена сама библиотека jQuery — один из примеров такой зависимости.
Да например js код какой то не может работать без jq но можно прописать же так например
и все будет зависеть и все без всяких array в чем тогда разница?
Дело в том, что скрипты могут подключаться в разных местах, не только в теме, но и в плагинах, поэтому, чтобы все файлы задействовались в правильном порядке, нужно указывать этот параметр $deps.
Все понял спасибо. И еще как сделать так что бы Jquery подключался у меня в wp_footer перед боди. Пишу вот так wp_enqueue_script('jquery'); но он у меня в шапке подключается.
Нужно провернуть примерно такую комбинацию:
Все спасибо большое!
Рад помочь 🙂
Всем здравствуйте!!! Извините за вопрос, скорее всего он для всех Вас покажется очень глупым. Я прописываю такой код в WP
и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить JS((( ПОМОГИТЕ ПОЖАЛУЙСТА
Здравствуйте! Скажите, какая у этого кода задача?
у меня имеется два selectmenu. При выборе департамента, у меня автоматически должен появляться отдел. Если этот код сохранить через блокнот в расширении .js, то все идеально работает, а на WР никак не могу подключить. На сколько я поняла, мне необходимо сохранить мой скрипт в расширении js и положить его в папку плагины, а потом просто ссылаться на него, но никак не разобралась и ничего не заработало((((
то есть, если сохранить в блокноте в расширении .html то все работатет
В таком случае сначала просто вставьте этот код в WordPress туда, где его нужно вывести, в какой-нибудь php-файл.
Сохранять его в .js неправильно, так как там также имеется и html код.
здравствуйте. хочу реализовать на блоге вордпресс печать по этой инструкции: _http://loco.ru/materials/107-php-print-this-page-feature-javascript. я не понимаю, как подключить скрипт через отдельный Js-файл. пробовал, но не получается. можете объяснить и сколько стоит?
Здравствуйте. Вот так:
Миша, огромное спасибо, заработало...только в бланке печати русские буквы отображаются в виде символов (когда подключаю Js файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?
А есть тег?
да, в header.php присутствует.
Добрый день!
Помогите пожалуйста, хочу добавить себе всплывающее меню, как в примере http://codepen.io/laviperchik/pen/uyqmh, но не получается добавить javascript, не хочет открываться, я вызываю джаву в function.php:
кидаю в папку с темой:
но ничего не происходит, что я не так делаю?
Большое человеческое спасибо!
Добрый день!
Дочерние темы используете?
Зависимости от jQuery проставьте тоже.
День добрый! Спасибо за статью. Зарегистрировал файл, подключил. А как теперь вывести этот файл, в код php, исполнить
Добрый день!
Сам выведется, если wp_head(), wp_footer() используете.