【Ha-Basic】 How to output CSS inline by theme

【ha-Basic】テーマでCSSをインライン出力する方法

公開日: カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

なんのこっちゃ??と思われるかも知れませんね。Wordpressのテーマの多くはヘッダー(header.php)内に

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
というようなタグを使ってテーマ内の「style.css」を読み込むようになっています。これを外部CSSといい、直接ヘッダー内にズラズラとCSSのコードを書くよりもメンテナンスしやすい設計になっています。

が、これが時にGoogle PageSpeed Insightsなどで「htmlソースの中に直接記述するように!(これをインライン表示といいます)」と指摘されることがあります。これに対応するため今回は【ha-Basic】テーマでCSSをインライン化する方法を紹介します。

尚、これを行ったからといって必ずしもGoogle PageSpeed Insightsのスコアが改善される保証はありませんし、テストした感覚では体感的にサイトの表示速度が上がるわけでもないので、どうしてもインライン化したいという場合にのみ設定してみてください。

とどのつまりこれを行うよりも

  • 不要なプラグインを削除して余分なCSSやスクリプトを読み込まなくする
  • 広告コードを外す
  • ブログパーツなど外部のスクリプトを使うものを使わない

ようにする方がよっぽど高速表示できますので、まずはそちらで徹底的に無駄の排除を行ってくださいね。

【ha-Basic】のfunctions.phpへ追記してCSSをインライン表示させる

【ha-Basic】テーマは通常の「style.css」の他、色の指定をするための「a-color-style.css」、カスタマイズするための「a-insert-css.css」という3つのファイルがあり、ヘッダー内でもこの順番で読み込むようにして

  • 通常のCSS(テーマデフォルトのCSS)を適用する
  • 通常のCSSの後に「a-color-style.css」を読み込んで、通常のCSSの色指定を上書きする
  • 「a-color-style.css」の後に「a-insert-css.css」を読み込んで、前2つのCSSと被る部分は上書き、ないものはそのまま適用する

という形になっています。以下のコードはそれぞれのCSSファイルを前述した順番でインライン表示するためのコードになりますのでそのまま「a-insert-functions.php」へ追記します。

/*** CSSをインラインで追加 ***/
function output_inline_style() {
	// CSSスタイルファイルをキューに追加
	wp_register_style( 'style', false );
	wp_enqueue_style( 'style' );
	// style.cssファイルを読み込み
	$css = file_get_contents( get_stylesheet_uri(), true );
	// インラインにCSSの内容を出力
	wp_add_inline_style( 'style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_style' );
/**
 * a-color-style.cssをインラインで追加
*/
function output_inline_color_style() {
	// CSSスタイルファイルをキューに追加
	wp_register_style( 'a-color', false );
	wp_enqueue_style( 'a-color' );
	// style.cssファイルを読み込み
	$css = file_get_contents( get_template_directory_uri().'/a-color-style.css', true );
	// インラインにCSSの内容を出力
	wp_add_inline_style( 'a-color', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_color_style' );
/**
 * a-insert-css.cssをインラインで追加
*/
function output_inline_insert_style() {
	// CSSスタイルファイルをキューに追加
	wp_register_style( 'a-insert', false );
	wp_enqueue_style( 'a-insert' );
	// style.cssファイルを読み込み
	$css = file_get_contents( get_template_directory_uri().'/a-insert-css.css', true );
	// インラインにCSSの内容を出力
	wp_add_inline_style( 'a-insert', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_insert_style' );
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

終わったら一度サイトを表示して右クリックし、「ソースの表示」をクリックして、ソース内にCSSのコードがそのまま表示されているかを確認してください。
※もしも表示されないときはキャッシュをクリアしてみてください
キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)

【ha-Basic】全ユーザーのダッシュボードから「WordPress イベントとニュース」ウィジェットを削除する方法

【ha-Basic】投稿記事下に自動表示される関連記事について


ヘッダー内に記述されているリンクタグをコメントアウトする

テーマヘッダ「header.php」の42行目付近から記述されている

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-color-style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-insert-css.css">
を以下のようにコメントアウトします。
<!–link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"–>
<!–link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-color-style.css"–>
<!–link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-insert-css.css"–>
※連続した行ではありませんのでそのままコピペせず1行1行確認しながら行ってください

これで3つのCSSへのリンク読み込みが解除され、CSSコードがすべてインライン表示されるようになります。

簡単ですが以上が【ha-Basic】テーマでCSSをインライン化する方法になります。この記事は一応インライン化したらどうなるかなぁとテストで設定したコードですので、冒頭でも書きましたが、これを行ったからといって必ずしもGoogle PageSpeed Insightsのスコアが改善される保証はありませんし、テストした感覚では体感的にサイトの表示速度が上がるわけでもないので、どうしてもインライン化したいという場合にのみ設定してみてください。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報