WordPressテーマ「BEAUTY (tcd054)」に、一般的な方法で子テーマを適用するとトップページの上部スライダーが正しく表示さません。これは「BEAUTY (tcd054)」が複数のスタイルシートを読み込んでいるため、読み込む順番が元の順番と変わってしまうことに起因します。対策としては、子テーマのfunctions.phpでスタイルシートの読み込み順序を正しく設定します。なお、関数「get_template_directory_uri()」を使って親テーマのディレクトリをそのまま指定してもダメなケースもあるため多少の手間が必要となります。

一般的な子テーマのfunctions.phpでの記述

一般的な子テーマでは、以下の様な記述をしてスタイルシートの設定を行います。

親テーマの「style.css」を指定してから子テーマの「style.css」を指定するという流れです。

ただ、WordPressテーマ「BEAUTY (tcd054)」に、この記述を適用するとトップページの上部スライダーが正しく表示さません。

これは「BEAUTY (tcd054)」が、複数のCSSを読み込んでいるためであり、「BEAUTY (tcd054)」以外であっても複数のCSSを使っているテーマファイルの場合は同じ不具合が発生する可能性があります。

不具合は以下のようになります。左が正常、右が不具合が生じた異常な状態でスライダー画像が表示されません。

(正常)インストール直後

(異常)子テーマ適用

親テーマと子テーマのスタイルシートを比較

状況を調べるために、上記のページのHTMLを表示してスタイルシート比べると以下の様になります。

不具合の原因がCSSの読み込みの順番にあることがわかります。

(正常)インストール直後

(異常)子テーマ適用

比較してみるとわかりますが、本来のCSS読み込みの順番が子テーマを適用することで狂っています。

本来の順番としては、「style.css」が最後に来なければならないですが、「slick.min.css」と「slick-theme.min.cs」より先に読み込まれています。また、子テーマの「style.css」も先に読み込まれています。更に、最後に子テーマの「style.css」がもう一度読み込まれています。

解決方法はfunctons.phpで読み込み順序を指定する

「BEAUTY (tcd054)」のように複数のCSSを使っているテーマファイルの場合は、functons.phpでCSSファイルの読み込みの順番を正確に指定する必要があります。

以下の様に、インストール直後のHTMLを参考にしてfunctons.phpでCSSの読み込み順序を指定します。

(注)「slick.min.css」と「slick-theme.min.cs」は、サブディレクトリにあるため関数「get_template_directory_uri()」の後ろにサブディレクトリ「/assets/css」の指定を追加しています。

正しい順番でCSSが読み込まれることを確認

上記の記述をfunctions.phpに適用した上で更新すればスライダーが正しく表示されるはずです。

また、HTMLを調べると以下の様になっているはずです。

これで、子テーマを自由に編集することができますので、「BEAUTY (tcd054)」がバージョンアップされてもいつでも更新することが可能です。

WordPressテーマ「BEAUTY (tcd054)」のご紹介

ヘアサロンが「インターネットからの予約・問い合わせ」を増やすため、集客効果を発揮する「スタイルギャラリー」、安心感や期待感を膨らませる「スタッフ紹介ページ」
洗練された「メニュー価格表・ロゴマーク付きの地図ページ」を作ることが可能なテーマファイルです。イメージ写真を瞬時に抽出する「ヘアスタイル検索機能」が新搭載されています。

↓↓↓詳しくはこちらをご覧ください。↓↓↓

WordPressテーマ「BEAUTY (tcd054)」