Статьи

Входы и выходы скрипта Enqueue для тем и плагинов WordPress

Март 5, 2019

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

Последующие изменения в методах и программном обеспечении

Некоторые аспекты приложений или методов, использованных в этом руководстве, изменились с момента его первоначального опубликования. Это может сделать это немного сложным для подражания. Мы рекомендуем взглянуть на эти более поздние учебники по той же теме:

Почему мы используем функцию Enqueue?

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

Так почему бы не загрузить свой JavaScript в верхний или нижний колонтитул? Ответ довольно прост: включив ваш JavaScript таким образом, вы рискуете столкнуться с вашим JavaScript во время установки (например, несколько плагинов, пытающихся загрузить одни и те же скрипты, или разные версии этого скрипта). Кроме того, ваш JavaScript будет загружаться на каждой странице, даже если вам это не нужно. Это приведет к неоправданно большему времени загрузки ваших страниц и может помешать работе другого JavaScript, например, из плагина или из панели инструментов … и это нет в разработке WP.

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

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

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

Функция wp_enqueue_script сама по себе довольно прямолинейна, поэтому давайте рассмотрим ее структуру.

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

  • $handle
    • Это дескриптор (имя) скрипта для загрузки. Это должно быть во всех строчных буквах.
    • Это обязательно
    • По умолчанию: нет
  • $ экр
    • Это URL скрипта.
    • Если вы загружаете локально со своего сервера, вам не нужно жестко кодировать URL-адрес скриптов на вашем сервере. Лучше использовать content_url , bloginfo("template_url") или get_template_directory_uri() (рекомендуется в справочнике по функциям WordPress ) для тем и plugins_url для плагинов.
      1
      2
      3
      4
      5
      6
      7
      <?php wp_enqueue_script(‘myscript’, content_url(‘/myTheme/js/myScript.js’__FILE__));
       
      <?php wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__);
       
      <?php wp_enqueue_script(‘myscript’, get_template_directory_uri().’/js/myScript.js’__FILE__);
       
      <?php wp_enqueue_script(‘myscript’, plugins_url(‘/myPlugin/js/myScript.js’__FILE__));
    • Если вы загружаете свой скрипт с другого сервера. Например, загрузка библиотеки jQuery из Google CDN. Вы просто указываете URL файла для загрузки.
      1
      <?php wp_enqueue_script(‘myscript’, ‘https://www.url/of/file/script.js’__FILE__);
    • Это необязательно
    • По умолчанию: false
  • $deps
    • Это массив, который обрабатывает любые зависимости скрипта. Например, ваш сценарий fade.js требует запуска jQuery. Этот параметр свяжет ваш скрипт с библиотекой jQuery.
    • Вы используете «false», если вы не хотите использовать этот параметр, но хотите использовать другие параметры.
      1
      <?php wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), false, ‘3.1’ );
    • Требуемый скрипт должен быть загружен первым.
    • Вы используете требуемый дескриптор сценария для массива.
      1
      2
      3
      4
      <?php
      wp_enqueue_script(‘jquerylib’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’);
      wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(‘jquerylib’));
      ?>
    • Это необязательно
    • По умолчанию: array ()
  • $ver
    • Это версия вашего скрипта.
    • Версия объединяется до конца пути в виде строки запроса. Версия может быть номером версии, ложью или NULL.
    • Если вы используете false для версии. Будет использована версия WordPress.
    • Если вы используете NULL. Ничто не будет использоваться в качестве версии. Это не рекомендуется в справочнике по функциям WordPress .
    • Если вы не используете параметр $ ver. Версия WordPress будет использоваться по умолчанию.
      1
      <?php wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), false, ‘1.0’ );
    • Это необязательно
    • По умолчанию: false
  • $in_footer
    • Это определит, где ваш скрипт находится на странице.
    • Этот параметр является логическим («истина» или «ложь»)
    • По умолчанию ваш скрипт будет помещен в <head>, но лучше разместить его прямо перед закрытием тега <body>. Это достигается путем передачи «true» параметру.
      1
      2
      3
      4
      <?php
      wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(), ‘version’, false );
      wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(), ‘version’, true );
      ?>
    • Это необязательно
    • По умолчанию: false

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

Причина этого в том, что WordPress поставляется со встроенными скриптами. Например, jQuery является частью ядра WordPress, а команда разработчиков WordPress упростила загрузку этих встроенных скриптов. Все, что вам нужно сделать, это передать дескриптор скрипта в wp_enqueue_script .

1
<?php wp_enqueue_script(‘jquery’);

Для полного списка встроенных скриптов WordPress и их ручек. Посмотрите Справочник по функциям WordPress .

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

Теперь, когда вы понимаете части wp_enqueue_script . Давайте посмотрим, как вы на самом деле используете это с вашей темой WordPress.

