Wp enqueue script

Функции

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

Зачем нам использовать функцию Enqueue?

Как правило, те, кто ранее занимался версткой простых HTML страничек, привыкли загружать Javascript файлы (включая плагины jQuery) напрямую в теге <head> или в футере документа. Это себя оправдывало в ситуации одной-двух HTML-страничек. Однако, когда при установке WordPress потенциально могут загружаться сотни и тысячи скриптов, такая практика вызывает определенные сложности. Наступает ситуация, которую обычно называют «сдерживание толпы» ваших скриптов.


Так почему собственно не загружать ваши скрипты JavaScript в Шапке или Футере документа? Ответ прост: включая на страницу скрипты таким образом, вы рискуете создать конфликтную ситуацию. Представьте себе, что несколько плагинов попытаются одновременно загрузить одни и те же скрипты или их разные версии.

Кроме того, ваши скрипты будут грузиться на каждой странице даже если вам этого не нужно. Это приведет к излишне долгой загрузке ваших страниц, а также может помешать скриптам плагинов или файлам JavaScript, работающим только в административной части сайта. В общем, такая практика не рекомендуется разработчиками WordPress.

Используя функцию wp_enqueue_script, вы получаете контроль над тем, когда и где загружать скрипты JavaScript. Вы можете даже решить будут ли они грузиться в теге <head> или в подвале документа.

Понимание функции wp_enqueue_script

Функция wp_enqueue_script занимается тем, что загружает скрипты на ваш сайт WordPress. Эту функцию необходимо прописать в файле functions.php.

Итак, давайте взглянем на структуру wp_enqueue_script:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle

  • Название файла для загрузки. Записывается в нижнем регистре.
  • Обязательно
  • По умолчанию: none

$scr

  • Полный путь или URL к файлу скрипта
  • Если вы загружаете локально с вашего сервера, то вы не должны жестко прописывать этот путь (с доменом). Наилучшее решение — использовать get_template_directory_uri() для тем и plugins_url() — для плагинов.
  • Если вы загружаете ваш скрипт с другого сервера, например, какой-нибудь плагин к библиотеке jQuery, то необходимо вставить URL:
  • Опционально
  • По умолчанию: false

$deps

  • Это массив, содержащий названия скриптов, от которых зависит наш скрипт. Например, ваш скрипт foo.js требует уже загруженной библиотеки jQuery. Данный параметр поставит foo.js в очередь на загрузку только после jQuery.
  • Вы должны поставить false, если не хотите использовать этот параметр, но хотите использовать остальные.
  • Все зависимости должны ставиться в очередь до foo.js
  • Зависимости записываются как массив:
  • Опционально
  • По умолчанию: array()

$ver

  • Версия скрипта
  • Версия будет дописываться к URL скрипта через знак «?». Может принимать следующие значения: номер версии, false или NULL.
  • В случае false, будет использоваться версия WordPress
  • В случае NULL, к URL ничего дописываться не будет (не рекомендуется).
  • Если вы не используете параметр $ver, по умолчанию будет дописываться версия WordPress.

  • Опционально
  • По умолчанию: false

$in_footer

  • От этого зависит, где будет прописываться скрипт на странице.
  • Принимает логическое значение true или false.
  • По умолчанию ваш скрипт пропишется в теге <head>. С точки зрения производительности, лучше прописывать загрузку скриптов перед закрывающим тегом <body>, в этом случае функции надо передать аргумент «true«.
  • Опционально
  • По умолчанию: false

Как видите, кроме параметра $handle, все остальные параметры являются необязательными. На первый взгляд, это может показаться странным, особенно, в случае параметра $scr. Как в таком случае WordPress поставит в очередь скрипт без полного пути к нему?

Причина в том, что WordPress поставляется уже со встроенными скриптами. Например, библиотека jQuery является частью ядра WP, и разработчики движка сделали способ добавления скриптов на страницу невероятно простым. Все, что требуется — передать функции название желаемого скрипта:

Полный список встроенных в WordPress популярных скриптов смотрите в кодексе.

Использование wp_enqueue_script с вашей темой WordPress

Давайте рассмотрим ситуацию использования wp_enqueue_script с вашей темой WordPress.

Самое важное

