[wp]wp_enqueue_script()に属性を追加する方法

怠すぎるこれ

どういうアレか
WordPressの基本的なアレ
属性の追加
1. 参考
番外：CSSもできる

どういうアレか

CDNを使うとき、取得した内容はこんな感じになる。

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-parallax-js/5.6.2/simpleParallax.min.js" integrity="sha512-rLJmRoYJNB5AXXLAElKPeaSrcXDUTA41fiwTZ+S2JJXhMoWu4yQZvXlZZSIjRNVHYTkIYYw+r45wXCao49D5XA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

src属性さえ入力すれば使用できるので、動作だけだったら他は不要といえる。

じゃあなんでintegrityとかcrossoriginとかが付いてるのか。

jQueryにはこうある。

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source. Read more at srihash.org
https://releases.jquery.com/

翻訳するとこう。

integrityおよび属性は、サブリソース整合性 (SRI) チェックcrossoriginに使用されます。これにより、ブラウザーは、サードパーティのサーバーでホストされているリソースが改ざんされていないことを確認できます。ライブラリがサードパーティのソースからロードされる場合は常に、ベストプラクティスとして SRI の使用が推奨されます。srihash.orgで詳細を読む

ものすごく雑に言えば、怪しくないって証明だから書いといたほうが良いっすわってこと。

じゃあ入れていこうね。

WordPressの基本的なアレ

<head>にベタ打ちしてもいいけどwpにはwp_enqueue_script()がある。重複しないように、正しい順番で記述（出力）してくれるものだから結構便利。

ベーシックなところでこんな感じになる。

<?php
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
    if(is_admin()) return;
    wp_enqueue_style('commonstyle', get_template_directory_uri() .'/style.css', array()); 
    wp_enqueue_script('commonscripts', get_template_directory_uri() .'/js/scripts.js', array());
    if (is_home() || is_front_page()):
        wp_enqueue_style('index', get_template_directory_uri() .'/css/index.css', array()); 
    endif;
}

状況に応じて振り分けられるので便利ですね。

で、これで記載したらこんな感じに出る。

<link rel='stylesheet' id='commonstyle-css' href='https://****.com/wp-content/themes/****/style.css?ver=6.2.2' type='text/css' media='all' />
<script type='text/javascript' src='https://****.com/wp-content/themes/****/js/scripts.js?ver=6.2.2' id='commonscripts-js'></script>

ここから前項のような属性を追加したいのだけど、wp_enqueue_script()にそういう機能はないらしい。

なので、別途手を加えていく。

属性の追加

上記の2つ、jQueryとsimpleParallaxでやっていくとする。

<?php
//scriptを出力
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
    if(is_admin()) return;
    wp_enqueue_script('jQuery', 'https://code.jquery.com/jquery-3.7.0.js', array());
    wp_enqueue_script('simpleParallax', 'https://cdnjs.cloudflare.com/ajax/libs/simple-parallax-js/5.6.2/simpleParallax.min.js', array());
}

//該当ハンドルのscriptに属性追加
add_filter('script_loader_tag', 'custom_script_loader_tag', 10, 2);
function custom_script_loader_tag($tag, $handle) {
    if($handle == 'jQuery') {
        return str_replace('></script>', ' integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>', $tag);
    }else if($handle == 'simpleParallax') {
        return str_replace('></script>', ' integrity="sha512-rLJmRoYJNB5AXXLAElKPeaSrcXDUTA41fiwTZ+S2JJXhMoWu4yQZvXlZZSIjRNVHYTkIYYw+r45wXCao49D5XA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>', $tag);
    }else{
        return $tag;
    }
}

置換を使った力技ですね。こうするしかないですね。

当然ながら条件分岐を噛まさなければ出力される全ての<script>が置換されるのでダメです。

参考

WordPress FontAwesome 5.11をwp_enqueue_scriptで正しく追加する方法 | e-joint.jp

WordPressでFontAwesome 5.11以降のスクリプトを wp_enqueue_script で付加したい時に crossorigin="anonymous" もちゃんと埋め込む方法。近年のFontAwe

参考元とは条件の書き方が変わるので注意。

CDNを採用すれば沢山出てくるもんで、else ifで書き連ねる必要があった。

そんな感じで。

番外：CSSもできる

style_loader_tagでやっていく。

slick.jsを導入するとする。

//jsとcssを出力
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
    if(is_admin()) return;
    wp_enqueue_script('jQuery', 'https://code.jquery.com/jquery-3.7.0.js', array());
    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array());
    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css', array()); 
    wp_enqueue_style('slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', array()); 
}
//scriptに属性追加
add_filter('script_loader_tag', 'custom_script_loader_tag', 10, 2);
function custom_script_loader_tag($tag, $handle) {
    if($handle == 'jQuery') {
        return str_replace('></script>', ' integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>', $tag);
    }else if($handle == 'slick') {
        return str_replace('></script>', ' integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>', $tag);
    }else{
        return $tag;
    }
}
//linkに属性追加
add_filter('style_loader_tag', 'custom_style_loader_tag', 10, 2);
function custom_style_loader_tag($tag, $handle) {
    if($handle == 'slick') {
        return str_replace(' />', ' integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />', $tag);
    }else if($handle == 'slick-theme') {
        return str_replace(' />', ' integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />', $tag);
    }else{
        return $tag;
    }
}

以上。

CDNのcssはintegrityがあったりなかったりなんですが、どうなんでしょうね。jsに比べたらセキュリティに難はないと思うんだけど、あったほうが良いんですかね。