Перво наперво

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

  • wp_register_script
    • Функция wp_register_script используется для регистрации вашего скрипта в WordPress. Это означает, что вы сможете использовать wp_enqueue_script для своих скриптов так же, как встроенные скрипты, поставляемые с WordPress.
    • Структура параметров для wp_register_script точно такая же, как и wp_enqueue_script структуры wp_enqueue_script , поэтому я не собираюсь wp_enqueue_script на этом снова. Вы можете ссылаться на раздел выше, если это необходимо.
    • Просто настройте wp_register_script же, как и для wp_enqueue_script . Затем поставьте скрипт в очередь с помощью wp_enqueue_script , передав ему дескриптор.
      1
      2
      3
      4
      <?php
      wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(), ‘version’, false );
      wp_enqueue_script(‘myscript’);
      ?>
  • wp_deregister_script
    • wp_deregister_script удаляет зарегистрированный скрипт.
    • Все, что вам нужно сделать, это передать ему ручку.
      1
      <?php wp_deregister_script(‘myscript’);
  • wp_deregister_script
    • wp_dequeue_script удаляет зарегистрированный скрипт.
    • Все, что вам нужно сделать, это передать ему ручку.
      1
      <?php wp_dequeue_script(‘myscript’);

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

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

1
2
<?php wp_enqueue_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), false, ‘1.0’ );
<?php wp_head();

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

1
2
3
4
5
6
7
<?php
function load_my_scripts() {
    wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), false, ‘1.0’, true );
    wp_enqueue_script(‘myscript’);
}
add_action(‘init’, ‘load_my_scripts’);
?>
  • Строка 2 создает функцию с именем load_my_scripts
  • Строка 3 регистрирует скрипт myscript
  • Строка 4 ставит в очередь сценарий myscript
  • Строка 6 инициализирует функцию load_my_scripts

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

01
02
03
04
05
06
07
08
09
10
<?php
function load_my_scripts() {
    wp_deregister_script( ‘jquery’ );
    wp_register_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’);
    wp_enqueue_script(‘jquery’);
    wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(«jquery»), ‘1.0’, true );
    wp_enqueue_script(‘myscript’);
}
add_action(‘init’, ‘load_my_scripts’);
?>
  • Строка 2 отменяет регистрацию jQuery по умолчанию, который поставляется с WordPress
  • Строка 3 регистрирует другую версию jQuery
  • Строка 4 ставит в очередь сценарий myscript

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

1
2
3
4
<?php
if (function_exists(‘functionName’)) {
}
?>

Это проверяет, существует ли ваша функция. Если это не так, она запустит вашу функцию.

Давайте добавим это в нашу функцию load_my_scripts

01
02
03
04
05
06
07
08
09
10
11
12
<?php
if (function_exists(‘load_my_scripts’)) {
    function load_my_scripts() {
        wp_deregister_script( ‘jquery’ );
        wp_register_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’);
        wp_enqueue_script(‘jquery’);
        wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(‘jquery’), ‘1.0’, true );
        wp_enqueue_script(‘myscript’);
    }
}
add_action(‘init’, ‘load_my_scripts’);
?>

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

Мы собираемся проверить, является ли загруженная страница страницей администратора с помощью! Is_admin (). Если это не так, наши скрипты будут загружены.

1
2
3
4
<?php
if (!is_admin()) {
}
?>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<?php
if (function_exists(‘load_my_scripts’)) {
    function load_my_scripts() {
        if (!is_admin()) {
        wp_deregister_script( ‘jquery’ );
        wp_register_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’);
        wp_enqueue_script(‘jquery’);
        wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(‘jquery’), ‘1.0’, true );
        wp_enqueue_script(‘myscript’);
        }
    }
}
add_action(‘init’, ‘load_my_scripts’);
?>

Вот и ты. Хороший шаблон для использования в сценариях

Использование Enqueue Script для ваших плагинов

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

Это на самом деле очень просто. Просто напишите свою функцию скрипта, как мы делали в предыдущем разделе в файле вашего плагина. Только теперь вместо использования init в add_action используйте admin_init.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<?php
if (function_exists(‘load_my_scripts’)) {
    function load_my_scripts() {
        if (!is_admin()) {
        wp_deregister_script( ‘jquery’ );
        wp_register_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js’);
        wp_enqueue_script(‘jquery’);
        wp_register_script(‘myscript’, bloginfo(‘template_url’).’/js/myScript.js’__FILE__), array(‘jquery’), ‘1.0’, true );
        wp_enqueue_script(‘myscript’);
        }
    }
}
add_action(‘admin_init’, ‘load_my_scripts’);
?>

Вот и все, теперь ваш скрипт будет загружаться только при переходе на страницу администрирования вашего плагина.

Вывод

Я надеюсь, что это поможет вам лучше понять скрипты Enqueue в WordPress, так что теперь вы можете выйти и загрузить несколько собственных скриптов!

Если есть что-то, чего вы не понимаете или хотели бы прочитать. Я рекомендую посетить Кодекс WordPress . Вот список некоторых других релевантных ссылок на кодекс для вас:

58
Share: