Добавление дополнительных атрибутов в тег Script для сторонних JS

Начиная с версии WP 4.1.0, доступен новый фильтр-хук для удобного решения этой задачи:

script_loader_tag

Используйте его следующим образом:

add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

function add_id_to_script( $tag, $handle, $source ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . $source . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    }

    return $tag;
}

ОК, похоже (на мой взгляд), что с wp_enqueque_scripts невозможно вывести id и ключ приложения в виде атрибутов тега script.

Я уверен на 90%, потому что класс WP_Dependencies мне не очень хорошо знаком, но, просматривая код, мне кажется, что это невозможно.

Но я уверен на 100%, что использование wp_localize_script не полезно для вашей задачи.

Как я уже сказал в своём комментарии выше:

Что делает wp_localize_script — выводит json-кодированный объект в html-код страницы. Этот объект распознаётся скриптом, и вы можете его использовать.

Что я не сказал в комментарии — json-кодированный объект имеет произвольное имя, которое вы задаёте. Например, если посмотреть на синтаксис:

wp_localize_script( $handle, $object_name, $l10n );

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

Но $object_name — это имя, которое вы задаёте, поэтому оно может быть любым.

Так что задайте себе вопрос:

как скрипт на удалённом сервере Dropbox может использовать переменную, название которой ему неизвестно?

Таким образом, нет никакого смысла передавать id и/или ключ приложения через wp_localize_script: вам нужно просто вывести их как атрибуты тега script, как указано в документации Dropbox API.

Я не js-разработчик, но думаю, что скрипт Dropbox делает следующее:

1. получает все элементы <script> на странице
2. перебирает их в поисках того, у которого 'id' == 'dropboxjs'
3. если такой скрипт найден, проверяет его атрибут 'data-app-key'
4. проверяет, является ли этот app key (если он есть) действительным, и авторизует вас, если это так

Обратите внимание, что я не уверен в этом на 100%, я просто предполагаю.

Таким образом, скрипт, загружаемый с сервера Dropbox, может проверить ваш app key удобным для них и простым для реализации способом.

Поскольку в начале я сказал, что нельзя вывести id и app key в скрипте с помощью wp_enqueque_scripts, мораль в том, что вам нужно вывести их в разметке другим способом.

Один из способов, который не выглядит слишком уж плохо (если нет альтернатив) — использовать хук wp_print_scripts для вывода тега script:

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // только для админки

  $app_key = 'MY_APP_KEY';

  // почему бы не создать опцию для этого?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

}

Из ответа Bainternet выше. Этот код сработал для меня.

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        remove_filter('clean_url','pmdi_dropbox',10,3);
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";
    }
}

Примечание: Единственное отличие от кода Bainternet - я добавил условие для проверки, является ли URL скрипта Dropbox и является ли он файлом .js.

Я игнорирую все остальные URL и переписываю только URL Dropbox.

Спасибо за все публикации, они действительно помогли. Я создал свою версию, чтобы придать ей структуру и сделать более удобочитаемой и обновляемой. Используйте enqueue как обычно, для CSS-файлов применяйте script с параметром false в конце, чтобы они загружались в верхней части страницы. Хотя, вероятно, это можно несколько упростить.

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {

    $scripts_to_load = array (

        (0) => Array
          (
            ('name') => 'bootstrap_min_css',
            ('type') => '<link rel="stylesheet" href="',            
            ('integrity') => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
            ('close') => ' type="text/css" media="all">'
          ),

        (1) => Array
          (
            ('name') => 'popper_min_js',
            ('type') => '<script type="text/javascript" src="',         
            ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
            ('close') => '></script>'
          ),

         (2) => Array
           (
            ('name') => 'bootstrap_min_js', 
            ('type') => '<script type="text/javascript" src="',
            ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
            ('close') => '></script>'
           )
    );  

    $key = array_search($handle, array_column($scripts_to_load, 'name'));

    if ( FALSE !== $key){

        $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

    }
    return $tag;
}

Я реализовал это в своем плагине eCards, и это действительно просто.

Вот прямая копия/вставка из плагина:

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

Обратите внимание, что API-ключ передается через опцию.

Я проверил код dropbox.js (версия 2), чтобы понять, что происходит и как лучше решить эту проблему. Оказалось, что data-app-key используется только для установки переменной Dropbox.appKey. Я смог установить эту переменную с помощью следующей дополнительной строки.

Используя пример JavaScript со страницы Dropbox https://www.dropbox.com/developers/dropins/chooser/js:

<script>
Dropbox.appKey = "ВАШ-APP-ID";
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
</script>

В моем коде я устанавливаю Dropbox.appKey в каждом месте, где ссылаюсь на JavaScript-функции Dropbox. Это позволило мне использовать wp_enqueue_script() без дополнительных параметров.

Есть более простой способ сделать это

 function load_attributes( $url ){
    if ( 'https://www.dropbox.com/static/api/1/dropins.js' === $url ){
        return "$url' id='dropboxjs' data-app-key='MY_APP_KEY";
    }

    return $url;
}

add_filter( 'clean_url', 'load_attributes', 11, 1 );

Синтаксис Wordpress для script_loader_tag:

apply_filters( 'script_loader_tag', string $tag, string $handle, string $src )

Чтобы добавить любой атрибут, вы можете изменить ваш $tag следующим образом:

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    } 
    return $tag;
}

Этот метод правильно экранирует URL.