loader image

【エラー解消方法も】WordPressの特定ページのみCSSファイルを読み込む方法

ブログ編集部 211 view

こんにちは、今回はWordPressの特定の固定ページのみ、別にアップロードしたCSSを読み込む方法をいくつかご紹介したいと思います。

また、エラーでCSSが読み込まない場合の解消法もご紹介できればと思います。

では早速どうぞ。

サンプルコード

では特定ページでCSSファイルを読み込む方法です。

1. headerで読み込み

<head>
  <?php if ( is_page('sample-page') ): ?>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>
</head>

テーマファイルエディターなどからヘッダーに直接書き込む場合のサンプルコードです。

上記コードでは○○.com/sample-pageのみcssフォルダに格納したsample.cssを読み込む設定になっています。

上記のサンプルコードのように<head></head>の間に

  <?php if ( is_page('sample-page') ): ?>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sample.css">
  <?php endif; ?>

をコピペしていただければ大丈夫です。

sample-pageと/css/sample.cssの部分を編集してご使用ください。

2. 【推奨】 function.phpで読み込み

function my_styles() {
    if ( is_page( 'sample-page' ) ) {
        wp_enqueue_style( 'subscription', get_template_directory_uri() . '/css/sample.css', array(), '1.0.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

WordPressは公式でCSSはfunction.phpで読み込むことを推奨しているので、function.phpをいじるのに抵抗がない方はこちらのコードを使用してください。

先ほど解説したようにsample-pageと/css/sample.cssの部分を編集してご使用ください。

ちなみに'1.0.0'の部分はCSSのバージョンを記載しているだけなので、特にいじらなくてOK。

エラーがでてCSSを読み込まない場合

上記のコードを使っても特定ページでCSSを読み込まない場合があります。

以下の理由の可能性が高いので確認してみてください。

子テーマを使用している場合

子テーマを使用している方はCSSファイルを子テーマではなく親テーマにアップロードしてください。

子テーマにアップロードするとCSSが読み込みません。

デベロッパーツールで確認すると

Refused to apply style from ○○.com/css/sample.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

MIMEタイプがサポートされていないと表示されますが、ただCSSのパスが違うだけです。

親テーマに同じパスでCSSをアップデートすればエラーが解消され、CSSを読み込むはずです。

まとめ

いかがでしたでしょうか。

CSSを分割することはメンテナンス性を向上させたり、余計なCSSを読み込まないことで表示速度の向上が見込めます。

ぜひチャレンジしてみてください。

ではでは。

集客できるホームページを私たちと作りませんか？😊

ホームページ制作やWEB集客に何かお悩みをお持ちでしたら、お気軽にお問い合わせください。👌

今はまだ発注するか決めていなてもまったく問題ありません。🙆

お問い合わせ
戻る

こちらもおすすめです