【WordPress】CSSをインライン化(ソース内に展開)してみたけど効果はいかに!?

公開日: 更新日: Wordpress
Knowledge Base Wordpress パソコン カスタマイズ 設定




通常Wordpressで作るサイトはテーマのheader.phpにある以下のコードを使って

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" >
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

テーマフォルダ内のstyle.cssファイルを読み込む外部CSSという方法を使ってページにデザイン要素を追加しています。

これはWordpressのみならず、htmlで作成するサイトの前ページのデザインを共通にするためにも非常に合理的な方法なのですが、SEO的にはこれをページ内にそのまま記述することが望ましいなんて言われています(確信がありませんので「望ましいなんて言われてる」と表現しています)。

そこで今の形のまま各ページで外部CSSを展開して出力する方法がないかといろいろ調べたところ、非常に有用な記事がありました。以下のリンク先のページです。

これに従ってコードを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' );
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

そしてこのコードを入れると今までの外部CSSを読み込むコードが不要になるので

<!– link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" –>
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

とコメントアウトするか、この行を削除してしまえば処置は完了です。

また、通常のCSS以外に後から被せるCSSファイルがある場合には

/**
 * CSSをインラインで追加
*/
function output_inline_other_style() {
	// CSSスタイルファイルをキューに追加
	wp_register_style( 'other_style', false );
	wp_enqueue_style( 'other_style' );
	// style.cssファイルを読み込み
	$css = file_get_contents( get_template_directory_uri() ?>/別のCSSのファイル名と拡張子, true );
	// インラインにCSSの内容を出力
	wp_add_inline_style( 'other_style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_other_style' );
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

※関数名と「別のCSSのファイル名と拡張子」は適宜変更が必要
というコードを↑で追加したコードの下に追記すれば、その順で出力され、きちんと被せるCSSが後から適用されるようになります。

今回はこれを使ってこのサイトのCSSを試しにインライン化してみました。

結論としては・・・

サイトの表示が非常に非常に遅くなってしまいました

上のコードできちんとインライン出力されているのは確認しましたから、コード云々の問題ではないと思います。でも・・・通常3秒ルール前後で開いていたページがなんと8秒台。

これではいくらSEOにいいとされているとしても別の意味でマイナスになりかねない。

本当に有用なコードでしたが今回は使用を断念しました。

このサイトは完全オリジナルのテーマで稼働していますので、ひょっとすると別のテーマだったら効果があるのかも知れませんので、気になった方はやってみてください。

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

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

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


【スポンサーリンク】