[WordPress]Twenty Twenty-Towの子テーマでCSSが効かないときの解決方法

WordPressのテーマ「Twenty Twenty-Two」の子テーマを作成した後、

• fanction.phpの記述は合っている
• CSSの読み込み順も間違いない
• ブラウザのデベロッパーツールではCSSが効いてない状態の「見え消し」ではなく、そもそもクラス名やプロパティが表示されていない
• とにかく原因不明

そんなどうしようもない状況のときの対処方法。

筆者は以下に説明する方法で直ったが、必ずこの方法で直るかは保証できない。CSSが効かない原因が分からないためである。

対処方法

これで直るはず。もちろん親テーマを再インストール。再インストール方法が分かっている人は以下を読まなくても大丈夫。

WordPress管理画面からの再インストール方法

※作業をやる前にバックアップを取っておくことをお忘れなく！

1. 外観→テーマからTwenty Twenty-Twoテーマを削除
2. 「新規追加」からTwenty Twenty-Twoテーマを検索してインストール
3. 子テーマはそのままでOK

テーマ製作者の欄は「Wordpressチーム」「Wordpress Team」のどちらの表記でも良い。できればCSSが効かなかった状態の表記とは逆のほうをインストールすることをおすすめする。

正常にインストールが終了したらデベロッパーツールでCSSが効いているか確認しよう。

もちろんZIPファイルをアップロードしての再インストールでも良い。

これでも直らなかったら

※作業前にバックアップを！

テーマの再インストールでも直らなかったら、

1. 子テーマを削除
2. 親テーマを削除
3. 親テーマを再インストール
4. 子テーマを再インストール

という手順を何回か試してみよう。海外のフォーラムなどでは何度か再インストールしたら突然直ったという事例もでている。

この記事を執筆している現時点ではTwenty Twenty-Twoテーマはまだまだ新しい時期でありバグなどもあるかもしれない。どうしても直らない場合はテーマを諦めるか、別の表現方法を模索するか、プラグインで実現できないかという方向を考えてみるのもあり。エディターもベータ版なのでまだまだ完全ではないので。