Как подключить js wordpress

Как добавить JavaScript на WordPress

В статье мы расскажем, как подключить скрипт JS в тему WordPress.

Что такое JavaScript

JavaScript — это скриптовый язык программирования. Его скрипты обрабатываются не на сервере, а прямо в браузере. Это позволяет добавлять новые функции без потери скорости сайта.

Скрипт JS встроен внутрь тега — он позволяет отделить написанный код JavaScript от PHP:

Если вы хотите добавить скрипт JS, просто разместите его на нужной странице в коде сайта. Однако если вы работаете с WordPress, разместить JavaScript на странице таким способом не получится — он удалится при сохранении пользовательского файла. О том, как обойти это ограничение, расскажем ниже.

Как добавить JavaScript на WordPress

Если вы хотите добавить JS в WordPress, выберите один из трех способов:

• с помощью плагина Shortcoder,
• с помощью плагина Insert Headers and Footers,
• с помощью изменения файла functions.php.

Выберите инструкцию, чтобы разрешить подключение скрипта WordPress.

С помощью плагина Shortcoder

Shortcoder — это плагин, с помощью которого можно создать блок кода элемента. После публикации создается специальный шаблон, который можно добавить на нужную вам страницу.

Чтобы установить Shortcoder:

Откройте раздел Плагины — Добавить новый:

В поисковой строке введите название плагина. Когда поиск отобразит результат, нажмите Установить:

Кликните Активировать:

В разделе «Shortcoder» нажмите Create shortcode:

• Text editor — для добавления простого текста,
• Visual editor — для верстки небольшого элемента с текстом и изображением,
• Code editor — для добавления скрипта. Рекомендуем использовать его.

Введите название и вставьте код. Вы можете сохранить этот фрагмент в качестве черновика, но до публикации добавить его на страницу не получится. Для создания черновика кликните Сохранить: Если скрипты для сайта WordPress добавлены и вы хотите сохранить готовый шаблон, нажмите Опубликовать:

Готовый шаблон вы сможете добавить на любую страницу через админку.

С помощью плагина Insert Headers and Footers

Insert Headers and Footers — это плагин, с помощью которого можно создать шаблон кода. В этом шаблоне можно обозначить, в какой части страницы должен отрабатываться скрипт.

Чтобы установить Insert Headers and Footers:

Откройте раздел Плагины — Добавить новый:

В поисковой строке укажите имя плагина. Когда поиск отобразит результат, кликните Установить:

Нажмите Активировать:

Перейдите в раздел Плагины — Установленные:

В списке найдите WP Headers and Footers и кликните Settings:

• Header — шапку сайта,
• Body — тело сайта,
• Footer — подвал сайта. Добавьте код в нужную часть страницы:

WordPress: как подключить скрипт

Кликните Сохранить изменения:

С помощью изменения файла functions.php

В корневой директории сайта перейдите в папку wp-includes. Затем выберите инструкцию для вашей панели управления.

JavaScript на WordPress: как добавить

Читайте нашу статью, если хотите узнать, как настроить JS для WordPress. Мы расскажем о преимуществах JavaScript и покажем три способа его подключения на WP.

Что такое JavaScript и как работает

JavaScript — мультипарадигменный язык программирования. С его помощью можно добавить на веб-страницу сложные элементы: динамически обновляемый контент, интерактивные карты, 2D/3D-анимацию, прокрутку видео и другое.

Скрипты JS обрабатываются не на сервере, а прямо в браузере. Чтобы браузер мог прочитать JavaScript и отобразить пользователю нужный контент, в него встроен специальный движок. Именно он обрабатывает JS-скрипты и затем переводит их в машинный код. Самый популярный в настоящее время движок V8 был разработан в 2008 году компанией Google.

Скрипт JS выглядит следующим образом:

Обычно, чтобы на сайте отображались JavaScript-элементы, достаточно добавить этот скрипт в код сайта. Однако на WP этот номер не проходит — после сохранения пользовательского файла все изменения удаляются. Поэтому ниже мы показали альтернативные способы настройки JavaScript на WordPress.

Как подключить JS в WordPress

Добавить JS в WordPress можно одним из трёх способов:

• через файл functions.php,
• с помощью плагина Insert Headers and Footers,
• с помощью плагина Shortcoder.

через изменение файла functions.php

functions.php — это главный файл темы, который загружается при каждом открытии любой страницы WordPress. В нём задаются свойства, внешний вид и функциональность темы, а также кастомизируются хуки. Через functions.php можно добавить на сайт новые функции без установки плагинов.

1. Войдите в панель управления хостингом.
2. Откройте папку wp-includesв корневом каталоге сайта.
3. Кликните по файлу functions.php, наведите курсор мыши на кнопку Редактировать и выберите Открыть:
4. Добавьте код и нажмите Ok: Готово, скрипты для сайта WordPress добавлены.

через плагин Insert Headers and Footers

Insert Headers and Footers by WPBeginner — это простой в использовании плагин, который позволяет вставить код Google Analytics, JavaScript, пользовательский CSS и другие данные в нужную часть сайта WordPress — шапку, подвал или тело. При этом саму тему редактировать не нужно.

1. Войдите в WordPress.
2. Перейдите раздел Плагины — Добавить новый. Введите «Insert Headers and Footers by WPBeginner» в поисковую строку и кликните Установить:
3. Нажмите Активировать:
4. Перейдите в раздел Настройки — Insert Headers and Footers. Вставьте скрипт в одну из трёх частей сайта:

• в Header (шапка сайта),
• в Body (основная часть сайта),
• в Footer (подвал сайта).

5. После этого нажмите Сохранить изменения: Готово, подключение скрипта для WordPress завершено.

через плагин Shortcoder

Shortcoder — плагин для создания и вставки шорткода в текст записей. Очень прост в использовании. С его помощью можно добавить на страницы рекламу Я.Директ, любые JS-скрипты, Flash-содержимое и многое другое.

1. Войдите в WordPress.
2. Перейдите раздел Плагины — Добавить новый. Введите «Shortcoder», а затем кликните Установить:
3. Нажмите Активировать:
4. В настройках плагина из раскрывающегося списка выберите режим Code editor:
5. Укажите название и добавьте код. Этот фрагмент нельзя добавить на страницу до публикации, но можно сохранить в качестве шаблона. Чтобы создать черновик шаблона, нажмите Сохранить:
6. Чтобы сохранить готовый шаблон, нажмите Опубликовать: Готово. Теперь вы можете встроить этот шаблон на любую страницу.

Популярные статьи

• Как указать (изменить) DNS-серверы для домена
• Я зарегистрировал домен, что дальше
• Как добавить запись типа A, AAAA, CNAME, MX, TXT, SRV для своего домена
• Что такое редирект: виды и возможности настройки
• Как создать почту со своим доменом

wp_enqueue_script() — подключение JavaScript

Рекомендуемый метод подключения скриптов WordPress. Имеет ряд особенностей:

• JS-файлы вставляются на страницы сайта через функции wp_head() и wp_footer(),
• в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php ,
• позволяет подключать скрипты с учетом их зависимостей друг от друга;

То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )

Параметры функции wp_enqueue_script()

$handle (строка) какое-нибудь название (идентификатор), придуманное вами (строка в нижнем регистре), либо можно подключить уже зарегистрированные (через wp_register_script()) ранее скрипты, используя их идентификаторы $src (строка) абсолютный URL файла JavaScript, который требуется подключить, этот параметр (и все последующие тоже) нужен только для незарегистрированных скриптов $deps (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт $ver (строка) версия файла. Если установить значение null , то версия не будет указываться. По умолчанию — текущая версия WordPress. Подробнее про параметр. $in_footer (логическое) по умолчанию файлы JavaScript подключаются внутри тегов . Если же указать данный параметр равным true , тогда скрипт будет вставлен непосредственно перед закрывающим тегом .

Пример 1 – подключение JS файла

Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts , пример:

add_action( 'wp_enqueue_scripts', 'true_include_myscript', 25 ); function true_include_myscript() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array(), '3.0' ); }

Тот же самый пример, но только с зависимостью от jQuery:

add_action( 'wp_enqueue_scripts', 'true_include_myscript_dep_jquery', 25 ); function true_include_myscript_dep_jquery() { wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ), '3.0' ); }

