naugtur
  • 0
Новичок

Какой предпочтительный способ добавления пользовательских файлов JavaScript на сайт?

  • 0

Я уже добавил свои сценарии, но хотел узнать предпочтительный способ.

Я просто поставил <script> тег прямо в header.php моем шаблоне.

Есть ли предпочтительный метод вставки внешних или пользовательских файлов js?

Как мне привязать файл js к одной странице? (я имею в виду домашнюю страницу)

Share
  1. Используйте wp_enqueue_script() в своей теме

    Основной ответ — использовать wp_enqueue_script() в wp_enqueue_scripts хуке для внешнего интерфейса admin_enqueue_scripts для администратора. Это может выглядеть примерно так (предполагается, что вы звоните из functions.php файла вашей темы; обратите внимание, как я ссылаюсь на каталог таблицы стилей):

    <?php
    add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
    
    function mysite_enqueue() {
      $ss_url = get_stylesheet_directory_uri();
      wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
    }
    

    Это основы.

    Предопределенные и несколько зависимых сценариев

    Но допустим, вы хотите включить как jQuery, так и jQuery UI Sortable из списка скриптов по умолчанию, включенных в WordPress, и вы хотите, чтобы ваш скрипт зависел от них? Легко, просто включите первые два скрипта, используя предопределенные дескрипторы, определенные в WordPress, и для вашего скрипта укажите третий параметр, wp_enqueue_script() который представляет собой массив дескрипторов скрипта, используемых каждым скриптом, например так:

    <?php
    add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
    
    function mysite_enqueue() {
      $ss_url = get_stylesheet_directory_uri();
      wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
    }
    

    Скрипты в плагине

    Что, если вы хотите сделать это в плагине? Используйте plugins_url() функцию, чтобы указать URL-адрес вашего файла Javascript:

    <?php
    define( 'MY_PLUGIN_VERSION', '2.0.1' );
    add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );
    
    function my_plugin_enqueue() {
      wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
    }
    

    Управление версиями ваших скриптов

    Также обратите внимание, что выше мы дали нашему плагину номер версии и передали его в качестве 4-го параметра в wp_enqueue_script() . Номер версии выводится в источнике в качестве аргумента запроса в URL-адресе скрипта и служит для принудительного повторного скачивания браузером, возможно, кэшированного файла, если версия изменилась.

    Загружайте скрипты только на страницы, где это необходимо

    Первое правило веб-производительности гласит: сведите к минимуму HTTP-запросы, поэтому, когда это возможно, вы должны ограничивать загрузку скриптов только там, где это необходимо. Например, если вам нужен только ваш скрипт в админке, ограничьте его страницами администрирования, используя admin_enqueue_scripts вместо этого хук:

    <?php
    define( 'MY_PLUGIN_VERSION', '2.0.1' );
    add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
    
    function my_plugin_admin_enqueue() {
      wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
    }
    

    Загрузите свои скрипты в нижний колонтитул

    Если ваши скрипты являются одним из тех, которые должны быть загружены в нижний колонтитул, есть 5-й параметр wp_enqueue_script(), который сообщает WordPress отложить его и поместить в нижний колонтитул (при условии, что ваша тема не ведет себя неправильно и что она действительно вызывает хук wp_footer, как и все хорошие темы WordPress должны ):

    <?php
    define( 'MY_PLUGIN_VERSION', '2.0.1' );
    add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
    
    function my_plugin_admin_enqueue() {
      wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
    }
    

    Более детальное управление

    Если вам нужен более тонкий контроль, чем этот, у Ozh есть отличная статья под названием « Как: загрузить Javascript с помощью вашего плагина WordPress», в которой подробно описано.

    Отключение сценариев для получения контроля

    У Джастина Тэдлока есть хорошая статья под названием « Как отключить скрипты и стили, если вы хотите:

    1. Объедините несколько файлов в один файл (здесь пробег может варьироваться в зависимости от JavaScript).
    2. Загружайте файлы только на те страницы, на которых мы используем скрипт или стиль.
    3. Больше не нужно использовать !important в нашем файле style.css для выполнения простых настроек CSS.

    Передача значений из PHP в JS с помощьюwp_localize_script()

    В своем блоге у Владимира Преловаца есть отличная статья под названием «Рекомендации по добавлению кода JavaScript в плагины WordPress », в которой он обсуждает использование wp_localize_script(), позволяющее вам устанавливать значение переменных в PHP на стороне сервера для последующего использования в Javascript на стороне клиента.

    Действительно точное управление сwp_print_scripts()

    И, наконец, если вам нужен действительно детальный контроль, вы можете ознакомиться с тем wp_print_scripts(), что обсуждалось на Beer Planet в посте под названием « Как включить CSS и JavaScript условно и только тогда, когда это необходимо в сообщениях ».

    Эпилок

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

    • 0
  2. Чтобы дополнить замечательную иллюстрацию Майка об использовании очередей, я просто хочу указать, что скрипты, включенные в качестве зависимостей, не нужно ставить в очередь…

    Я буду использовать пример под заголовком « Сценарии в плагине » в ответе Майка.

    define('MY_PLUGIN_VERSION','2.0.1');
    
    add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
    function my_plugin_enqueue_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-sortable');
        wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
    }
    

    Это можно обрезать, чтобы читать..

    define('MY_PLUGIN_VERSION','2.0.1');
    
    add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
    function my_plugin_enqueue_scripts() {
        wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
    }
    

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

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

    wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );
    

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

    • 0
  3. Для небольших фрагментов скриптов, которые вы, возможно, не захотите включать в отдельный файл, например, потому что они генерируются динамически, WordPress 4.5 и более поздние версии предлагают файлы wp_add_inline_script . Эта функция в основном привязывает сценарий к другому сценарию.

    Предположим, например, что вы разрабатываете тему и хотите, чтобы ваш клиент мог вставлять свои собственные сценарии (например, Google Analytics или AddThis) через страницу параметров. Затем вы можете использовать wp_add_inline_script этот скрипт для привязки этого скрипта к вашему основному js-файлу (скажем mainjs ) следующим образом:

    $custom_script = get_option('my-script')
    if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
    
    • 0
  4. Я предпочитаю добиваться хорошей производительности, поэтому вместо wp_enqueue_script использования HEREDOC с Fetch API я использую HEREDOC для асинхронной параллельной загрузки:

    $jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
    $jquery_dependent_script_paths = [
      get_theme_file_uri( '/assets/js/global.js' ),
      get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
      get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
      get_theme_file_uri( '/assets/js/navigation.js' )
    ];
    $jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
    $inline_scripts = <<<EOD
    <script>
    (function () {
      'use strict';
      if (!window.fetch) return;
      /**
       * Fetch Inject v1.6.8
       * Copyright (c) 2017 Josh Habdas
       * @licence ISC
       */
      var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
      fetchInject(
        $jquery_dependent_script_paths_json
      , fetchInject([
        "{$jquery_script_path}"
      ]));
    })();
    </script>
    EOD;
    

    А потом вставить их в голову, иногда вместе со стилями вот так:

    function wc_inline_head() {
      global $inline_scripts;
      echo "{$inline_scripts}";
      global $inline_styles;
      echo "{$inline_styles}";
    }
    

    В результате получается водопад, который выглядит так, загружая все сразу, но контролируя порядок выполнения:

    введите описание изображения здесь

    Примечание. Для этого требуется использование Fetch API, который доступен не во всех браузерах.

    • 0

Оставить ответ

You must login to add an answer.