【問題解決】【WordPress】テーマの自作を目指して　その９

こんにちは朱夏です。

今回は、残っている問題の解決に向けて調べていきたいと思います。
残った問題はこちらです。

CSSファイルの記述が無視される理由
ナビゲーションバーのリンクに対するスタイルが無視される理由
テーマ配布時の注意点（問題が解決しない場合）

問題解決に向けて、以下の手順で検証していきます。

CSSが読み込まれない原因を予想する
予想に対して検証をしてみる
結果を確認
新たな問題を洗い出す

これを繰り返していきたいと思います。

1.CSSが読み込まれない原因を予想する

まず、考えられる原因を上げていきます。
ボーンテーマを使用せず、0から自作しているテーマなので、原因を予測すると、以下の事が考えられます。

スタイルシートが読み込まれていない
- パスが間違っている
- 有効化されていない
- WordPress独自の導入方法がある
作成したスタイルシートより優先されているものがある
- WordPressのデフォルトスタイル
- Bootstrapで指定されているデフォルトの記述

今考えられる原因はこんなところでしょうか。
では次に行きます。

2.予想に対して検証をしてみる

初めに「CSSが読み込まれているのかどうか」、ここがクリア出来ていなければ何も始まりません。
mystyle.cssについて、実際に読み込まれたページから要素を取り出してみます。
タグ打ちで記載したものと、ファイルパスも確認します。

<-- 実際の記述 -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">

<-- WEBページの記述 -->
<link rel="stylesheet" href="http://localhost/wp01/wp-content/themes/simple01/mystyle.css">

<-- CSS格納先のパス -->
C:\MAMP\htdocs\wp01\wp-content\themes\simple01\mystyle.css

<-- 実際の記述 -->

<-- WEBページの記述 -->

<-- CSS格納先のパス -->

C:\MAMP\htdocs\wp01\wp-content\themes\simple01\mystyle.css

見たところ、パスのずれなどは無くちゃんと指定されているように見えます。
しかし、前回の結果の通り、スタイルは反映されませんでした。

今回の検証のため、テスト用の記述を用意します。
※前回記載したテーマカスタマイザーのCSS記述は削除しています。
※下記のテスト用の記述をheader.phpに書き込みました。

<div class="test">
   <div>
      CSSテスト
   </div>
</div>

<div>

CSSテスト

</div>

そして、mystyle.cssとstyle.cssには下記のスタイルを記載してみました。

.test {
    background-color: lightcoral;
}

.test {

background-color: lightcoral;

}

スタイルが反映されれば、背景がピンク色になるはずなのですが、結果は何も変化なしでした。

そこで思い当たったのが、「WordPressが外部のスタイルシートの読み込みを許可していないのでは？」という事でした。

やってみることとして、mystyle.cssの読み込みに対しては記述していましたが、style.cssは記載していなかったので、追記してみることにしました。
追記したものはこちら。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>" type="text/css" />

1	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>" type="text/css" />

結果は、変化有でした！
追記した事によってスタイルが反映されたということは、mystyle.cssは機能していない状態という事でしょうか。
次は、style.cssが読み込まれたと予想できるため、style.cssの記述だけbackground-colorをindigoに変更しました。

結果は・・・変化なしです。
どういう事だろうと、試しにmystyle.cssもindigo(紺)に変えてみますが、背景色は変わらずでした。

今度はCSSファイルの読み込みのために記載した2行を1つずつ無効化して確認してみることにしました。
結果は、mystyle.cssを読み込む側の記載を無効化した場合、反映されていたスタイルが消えるという現象を確認しました。
そして、style.cssの読み込み側を削除しても、問題なくスタイルが反映されるという事実も確認しました。

そもそもどちらの記述も読み込まれていなかったのに、sytle.cssの読み込み用の記載をした直後にスタイルが反映され、その記載を削除した後もスタイルが反映されたままという、おかしな現象が発生しています。
ググっても特に記載方法などに問題は見られなかったため、WordPressのバージョンに依存した問題の可能性も確認しておこうと、メニュー画面からバージョンを確認しました。

バージョンは5.3です。

しかし、バージョン固有の問題でもなかったため、途方に暮れてしまいました。

とりあえず確認のためにwebサイトの表示をしておこうと読み込んだところ・・・背景色が変わっていました！

そこで、そもそもの問題が間違っていた可能性が浮上しました。

×スタイルが読み込まれない
〇スタイルの読み込みに遅延がある

これだ、と思いググって調べてみたところ、ありました、私の様な事象を取り上げている記事が。

ランサーズ（Lancers）エンジニアブログ

WordPressでCSSがすぐに反映されないのを解消する方法 - ランサーズ（Lancers）エ...

https://engineer.blog.lancers.jp/2017/04/wp_css_auto_update/

ota（@purratto）です。 WordPressでCSSを編集したときに即座に反映されなかったことはありませんか？これはブラウザキャッシュが原因です。 style.css読み込み箇所を下記のように変更するだけでstyle.cssを即座に確実に反映できるようになります。

遅延が原因の可能性が高まってきました。
改善方法を参考にしてタグの修正を試みます。

※このタグ間違いです※

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">?v=<?php echo filemtime( get_stylesheet_directory() . '/mystyle.css') ?>”>

1	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">?v=<?php echo filemtime( get_stylesheet_directory() . '/mystyle.css') ?>”>

~~これで大丈夫と思ったのですが、結果はほぼ変わらずでした・・・気持ち反映が早くなったような気はします。~~

~~遅延するだけなら、作業効率の問題だけで、CSSファイル自体は使えますね。~~
~~ここで一旦解決としたいと思います。~~

2019/11/25 02:59　追記
下記タグに修正したら解決しました。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css?<?php echo filemtime( get_stylesheet_directory() . '/mystyle.css'); ?>">

1	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css?<?php echo filemtime( get_stylesheet_directory() . '/mystyle.css'); ?>">