Пример подключения в админке

Для подключения скриптов только в админке используйте хук admin_enqueue_scripts , например:

add_action( 'admin_enqueue_scripts', 'true_include_in_admin', 25 ); function true_include_in_admin() { wp_enqueue_script( 'myscript', . ); }

Пример 2 – подключение jQuery CDN

Иногда бывает, что вы хотите подключите какой-то скрипт с CDN, это даже не обязательно должен быть jQuery, в этом случае указываем полный URL файла.

add_action( 'wp_enqueue_scripts', 'true_jquery_cdn', 25 ); function true_jquery_cdn() { wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ); }

Пример 3 – как подключить JS к HTML

Небольшое отклонение от нашей темы и от функции wp_enqueue_script() – хочу показать вам именно способы подключения JS к HTML сайта в или в футере при помощи тегов .

Для подключения между тегами и мы будем использовать хук wp_head:

add_action( 'wp_head', 'truemisha_script_to_head', 25 ); function truemisha_script_to_head() { echo ''; }

А для футера сайта соответственно используем хук wp_footer:

add_action( 'wp_footer', 'truemisha_script_to_footer', 25 ); function truemisha_script_to_footer() { echo ''; }

Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.

Пример 4. Подключение JS только на странице настроек конкретного плагина

Получается, что мы подключаем необходимый 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 'Привет'; }

Таблица стандартных скриптов в WordPress

Все скрипты, перечисленные в этой таблице, регистрировать не нужно, так как они уже присутствуют в ядре WordPress и зарегистрированы, достаточно указать их идентификатор при подключении, например: wp_enqueue_script( ‘идентификатор’ ) или:

wp_enqueue_script( 'jquery' );

Идентификатор	Файл	Зависимости
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. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

1. Параметры
2. Пример 1 – подключение
3. Пример 2 – jQuery через CDN
4. Пример 3 – подключение тегом script
5. Пример 4 – только на странице плагина
6. Скрипты в ядре

Комментарии — 34

Лариса 16 Окт 2013

Михаил, здравствуйте! Возник вопрос: в Кодексе в описании этой функции нет параметра in_footer. Так как все-таки на самом деле? Дело в том, что занимаюсь переносом скриптов из хедера в подвал, и было бы очень удобно, если бы функция действительно принимала этот параметр)

Миша 16 Окт 2013
Добрый день)
а в чем собственно вопрос? этот параметр есть, по умолчанию принимает значение false
Лариса 16 Окт 2013

Вопрос только в том, что на странице описания этой функции в Кодексе об этом параметре нет ни слова. А у Вас прочитала, вот и спрашиваю.

Миша 17 Окт 2013
русская версия Кодекса мягко говоря не очень) да и в английской иногда бывают недочеты.
Лариса 16 Окт 2013
И вернулась сказать спасибо) Действительно есть и действительно работает. Большое спасибо 🙂
Миша 17 Окт 2013
пожалуйста)
Евгений 28 Ноя 2013

Спасибо за статью.
Нашел тут сайт с русским сервером скриптов
http://salat-production.ru/interactive-jquery-mootools-cdn.php

VRS 24 Мар 2014

Доброй ночи.
Подскажи, пожалуйста, а как подключить новый медиазагрузчик?
Вот такой код выводит «старый»

function my_add_upload_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script( 'my-upload-script' /* Подключаем JS-код задающий поведение * загрузчика и указывающий, куда вставлять * ссылку после загрузки изображения * Его код будет приведен ниже. */ ,get_bloginfo('template_url').'/js/upload.js' /* Указываем скрипты, от которых * зависит наш JS-код */ ,array('jquery','media-upload','thickbox') ); wp_enqueue_script('my-upload-script'); } // Запускаем функцию подключения загрузчика if( is_admin() ) add_action('admin_print_scripts', 'my_add_upload_scripts');

пробовала менять media-upload на plupload-full, но не работает.
Антон 15 Авг 2014

