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

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

でもこれはいけません。

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

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

CSSのインライン

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

WPバージョン3.3以上

<?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 );
result
<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>

WordPress.orgリファレンス

Function - wp_add_inline_style

PHP公式ドキュメント

file_get_contents

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

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

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

インラインスタイルで既存スタイルを上書きするときは、既存スタイルの後ろに書く必要があります。

上書きされるcssファイルのキューを使ってインラインを追加しましょう。

サンプルではWordPressの標準スタイルを上書きできます。

『11』には意味がある

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

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

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

WordPress Codex 日本語版

Function - add_action

WordPress.orgリファレンス

Function - add_action

ちょっと試してみた

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()で登録しているのでイケるんじゃないかと。

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

<style></style>は追加されるので出力データには不要です。

インライン用のcssファイルを用意して、その内容をそのままブッ込みましょう。

JavaScriptのインライン

WPバージョン4.5.0以上

<?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 );
result
<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が使えます。

WordPressがjQueryを挿入するしくみ

WordPress.orgリファレンス

Function - wp_add_inline_script

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

特定のページだけに追加するには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）を指定するとさらにピンポイントのページを指定することもできます。

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

WordPress Codex 日本語版

条件分岐タグ

WordPress.org Codex（本家・最新）

Conditional Tags

直書きはやめよう

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

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

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

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

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

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

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

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
WordPress, jQueryをCDNに変える。バージョンを変える。
WordPress, asyncとdeferでJavaScriptのロードを遅らせる。
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*

新着記事