ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

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

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

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

でもこれはいけません。

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

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>

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

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

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

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

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

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

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

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

<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が使えます。

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

特定のページだけに追加するには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の本

post-cta-image

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

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

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

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


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください