web-dev-qa-db-ja.com

Wordpress整合性とクロスオリジンを備えたスクリプト

WordPressでwp_register_scriptとwp_enqueue_scriptFUNCTIONを使用して、「整合性」と「クロスオリジン」の2つの属性を持つスクリプトをキューに入れようとしています。

通常、私はPHPを使用し、コードは次のようになります。

wp_register_script('jquery', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://code.jquery.com/jquery-3.1.1.slim.min.js', false, null);
wp_enqueue_script('jquery');

他のスクリプトを使用します。 wp_register_scriptは、5つのパラメーター（この場合は4つ）$ handle、$ src、$ deps、$ ver（$ media）を取ります。 2つの属性をどこに追加できるのか疑問に思っています。私はすでに試しました：

wp_register_script('jquery', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://code.jquery.com/jquery-3.1.1.slim.min.js'.'integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"', false, null);
    wp_enqueue_script('jquery');

しかし、それはうまくいきませんでした。

同じ問題を抱えている人はいますか？これはbootstrap 4の元のスクリプトであり、bootstrapであり、同じ属性（整合性とクロスオリジン）を持つテザーもあります。これはかなり新しいため、どんな種類の助けも大歓迎です。

phpwordpressbootstrap-4integrity
6
Matto

script_loader_tagフックを使用できます（主要部分は実際には私のコードではありませんが、正直なところ、どこで入手したか、おそらくここのどこかでSOまたはWPスタック交換）：

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

// The handles of the enqueued scripts we want to defer
$async_scripts = array(
    'jquery-migrate',
    'sharethis',
);

$defer_scripts = array( 
    'contact-form-7',
    'jquery-form',
    'wpdm-bootstrap',
    'frontjs',
    'jquery-choosen',
    'fancybox',
    'jquery-colorbox',  
    'search'
);

$jquery = array(
    'jquery'
);

if ( in_array( $handle, $defer_scripts ) ) {
    return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $async_scripts ) ) {
    return '<script src="' . $src . '" async="async" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $jquery ) ) {
    return '<script src="' . $src . '" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}
return $tag;
}
10
HynekS

たまたまこれを割った。私は古いInternetExplorerバージョンのいくつかのCSSファイルで条件を使用する必要があり、同じwp_script_add_data関数に配列を入れてみるのもよいと考えました。使用しました。できます！

    wp_register_script('jquery3', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), '3.3.1', true); // jQuery v3
    wp_enqueue_script('jquery3');
    wp_script_add_data( 'jquery3', array( 'integrity', 'crossorigin' ) , array( 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=', 'anonymous' ) );

参照： https://developer.wordpress.org/reference/functions/wp_script_add_data/#parameters

完全を期すために：jQuery v3を追加する場合は、Migrate v3も必要です： http://jquery.com/download/

17
cherryaustin

これは正しい構文です：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

「integrity」および「crossorgin」はURLの一部ではありません。これらはスクリプトタグの一部です。

残念ながら、Wordpressは現在、キューに入れられたスクリプトの属性を処理できません。
しかし、彼らはそれに取り組んでいます...ステータス：ニーズ-テスト:-)
=> チケット22249/Wordpressコア

4
MadMonday

すべての投稿に感謝し、彼らは本当に助けてくれました。私は自分のバージョンをロールバックして、構造を与え、読みやすく、更新しやすくしました。通常どおりエンキューを使用し、最後にfalseタグが付いたCSSファイルのスクリプトを使用して、上部に読み込まれるようにします。おそらく多少簡略化できますが。

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') => 'popper_min_js',
                ('type') => '<script type="text/javascript" src="',         
                ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
                ('close') => '></script>'
              ),

             (1) => 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;
    }
1
wpNewby

JQueryによって、

jQuery( function( $ ) {
    $( document ).ready(function() {
        var strapatt = document.getElementById('bootstrap-css');
        strapatt.setAttribute("integrity", "sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb");
        strapatt.setAttribute("crossorigin", "anonymous");
    });
});
0
Gnanasekaran Loganathan