Есть функции WordPress, о которых вам нужно знать, прежде чем вы сможете начать использовать enqueing должным образом.

wp_register_script


  • Функция wp_register_script используется для регистрации ваших скриптов в WordPress. Что это означает? Благодаря регистрации в системе скриптов, вы сможете использовать их с функцией wp_enqueue_script, как если бы они были встроены в систему изначально.
  • Параметры функции wp_register_script такие же как и у wp_enqueue_script, поэтому нет нужды их повторять.
  • Просто вызовете функцию wp_register_script, передав ей в качестве параметров те же аргументы, что и для wp_enqueue_script.
  • Зарегистрировав таким образом новый скрипт в системе, вызовите функцию wp_enqueue_script с единственным аргументом — названием нового скрипта.

wp_deregister_script

  • Функция wp_deregister_script, наоборот, «снимает» регистрацию скрипта.
  • Все, что надо сделать — передать название скрипта.

wp_dequeue_script

  • Функция wp_dequeue_script убирает скрипт из очереди загрузки.
  • Все, что надо сделать — передать название скрипта.

Загрузка ваших скриптов

Самый простой способ загрузить ваш скрипт — это вызвать функцию wp_enqueue_script в файле шаблона.

Данный способ прост, но не элегантен. Лучшей практикой считается воспользоваться файлом function.php для регистрации и постановки в очередь скриптов. Для этого создайте пользовательскую функцию, а затем используйте add_action для инициализации этой функции.

  • В строке 2 создаем пользовательскую функцию load_my_scripts
  • В строке 3 регистрируем скрипт myscript
  • В строке 4 ставим в очередь myscript
  • В строке 6 инициализируем функцию load_my_scripts

Допустим, наш новый скрипт зависит от новейшей версии библиотеки jQuery, а в поставляемой версии WordPress содержится устаревшая версия библиотеки. Тогда мы:

  • В строке 3 снимаем регистрацию устаревшей версии jQuery, поставляемой с WordPress по умолчанию
  • В строке 4 регистрируем новую или другую версию jQuery
  • В строке 5 ставим в очередь новую версию jQuery

Хорошей практикой разработки тем и плагинов под WordPress считается проверка на существование пользовательской функции. Это на случай, если такая функция уже существует, чтобы мы ее случайно не переопределили:


Данный код проверит, существует ли функция с таким же названием, и, если — нет, создаст её.

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

Мы должны проверить, с помощью функции is_admin(), является ли загружаемая страница административной и, если нет, — загрузить скрипт.

Теперь функция выглядит следующим образом:

Теперь все в порядке. Это готовый шаблон для постановки в очередь пользовательских скриптов с вашей темой WordPress.

blogbit.net

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

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

filwebs.ru

wp_enqueue_script( string $handle, string $src = false, array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

Описание

Регистрирует скрипт, если $src при условии (не перезаписывает), и ставит в очередь.

Параметры

$handle

( Строка ) (обязательно) Имя сценария. Должно быть уникальным.

$src

( Строка ) (необязательная) Полный URL сценария, или путь сценария по отношению к корневой директории WordPress.

Значение по умолчанию: false

$deps

( Массив ) (Необязательно) Массив зарегистрированного сценария обрабатывает этот сценарий.

Значение по умолчанию: Array ()

$ver

( Строка | BOOL | NULL ) (необязательно) Строка, номер версии сценария, если он один, который добавляется к URL в виде строки запроса для целей очистки кэша. Если версия устанавливается на false, номер версии автоматически добавляется равной текущей установленной версии WordPress. Если установлено значение NULL, ни одна из версий не добавляется.

Значение по умолчанию: false

$in_footer

( BOOL ) (Необязательно) Следует ли сценарий перед </ body> , а не в <HEAD>. По умолчанию ‘false’.

Значение по умолчанию: false

Источник

Файл: wp-include/wp-scripts.php

function wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false ) {  $wp_scripts = wp_scripts();    _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );      if ( $src || $in_footer ) {  $_handle = explode( '?', $handle );    if ( $src ) {  $wp_scripts->add( $_handle[0], $src, $deps, $ver );  }    if ( $in_footer ) {  $wp_scripts->add_data( $_handle[0], 'group', 1 );  }  }    $wp_scripts->enqueue( $handle ); }