$deps
(массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт Вот про $deps я вообще ничего не понял какие там должны быть идентификаторы?? Что от чего зависит (т.е как может быть что бы скрипты друг от друга зависили)?? Можете пожалуйста подробнее растолковать.

Миша 15 Авг 2014

Ну например у вас есть какой-то код jQuery и он не будет работать пока не поключена сама библиотека jQuery — один из примеров такой зависимости.

Антон 15 Авг 2014
Да например js код какой то не может работать без jq но можно прописать же так например

wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/jq.js', '', '3.0', false ); wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/js.js', '', '3.0', false );

и все будет зависеть и все без всяких array в чем тогда разница?
Миша 16 Авг 2014

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

Антон 16 Авг 2014

Все понял спасибо. И еще как сделать так что бы Jquery подключался у меня в wp_footer перед боди. Пишу вот так wp_enqueue_script(‘jquery’); но он у меня в шапке подключается.

Миша 16 Авг 2014
Нужно провернуть примерно такую комбинацию:

wp_deregister_script('jquery'); wp_register_script('jquery', 'URL скрипта', false, null, true); wp_enqueue_script('jquery');

Антон 16 Авг 2014
Все спасибо большое!
Миша 17 Авг 2014
Рад помочь 🙂
Сайра 23 Янв 2015

Всем здравствуйте. Извините за вопрос, скорее всего он для всех Вас покажется очень глупым. Я прописываю такой код в WP

Ваш департамент*
 Департамент бухгалтерского и налогового учета Департамент взаимодействия с телерадиоканалами Департамент государственных закупок и логистики Департамент информационных технологий Департамент казначейства Ваш отдел*
 Отдел бухгалтерского учета Отдел налогового учета  Отдел работы с радиоканалами  Отдел государственных закупок Отдел планирования государственных закупок и логистики Отдел электронных закупок  Отдел администрирования корпоративных систем и управления безопасностью информационных технологий Отдел администрирования серверов и операционных систем Отдел развития и эксплуатации транспортных сетей и коммуникаций Отдел технической поддержки и регионального управления  Отдел бухгалтерского учета Отдел налогового учета Отдел работы с телерадиоканалами Отдел государственных закупок Отдел планирования государственных закупок и логистики Отдел электронных закупок Отдел администрирования корпоративных систем и управления безопасностью информационных технологий Отдел администрирования серверов и операционных систем Отдел развития и эксплуатации транспортных сетей и коммуникаций Отдел технической поддержки и регионального управления function onChange() < var objSel = document.getElementById("change");; var select1 = document.getElementById("change1"); var select2 = document.getElementById("change2"); var select3 = document.getElementById("change3"); var select4 = document.getElementById("change4"); var select5 = document.getElementById("change5"); if (objSel.value == 1) < select1.style.display = 'block'; select2.style.display = 'none'; select3.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 2) < select2.style.display = 'block'; select1.style.display = 'none'; select3.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 3) < select3.style.display = 'block'; select1.style.display = 'none'; select2.style.display = 'none'; select4.style.display = 'none'; select5.style.display = 'none'; >if (objSel.value == 4) < select4.style.display = 'block'; select2.style.display = 'none'; select3.style.display = 'none'; select1.style.display = 'none'; select5.style.display = 'none'; >> 

