TCD「Bloom」で子テーマを使った場合の表示不具合を修正する

TCDテーマ「Bloom」で子テーマを使いたい場合には、CSS読み込み順をfunctions.phpで正確に設定しなおさないと表示の不具合が起きます。

TCDテーマの「Bloom」で子テーマを使いたい場合、一般的な方法で子テーマを作成しただけですとCSSの読み込み順がおかしくなって表示がおかしくなります。

そこで、functions.phpでCSSの読み込み順を修正することで解決させることができます。

一般の子テーマを適用した後のCSS(プラグインなど)

本来、親テーマのCSSが設定されるべき、id=’bloom-style-css’に子テーマのCSSが設定されています。

<link rel='stylesheet' id='dashicons-css'  href='https://be-effortless.com/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='https://be-effortless.com/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='https://be-effortless.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_child/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_child/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-slick-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-responsive-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/responsive.css?ver=4.9.6' type='text/css' media='all' />

親テーマ(Bloom)のCSS

一般的に子テーマを作ると、id=’parent-style-css’、id=’child-style-css’が使われることが多いですが、親テーマ(Bloom)には使われていないので親テーマにidを合わせるようにします。

<link rel='stylesheet' id='dashicons-css'  href='https://be-effortless.com/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='https://be-effortless.com/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='https://be-effortless.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/style.css?ver=1.2' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-slick-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-responsive-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/responsive.css?ver=1.2' type='text/css' media='all' />

functions.phpを修正した後のCSS

親テーマのidを合わせて、読み込み順も正確に設定した結果となります。

<link rel='stylesheet' id='dashicons-css'  href='https://be-effortless.com/wp-includes/css/dashicons.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='https://be-effortless.com/wp-includes/css/admin-bar.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='https://be-effortless.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-style-child-style-css'  href='https://be-effortless.com/wp-content/themes/bloom_child/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-slick-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/css/slick.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='bloom-responsive-css'  href='https://be-effortless.com/wp-content/themes/bloom_tcd053/responsive.css?ver=4.9.6' type='text/css' media='all' />

functions.phpの修正の仕方

読み込みに使っているidが違うので、親テーマのidに合わせるように変更します。

修正前(一般的な子テーマのfunctions.phpの記述)

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

修正後

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')
    );
}

 

Follow me!