WordPress, JavaScriptとCSSをインラインで出力する

WordPressでは、テンプレートにJavaScriptとCSSを直書きしてはいけません。必ずキュー登録から行います。インラインでも同じ。

『header.php, footer.php で共通化すればいい』と思うでしょうが、なぜ、WordPressはキュー登録という一見遠回しな機能を追加したのか考えましょう。

index.phpやsingle.phpなどで直接<script>や<style>を書いているのをよく見かけます。

でもこれはいけません。

スクリプトとスタイルはキュー登録を使うのがルールです。それはインラインでも同じ。

CSSのインライン

サンプルはインラインスタイルだけを出力する方法です。

<?php

add_action( 'wp_enqueue_scripts', function() {
    $handle = 'wp-block-library';
    $src = get_theme_file_path( 'css/style-inline.min.css' );
    $styles = file_get_contents( $src );
    if ( $styles ) {
        wp_add_inline_style( $handle, $styles );
    }
}, 11 );

<link rel='stylesheet' id='wp-block-library-css'  href='https://tadtadya.test/wp-includes/css/dist/block-library/style.min.css?ver=5.4' media='all' />
<style id='wp-block-library-inline-css'>
.is-style-h2df,.post-content .is-style-h2df{padding:.5em;border-top:1px solid #000;border-bottom:1px solid #000} // 以下省略
</style>

キューに追加したcssファイルが必要

wp_add_inline_style()は、キューに追加されたcssファイルのハンドルが必要です。サンプルでは、WP5から標準で追加された 'wp-block-library' を使いました。

もちろん、オリジナルで作ったcssファイルの後ろに追加することもできます。

『11』には意味がある

add_action()のパラメータ、11には意味があります。

編集画面にはブロックのスタイル選択機能がありますが、これにはインライン出力もありwp-block-library-inline-cssに出力されます。

それのあとに追記させるように11を指定します。（デフォルトは10）

ちょっと試してみた

CSSファイルに関係なく独立してインライン出力できないか？ 実験しました。

add_action( 'wp_enqueue_scripts', function() {
    $handle = 'my-style-inline';
    $src = get_theme_file_uri( 'css/style-inline.min.css' );
    wp_register_style( $handle, $src, [ 'wp-block-library' ] );
    //wp_enqueue_style( $handle );

    $styles = file_get_contents( $src );
    if ( $styles ) {
        wp_add_inline_style( $handle, $styles );
    }
}, 11 );

wp_enqueue_style()をコメント化しても、wp_register_style()で登録しているのでイケるんじゃないかと。

結果はダメでした。やっぱりキューの追加が必要です。

JavaScriptのインライン

<?php

add_action( 'wp_enqueue_scripts', function() {
    $handle = 'jquery';
    $src = get_theme_file_path( 'js/inline.js' );
    $scripts = file_get_contents( $src );
    if ( $scripts ) {
        wp_add_inline_script( $handle, $scripts );
    }
}, 11 );

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js?ver=3.4.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.0/jquery-migrate.min.js?ver=3.0.0'></script>
<script>
// !function(e){... ここにインラインスクリプトが入る
</script>

やり方はインラインスタイルと同じです。使う関数がちがうだけで。

サンプルではjQueryをCDN配信していますが、WordPress搭載のjQueryでも同じです。

また、元になるjsファイルのハンドルはjqueryを使いましょう。jqueryはjQuery本体とmigrateのエイリアスなので、必ずjQueryとmigrateの後ろに追加されます。

こうすれば、インラインでjQueryが使えます。

特定のページに設定するには

特定のページだけに追加するにはis_***()を使います。

<?php

add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_single() ) {
        return; // 投稿ページ以外はインラインを入れない
    }

    $handle = 'wp-block-library';
    $src = get_theme_file_path( 'css/style-inline.min.css' );
    $styles = file_get_contents( $src );
    if ( $styles ) {
        wp_add_inline_style( $handle, $styles );
    }

    $handle = 'jquery';
    $src = get_theme_file_path( 'js/inline.js' );
    $scripts = file_get_contents( $src );
    if ( $scripts ) {
        wp_add_inline_script( $handle, $scripts );
    }
}, 11 );

is_single()やis_page()は、パラメータにスラッグ（slug）を指定するとさらにピンポイントのページを指定することもできます。

これらの関数を駆使することで出力する/しないページをコントロールできます。

直書きはやめよう

header.phpやfooter.phpなど、テンプレートに直書きするのはやめましょう。

こういう機能を提供するということは『プログラムで挿入』を促すメッセージです。

いまはWebpackなどの開発ツールがあり、JavaScriptやCSSは細かいファイル管理ができます。いまどきHTMLにJavaScriptを書くなんてありません。

（過去のコーディングを受け継いでいるのは別として。）

Google AnalyticsやGoogle Adsence、アフィリエイトの挿入コードくらいは許されるでしょうが、個人的には外部アプリの挿入コードも管理画面の設定ページを作ってかんたんに使えるようにしたほうが良いと思います。

（wp_add_inline_style(), wp_add_inline_script()を使えばかんたんにできる。）

（プラグインを使っても良い。）