и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить JS((( ПОМОГИТЕ ПОЖАЛУЙСТА

Миша 24 Янв 2015
Здравствуйте! Скажите, какая у этого кода задача?
Сайра 4 Фев 2015

у меня имеется два selectmenu. При выборе департамента, у меня автоматически должен появляться отдел. Если этот код сохранить через блокнот в расширении .js, то все идеально работает, а на WР никак не могу подключить. На сколько я поняла, мне необходимо сохранить мой скрипт в расширении js и положить его в папку плагины, а потом просто ссылаться на него, но никак не разобралась и ничего не заработало((((

Сайра 4 Фев 2015
то есть, если сохранить в блокноте в расширении .html то все работатет
Миша 4 Фев 2015

В таком случае сначала просто вставьте этот код в WordPress туда, где его нужно вывести, в какой-нибудь php-файл. Сохранять его в .js неправильно, так как там также имеется и html код.

артем 14 Май 2015

здравствуйте. хочу реализовать на блоге вордпресс печать по этой инструкции: _http://loco.ru/materials/107-php-print-this-page-feature-javascript. я не понимаю, как подключить скрипт через отдельный Js-файл. пробовал, но не получается. можете объяснить и сколько стоит?

Миша 15 Май 2015
Здравствуйте. Вот так:

script src="URL скрипта">script>

артем 15 Май 2015

Миша, огромное спасибо, заработало. только в бланке печати русские буквы отображаются в виде символов (когда подключаю Js файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?

wp_enqueue_script() │ WP 2.1.0

Правильно подключает скрипт (JavaScript файл) на страницу. Использовать эту функцию для подключения js файлов важно, потому что так вы в дальнейшем сможете без лишних проблем объединять JS файлы в один. Также в некоторых случаях избавитесь от конфликтов скриптов, когда зависимый скрипт подключается до основного (того от которого он зависит). Функция добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит, зарегистрированы. Зависимые скрипты добавляются автоматически.

ВАЖНО! Это ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет скрипты. Также эта функция должна вызываться до wp_footer(), иначе скрипты вообще не будут подключены.

Если скрипт уже зарегистрирован с помощью wp_register_script(), то для его подключения в этой фукнции нужно указать только идентификатор скрипта (в первом параметре):

// jquery регистрируется в WP по умолчанию. // Поэтому для его подключения достаточно одной строки: wp_enqueue_script('jquery');

Если скрипт не зарегистрирован, то его можно зарегистрировать и подключить одновременно:

wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js');

С версии 3.3. wp_enqueue_script() можно вызывать во время генерации страницы. В этом случае вызываемый скрипт будет подключен в подвале, в момент срабатывания события wp_footer.

• wp_enqueue_scripts — для внешней части сайта;
• admin_enqueue_scripts — для админ-панели;
• login_enqueue_scripts — для страницы входа (wp-login.php).

• Используйте wp_script_add_data() — когда нужно подключить скрипт с условием, например,

[ 'in_footer' => true, 'strategy' => 'async', ]

add_action('wp_enqueue_scripts', 'my_scripts_method'); function my_scripts_method() < wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom_script.js', array('jquery'), filemtime( get_theme_file_path('js/custom_script.js') ) ); >

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 11 ); function my_scripts_method() < wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'); wp_enqueue_script( 'jquery' ); >

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); function my_scripts_method() < $script_url = plugins_url( '/js/newscript.js', __FILE__ ); wp_enqueue_script('custom-script', $script_url, array('jquery') ); >

add_action( 'admin_menu', 'my_plugin_admin_menu' ); function my_plugin_admin_menu() < // Регистрируем страницу плагина $page = add_submenu_page( 'edit.php', // Родительская страница меню __( 'Мой плагин', 'myPlugin' ), // Название пункта меню __( 'Мой плагин', 'myPlugin' ), // Заголовок страницы 'manage_options', // Возможность, определяющая уровень доступа к пункту 'my_plugin-options', // Ярлык (часть адреса) страницы плагина 'my_plugin_manage_menu' // Функция, которая выводит страницу ); // Используем зарегистрированную страницу для загрузки скрипта add_action( 'load-' . $page, 'my_plugin_admin_scripts' ); >## Эта функция будет вызвана только на странице плагина, подключаем скрипт function my_plugin_admin_scripts() < wp_enqueue_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) ); >function my_plugin_manage_menu() < // Выводим страницу плагина >

add_action('wp', 'add_my_script_where_it_necessery'); function add_my_script_where_it_necessery() < if( is_single() ) add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); >function my_scripts_method() < $script_url = plugins_url( '/js/newscript.js', __FILE__ ); wp_enqueue_script('newscript', $script_url, array('scriptaculous') ); >

add_action('wp_enqueue_scripts', 'my_scripts_method'); function my_scripts_method() < wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom_script.js', array('jquery') ); >

## удаляет версию WP из преданного URL у скриптов и стилей add_filter( 'script_loader_src', 'hb_remove_wp_version_from_src' ); add_filter( 'style_loader_src', 'hb_remove_wp_version_from_src' ); function hb_remove_wp_version_from_src( $src ) < global $wp_version; parse_str( parse_url( $src, PHP_URL_QUERY ), $query ); if ( ! empty($query['ver']) && $query['ver'] === $wp_version ) < $src = remove_query_arg('ver', $src); >return $src; >