Использование

Это рекомендуемый метод связывания JavaScript для WordPress.

Примеры:

function mytheme_add_init(){  $file_dir=get_bloginfo(‘template_directory’);  wp_enqueue_style(“tab”, $file_dir.”/css/tab.css”, false, “1.0”, “all”);  wp_enqueue_script(“jquery1.8.3″, $file_dir.”/js/jquery1.8.3.js”, false, true);  wp_enqueue_script(“tab”, $file_dir.”/js/tab.js”, false, true);  }  add_action( ‘admin_init’, ‘mytheme_add_init’ );

 

Примечания

  • Функция должна быть вызвана с помощью wp_enqueue_scripts, если вы хотите вызвать ее на переднем участке кода, как в приведенных выше примерах. Чтобы вызвать ее на экранах администрирования, используйте admin_enqueue_scripts. Для экрана входа в систему , используйте login_enqueue_scripts. Вызвав его за пределами крюком действий может привести к проблемам, см билет # 11526 для деталей.
  • При попытке зарегистрировать или уникализировать уже зарегистрированную ручку с различными параметрами, новые параметры будут проигнорированы. Вместо этого используйте wp_deregister_script () и зарегистрировать сценарий снова с новыми параметрами.
  • JQuery UI эффектов не входит в комплект jquery-ui-core.
  • Эта функция основана на использовании wp_head () и wp_footer () активной темой. Это означает, что она не может работать с несколькими очень старыми темами, в которых не вызывались эти функции. Это полезно иметь в виду при отладке старых тем.
  • Использование: WWP_Scripts::add(), WP_Scripts::add_data() и WP_Scripts::enqueue().
  • Использует глобальные: (unknown type) $wp_scripts.

Сценарии по умолчанию Включено и Зарегистрировано в WordPress

По умолчанию, установка WordPress включает в себя множество популярных скриптов, обычно используемые веб-разработчиками, кроме сценариев, используемых самим WordPress.

Подробный список имен , которые могут быть использованы вместо параметра $handle см wp_register_script () .

andreyex.ru

Сенсейский метод

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

Для начала зарегистрируйте ваш JavaScript-файл без подключения через wp_register_script():

 function mihdan_wp_enqueue_scripts() { 	wp_register_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

Этим вы дадите знать ядру WordPress о существовании вашего файла, но он не будет загружен на страницу.

Последний параметр true в функции wp_register_script() даёт указание движку вставлять ваш файл в подвал сайта, а не его шапку, как это сделано по-умолчанию.

Следующим шагом будет подключение вашего скрипта по требованию, то есть прямо внутри шорткода:

 function mihdan_shortcode( $atts ) { 	// Код вашего шорткода 	...  	// Подключение вашего скрипта по требованию 	wp_enqueue_script( 'script-name' ); } add_shortcode( 'mihdan_shortcode', 'mihdan_shortcode' );

Получается, что скрипт подключается в футер только на тех страницах, где он реально необходим и только, если на этих страницах есть ваш шорткод, профит.

Если вам надо, чтобы скрипты в обязательном порядке загрузились в <header>, то этот способ не для вас, так как при данном подходе скрипты убегут в футер.

www.kobzarev.com

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

Подключение скриптов и стилей

Если нам нужен CSS или JavaScript код на странице мы, как правило, размещаем его внутри соответствующего тега, либо подключаем его с помощью ссылки на файл, в котором он расположен:

  // ...  <script type="text/javascript">   // JS code  </script>    <style type="text/css">   // CSS code  </style>  //...    <script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

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

  add_action( 'admin_enqueue_scripts', function($hook) {   $pluginPrefix = "my-prefix";   wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );  } );

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

Данное решение не идеально — наш скрипт будет загружаться для каждой страницы интерфейса администратора. Мы можем использовать переменную $hook и подключать скрипт только на нужных страницах.

  add_action( 'admin_enqueue_scripts', function($hook) {   if ( !in_array($hook, array("options-general.php", "post-new.php")) )   return;     $pluginPrefix = "my-prefix";   wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );  } );

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

  add_action( 'admin_enqueue_scripts', function($hook) {   if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )   {   $pluginPrefix = "my-prefix";   wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );   }  } );

