BEAUTY (tcd054)に子テーマを使うとスライダーが表示されなくなる場合の対処方法

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を使っているテーマファイルの場合は同じ不具合が発生する可能性があります。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

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

[wc_row][wc_column size=”one-half” position=”first”]

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

[/wc_column][wc_column size=”one-half” position=”last”]

(異常)子テーマ適用

[/wc_column][/wc_row]

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

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

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

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

<link rel='stylesheet' id='dashicons-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-theme-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick-theme.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/style.css?ver=1.2' type='text/css' media='all' />

(異常)子テーマ適用

<link rel='stylesheet' id='dashicons-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054_child/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-theme-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick-theme.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054_child/style.css?ver=4.9.6' type='text/css' media='all' />

比較してみるとわかりますが、本来の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の読み込み順序を指定します。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'dashicons', get_template_directory_uri() . '/dashicons.min.css' );
    wp_enqueue_style( 'admin-bar', get_template_directory_uri() . '/admin-bar.min.css' );
    wp_enqueue_style( 'beauty-slick', get_template_directory_uri() . '/assets/css/slick.min.css' );
    wp_enqueue_style( 'beauty-slick-theme', get_template_directory_uri() . '/assets/css/slick-theme.min.css' );
    wp_enqueue_style( 'beauty-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('beauty-style')
    );
}

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

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

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

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

<link rel='stylesheet' id='dashicons-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://fujita358.xsrv.jp/tcd054/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-slick-theme-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/assets/css/slick-theme.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='beauty-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://fujita358.xsrv.jp/tcd054/wp-content/themes/beauty_tcd054_child/style.css?ver=4.9.6' type='text/css' media='all' />

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

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

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

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

WordPressテーマ「BEAUTY (tcd054)」

Follow me!