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

Комментарии — 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

  Ваш департамент<span style="color: #c43b1d;">*</span><br /><select id="change" onChange = "onChange()"><option></option>
  <option value="1">Департамент бухгалтерского и налогового учета</option>
  <option value="2">Департамент взаимодействия с телерадиоканалами</option>
  <option value="3">Департамент государственных закупок и логистики</option>
  <option value="4">Департамент информационных технологий</option>
  <option value="5">Департамент казначейства</option></select>
  Ваш отдел<span style="color: #c43b1d;">*</span><br /><select id = "change1" style="display: none;"><option></option>
  <option value="1">Отдел бухгалтерского учета</option>
  <option value="2">Отдел налогового учета</option>
  </select>
   
  <select id = "change2" style="display: none;"><option></option>
  <option value="1">Отдел работы с радиоканалами</option>
  </select>
   
  <select id = "change3" style="display: none;"><option></option>
  <option value="1">Отдел государственных закупок</option>
  <option value="2">Отдел планирования государственных закупок и логистики</option>
  <option value="2">Отдел электронных закупок</option>
  </select>
   
  <select id = "change4" style="display: none;"><option></option>
  <option value="1">Отдел администрирования корпоративных систем и управления безопасностью информационных технологий</option>
  <option value="2">Отдел администрирования серверов и операционных систем</option>
  <option value="1">Отдел развития и эксплуатации транспортных сетей и коммуникаций</option>
  <option value="2">Отдел технической поддержки и регионального управления</option>
  </select>
   
  <select id = "change5" style="display: block;"><option></option>
  <option value="1">Отдел бухгалтерского учета</option>
  <option value="2">Отдел налогового учета</option>
  <option value="3">Отдел работы с телерадиоканалами</option>
  <option value="4">Отдел государственных закупок</option>
  <option value="5">Отдел планирования государственных закупок и логистики</option>
  <option value="6">Отдел электронных закупок</option>
  <option value="7">Отдел администрирования корпоративных систем и управления безопасностью информационных технологий</option>
  <option value="8">Отдел администрирования серверов и операционных систем</option>
  <option value="9">Отдел развития и эксплуатации транспортных сетей и коммуникаций</option>
  <option value="0">Отдел технической поддержки и регионального управления</option></select>
   
  <SCRIPT LANGUAGE = "JavaScript" TYPE = "text/javascript">
  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';
  }
   
  }
  </script>

  и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить 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 файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?
      • Миша 16 Май 2015 

        А есть тег?

        <meta charset="utf-8" />
        • артем 16 Май 2015 

          да, в header.php присутствует.
• Aleksander 12 Июн 2015 

  Добрый день!
  Помогите пожалуйста, хочу добавить себе всплывающее меню, как в примере http://codepen.io/laviperchik/pen/uyqmh, но не получается добавить javascript, не хочет открываться, я вызываю джаву в function.php:

  function slide_bar_scripts() {
  	wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
   	wp_enqueue_script( 'slide_bar', get_stylesheet_directory_uri() . '/slidebar.js');
  }
   
  add_action( 'wp_enqueue_scripts', 'slide_bar_scripts' );

  кидаю в папку с темой:

  /*! bigSlide - v0.4.3 - 2014-01-25
  * http://ascott1.github.io/bigSlide.js/
  * Copyright (c) 2014 Adam D. Scott; Licensed MIT */
  !function(a){"use strict";a.fn.bigSlide=function(b){var c=a.extend({menu:"#menu",push:".push",side:"left",menuWidth:"15.625em",speed:"300"},b),d=this,e=a(c.menu),f=a(c.push),g=c.menuWidth,h={position:"fixed",top:"0",bottom:"0","settings.side":"-"+c.menuWidth,width:c.menuWidth,height:"100%"},i={"-webkit-transition":c.side+" "+c.speed+"ms ease","-moz-transition":c.side+" "+c.speed+"ms ease","-ms-transition":c.side+" "+c.speed+"ms ease","-o-transition":c.side+" "+c.speed+"ms ease",transition:c.side+" "+c.speed+"ms ease"};return e.css(h),f.css(c.side,"0"),e.css(i),f.css(i),e._state="closed",e.open=function(){e._state="open",e.css(c.side,"0"),f.css(c.side,g)},e.close=function(){e._state="closed",e.css(c.side,"-"+g),f.css(c.side,"0")},d.on("click.bigSlide",function(a){a.preventDefault(),"closed"===e._state?e.open():e.close()}),d.on("touchend",function(a){d.trigger("click.bigSlide"),a.preventDefault()}),e}}(jQuery);    
  $(document).ready(function() {
          $('.menu-link').bigSlide();
      });

  но ничего не происходит, что я не так делаю?
  Большое человеческое спасибо!
  • Миша 13 Июн 2015 

    Добрый день!
    Дочерние темы используете?
    Зависимости от jQuery проставьте тоже.
• Юрий 19 Мар 2020 

  День добрый! Спасибо за статью. Зарегистрировал файл, подключил. А как теперь вывести этот файл, в код php, исполнить
  • Миша 19 Мар 2020 

    Добрый день!

    Сам выведется, если wp_head(), wp_footer() используете.
• Михаил 19 Апр 2021 

  Михаил, здравствуйте. Подскажите пожалуйста, есть ли смысл не подключать определенные скрипты на страницах, где они не используются, для оптимизации загрузки сайта?
  Пример:
  Swiper js использую только на странице Портфолио. На главной странице он по идее не нужен.

  Нашел такой способ:

  function portfolio_styles() {
  if ( is_page('ID') )
  	wp_enqueue_script('swiper-js', get_template_directory_uri() . '/assets/js/swiper-bundle.min.js', [], false, true);
  }
  add_action( 'wp_enqueue_styles', 'portfolio_styles' );

  Такой способ нормальный, или есть еще решения?
  Спасибо)
  • Миша 19 Апр 2021 

    Добрый день!

    is_page( ID ) это точно не есть гуд проверка.

    Лучше всего собрать и минифицировать скрипты, например через webpack.

    Тем не менее у меня например действительно есть скрипт slick, который я подключаю только на странице портфолио, но тут главное использовать условные теги без привязки к пользовательским данным, например is_page_template(), is_singular( 'тип поста' ), то есть мы не используем ID страниц, т к этот ID может меняться в админке.
    • Михаил 21 Апр 2021 

      Понял. Спасибо)
• Мария 8 Дек 2022 

  Михаил здравствуйте, во-первых спасибо за тонну полезной информации, словами не передать как выручают куски кода которые вы даете в примерах!!!
  Есть вот такой вопрос, на сайте (на главной странице, самый первый экран) - слайдер во весь экран. Во время верстки swiper подключается вебпаком в общий файл js. затем этот файл подключается в вордпресс кодом

  add_action('wp_enqueue_scripts', function(){
          wp_enqueue_script('jquery');
          wp_enqueue_script('main', wpHMeal_DIR_JS . 'app.js',[], false, true);
      });

  переменная обозначена кодом define('wpHMeal_DIR_JS', get_template_directory_uri() . '/assets/js/');
  во время загрузки вордпресса слайдер на главном экране как бы ломается, секунды на две или даже меньше, затем загружается и все прекрасно и правильно работает, но вот этот момент каждый раз с ломанным первым экраном прям коробит... можно конечно прелоадером спрятать.... но как правильно подключать чтобы сразу нормально отображалось?

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