Удаление ненужного скрипта

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

  add_action( 'admin_enqueue_scripts', function($hook) {   $unautorized_styles = [   'script1',   'another-script'   ];     foreach ( $unautorized_styles as $handle )   {   wp_deregister_style( $handle );   }     // enqueue my scripts  } );

Шорткоды

Многие плагины и темы имеют набор шорткодов (shortcode) для взаимодействия с сайтом, некоторым из них требуются скрипты или стили. В этом случае у нас нет способа проверить необходимость подключения скрипта, как в предыдущем примере.

Самый простой способ — зарегистрировать фильтр для события the_content и проверить используется ли шорткод, если да, то подключаем скрипт.

  add_filter( 'the_content', function($content) {   if ( has_shortcode($content, "hello-shortcode") )   {   $pluginPrefix = "my-prefix";   wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/hello-shortcode.js') );   }  });

Этот пример будет подключать скрипт для постов, в которых используется наш шорткод. Однако этот код будет очень не эффективен при больших нагрузках. Будем использовать более продвинутое решение для этой проблемы.

Если вы еще не используете Composer для загрузки ваших классов, то советую вам начать. Файл composer.json для нашего плагина будет выглядеть так:

  // composer.json  {   "name": "Demo plugin",   "description": "",   "authors": [   {   "name": "Author name",   "email": "author.name@example.com"   }   ],   "autoload": {   "psr-4": {   "ESP\": "src/"   }   }  }

Файл src/shortcodes/HelloShortcode.php содержит класс для нашего шорткода.

  // src/shortcodes/HelloShortcode.php    namespace ESPShortcodes;    class HelloShortcode  {   static $loaded;     public $name;     public function __construct()   {   $this->name = "hello-shortcode";   }     public function run()   {   static::$loaded = true;     return "Hello shortcode!";   }     public function enqueueScripts()   {   if ( static::$loaded == false )   return;     $pluginPrefix = "my-prefix";   wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/hello-shortcode.js') );   }  }

Метод run() вернет HTML разметку для шорткода и установит свойство loaded равным true, если шорткод был использован.

Метод enqueueScripts() подключит необходимые стили и скрипты, при загрузке плагина. Также в файле плагина надо зарегистрировать нужные шорткоды.

  // plugin-file.php    require_once __DIR__."/vendor/autoload.php";    $shortcodes = [   'ESP\Shortcodes\HelloShortcode'  ];    foreach ($shortcodes as $shortcode) {   $shortcode = new $shortcode;   add_shortcode($shortcode->name, [ $shortcode, 'run' ]);  }    add_action('wp_footer', function() use($shortcodes) {   foreach ($shortcodes as $shortcode) {   (new $shortcode)->enqueueScripts();   }  });

Переменная $shortcodes содержит список шорткодов. Первый цикл зарегистрирует их и установит в качестве обработчика метод run(). Далее мы используем wordpress хук wp_footer для подключения скриптов перед закрытием тега body.

easy-code.ru

Подключаем файлы скриптов .js через functions.php

jQuery регистрируется в WP по умолчанию. Поэтому для его подключения достаточно одной строки:

 wp_enqueue_script('jquery');

Зарегистрировать и подключить новый скрипт (скрипт подключится в <head>):

 wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js');

Чтобы подключить скрипт в футере после основного содержимого, можно использовать такой формат:

 wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js', array(), false, true);

jQuery можно не подключать дополнительно, если один из скриптов указывает на зависимость от jQuery array('jquery'), то есть библиотека jQuery подключится вместе с этим скриптом.

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

Использование

 wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Шаблон использования

 add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); function my_scripts_method(){  wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js'); }

Параметры

$handle (строка) (обязательный)
Название скрипта (рабочее название). Строка в нижнем регистре.
Если строка содержит знак вопроса (?): scriptaculous&v=1.2, то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.

$src (строка)
УРЛ файла скрипта. Например: http://example.com/wp-content/themes/my-theme/my-theme-script.js.
Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script().
Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения URL:
plugins_url() – для плагинов
get_template_directory_uri() – для тем.
Ссылки на внешние скрипты можно указывать без указания протокола: //otherdomain.com/js/their-script.js.
Уже зарегистрированные в WP скрипты смотрите ниже в этой статье.
По умолчанию: false

$deps (массив)
Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array()

$ver (строка)
Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.
Если указать null, то никакая версия не будет добавлена.
По умолчанию: false

$in_footer (логический)
Подключить скрипт в подвал?
Обычно скрипт подключается в <head> документа, если указать true, то скрипт будет подключен перед тегом </body>, точнее там где вызывается тег шаблона wp_footer().
Если из-за зависимости от других скриптов нет возможности подключить текущий скрипт в подвале, то значение этой переменой будет проигнорировано.
Для понятного чтения кода, вместо true можно указать любую строку, например 'in_footer'.
По умолчанию: false

Рабочий пример

Примерно в таком формате я подключаю скрипты на своих сайтах.

 /* Load Scripts */ function crea_load_scripts() {  // подключаем скрипт modernizr.js в <head>  wp_enqueue_script('modernizr-js', get_template_directory_uri() . '/libs/modernizr/modernizr.js', array(), NULL, true);  // вместо библиотеки jQuery из состава WordPress подключаем её CDN-копию (только при острой необходимости)  wp_deregister_script( 'jquery' );  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), NULL, false);  wp_enqueue_script( 'jquery' );  // подключаем bootstrap.min.js с внешнего CDN-хранилища  wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array(), NULL, true);  // подключаем скрипт common.js из нашего локального шаблона и указываем его зависимость от jQuery  wp_enqueue_script('common-js', get_template_directory_uri() . '/js/common.js', array('jquery'), NULL, true); }  add_action('wp_enqueue_scripts', 'crea_load_scripts', 10);

Число “10” в этой строке add_action('wp_enqueue_scripts', 'crea_load_scripts', 10); позволяет подключать наши скрипты в самую последнюю очередь после всех скриптов других плагинов.

Пример, как подключить скрипт для определенной страницы

 add_action( 'template_redirect', 'my_custom_readmore_script' );  function my_custom_readmore_script() {  if ( is_page_template('template-best-reviews.php') ) {  wp_enqueue_script( 'readmore-script', get_template_directory_uri().'/js/readMore.js', array( 'jquery' ), false, true );  } }

Более подробно – здесь https://wp-kama.ru/function/wp_enqueue_script.

denis-creative.com

Подключаем скрипты и стили

Также в файл functions.php после подключения библиотеки jQuery подключаем все скрипты и стили.

  function my_scripts(){   wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', false, null );   wp_enqueue_script( 'script-one', get_template_directory_uri() . '/js/script.one.js', array(), null, true );   wp_enqueue_script( 'script-two', get_template_directory_uri() . '/js/script.two.js', array(), null, true );  }  add_action('wp_enqueue_scripts', 'my_scripts');

Теперь разберем код.

  • my_scripts() – пользовательская функция, которую мы регистрируем с помощью add_action() и цепляем на хук-действие wp_enqueue_scripts
  • wp_enqueue_style() – правильно добавляет файл стилей, перед этим регистрируя его, если он не был зарегистрирован ранее
  • get_template_directory_uri() – получает URL текущей темы, к которому добавляется оставшейся путь к файлу . ‘/style.css’
  • wp_enqueue_script() – правильно подключает js файлы

Давайте подробнее разберем параметры функции подключения скриптов – wp_enqueue_script()

  • script-one – название скрипта (присваивается произвольно и пишется в нижнем регистре)
  • get_template_directory_uri() . ‘/js/script.one.js’ – URL js файла
  • array() – массив, в который вписываются названия скриптов, если данный скрипт зависит от каких-то скриптов, подключаемых ранее
  • null – в этом параметре указывается версия скрипта, если оставить пустым, то выведется текущая версия WordPress, а при использовании null никакая версия не будет указана.
  • true – в последнем параметре указывается месторасположение скрипта, если оставить пустым или указать false, то скрипт будет подключен в <head> после тега wp_head(), а если указать true, то скрипт подключится в футере после тега wp_footer().

Более подробное описание всех функций и хуков смотрите на официальном сайте codex.wordpress.org, а я заканчиваю данную статью. Надеюсь все понятно, если нет, задавайте вопросы не стесняйтесь.

zyubin.ru

Подключение JavaScript к WordPress

Данный код подключает JavaScript в header шаблона WordPress.

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
  • my_scripts_method — название вашей функции, можно любое, какое придет на ум, без пробелов, в нижнем регистре;
  • wp_enqueue_script — функция для подключения js файлов WordPress;
  • custom — название скрипта, любое, главное не повторять при подключении нескольких скриптов;
  • get_template_directory_uri() — указывает на то, что скрипт находится в папке с шаблоном сайта, путь к файлу;
  • /js/custom.js — в данном случае подключаемый скрипт должен находиться в папке js, custom.js — название js файла;

Для увеличения скорости загрузки сайта логичнее подключать скрипты в footer сайта, если скрипт не участвует в отрисовке страницы.

Данный код подключает JavaScript в footer шаблона WordPress.

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', true );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Все то же самое, только добавлено true — команда для подключения JavaScript в footer.

Подключение зависящих от библиотеки JQuery скриптов к WordPress

Подключение аналогично подключению JavaScript, в функции указывается лишь массив JQuery, для правильной работы скрипта.

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery') );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

array(‘jquery’) — указывает зависимость от библиотеки JQuery.

Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.

Можно указать версию подключаемого скрипта к WordPress

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0');  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.

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

Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.

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

В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.

function my_scripts_method() {  	wp_enqueue_script( 'bootstrap', '//ajax.googleapis.com/ajax/libs/jquery/3.3.7/bootstrap.min.js');  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Подключение аналогично вышеперечисленным примерам, только указан адрес стороннего скрипта. Протокол httpss: не указывается.

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );  function my_scripts_method(){  	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/patch/to/js/my-script.js', array( 'jquery' ), true );  }

Перерегистрация, обновление библиотеки jQery

Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:

function my_scripts_method() {  	wp_deregister_script( 'jquery' );  	wp_register_script( 'jquery', get_template_directory_uri() . '/inc/js/jquery.min.js', false, null, true );  	wp_enqueue_script( 'jquery' );  }   add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Добавление кода JavaScript в WordPress с использованием хуков wp_head и wp_footer

Добавление кода JavaScript в WordPress

Во-первых, давайте посмотрим, как добавить код в заголовок вашего сайта WordPress. Вам нужно будет добавить следующий код в файл functions.php вашей темы или плагин Code Snippets.

function main_hook_javascript() {   ?>   <script>   // ваш javscript код здесь   </script>   <?php  }  add_action('wp_head', 'wpb_hook_javascript');

Добавление JavaScript хуком к определенной публикации или странице WordPress

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

function main_hook_javascript() {   if (is_single ('16')) {    ?>   <script type="text/javascript">   // ваш javscript код здесь   </script>   <?php   }  }  add_action('wp_head', 'wpb_hook_javascript');

Если вы присмотритесь к приведенному выше коду, вы увидите, что мы обернули код javascript вокруг условной логики, чтобы соответствовать определенному идентификатору записи. Вы можете использовать это, заменив 16 своим собственным идентификатором сообщения.

Теперь этот код будет работать для любого типа поста с ID=16, кроме страниц. Давайте рассмотрим другой пример, за исключением того, что он проверяет конкретный идентификатор страницы перед добавлением кода JavaScript в раздел head.

function main_hook_javascript() {   if (is_page ('10')) {    ?>   <script type="text/javascript">   // ваш javscript код здесь   </script>   <?php   }  }  add_action('wp_head', 'wpb_hook_javascript');

Вместо is_single мы теперь используем is_page для проверки идентификатора страницы.

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

function main_hook_javascript_footer() {   ?>   <script>   // ваш javscript код здесь   </script>   <?php  }  add_action('wp_footer', 'wpb_hook_javascript_footer');

Вместо того, чтобы подключать нашу функцию к wp_head, мы теперь подключили ее к wp_footer. Вы также можете использовать его с условными тегами, чтобы добавить Javascript к конкретным сообщениям или страницам.

svsites.ru


Лучшие статьи читаем:

Default ThumbnailGet home Сайдбар этоСайдбар это Password checkPassword check Default ThumbnailДата публикации

You May Also Like

Post это

Post это

No Picture

Js экранирование кавычек

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.