【解決法】TCDテーマで子テーマを使った時にスライダーが表示されない時の対処法

Web制作

こんにちは。

先日TCDテーマ(NANO)を使用したサイト制作を担当したときのことです。

TCDのテーマ(NANO)はTOPページにスライダーを表示する機能がデフォルトで備わっていますが、子テーマを使用したことでスライダーが表示されない事象が発生しました。

そこで、あれこれ試した結果解決することができましたので、

今回はTCDテーマ(NANO)に子テーマを適応したとき、スライダーが表示されない事象の解決方法を共有していきたいと思います!

2021/1月追記

ここで紹介する方法は、TCDテーマ(NANO)以外では動作確認が取れていません。functions.phpの編集に失敗すると画面が真っ白になってしまいWebサイトが閲覧不能になってしまうので気をつけてください。

スライダーを表示する方法

子テーマのfunctions.phpに次のコードを記述することでスライダーが表示されるようになるはずです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {

  $dp_options = get_design_plus_options();

  //フロントページかつ、TCDテーマオプションで画像スライダーが選択されている。
  if ( is_front_page() && 'type1' === $dp_options['header_content_type'] ) {
    wp_enqueue_style( 'nano-slick', get_template_directory_uri() . '/assets/css/slick.min.css', false, version_num() );
    wp_enqueue_style( 'nano-slick-theme', get_template_directory_uri() . '/assets/css/slick-theme.min.css', false, version_num() );
  }

  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), false );
  wp_enqueue_style( 'nano-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}

スライダーが表示されない原因

子テーマを適応することでCssの読み込み順が変わってしまうのが原因だと思います。

スライダーを表示するには、
スライダー系Css、親テーマのstyle.css、子テーマのstyle.cssの順に読み込まれる必要があるようです。

ブラウザのデベロッパーツールを開いて、headタグ内のスタイルシートの読み込み順番を確認していきます。

スタイルシートの読み込み順(子テーマ無し)

<link rel="stylesheet" id="nano-slick-css" href="/nano_tcd065/assets/css/slick.min.css?ver=1.3">
<link rel="stylesheet" id="nano-slick-theme-css" href="/nano_tcd065/assets/css/slick-theme.min.css?ver=1.3">
<link rel="stylesheet" id="nano-style-css" href="/nano_tcd065/style.css?ver=1.3">

スライダー系Css、テーマstyle.cssの順に読み込まれています。

スタイルシートの読み込み順(一般的な子テーマの書き方)

一般的な子テーマ適応方法での、スタイルシートの読み込まれ順番を検証。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
<link rel="stylesheet" id="parent-style-css" href="/nano_tcd065/style.css?ver=5.3.4" type="text/css" media="all">
<link rel="stylesheet" id="nano-slick-css" href="/nano_tcd065/assets/css/slick.min.css?ver=1.3">
<link rel="stylesheet" id="nano-slick-theme-css" href="/nano_tcd065/assets/css/slick-theme.min.css?ver=1.3">
<link rel="stylesheet" id="nano-style-css" href="/nano_tcd065_child/style.css?ver=1.0">

親テーマstyle.css、スライダー系Css、子テーマstyle.cssの順に読み込まれています。

スタイルシートの読み込み順(今回紹介したコード)

最後に今回紹介したコードを適応した時の読み込み順。

<link rel="stylesheet" id="nano-slick-css" href="/nano_tcd065/assets/css/slick.min.css?ver=1.3">
<link rel="stylesheet" id="nano-slick-theme-css" href="/nano_tcd065/assets/css/slick-theme.min.css?ver=1.3">
<link rel="stylesheet" id="parent-style-css" href="/nano_tcd065/style.css?ver=5.3.4">
<link rel="stylesheet" id="nano-style-css" href="nano_tcd065_child/style.css?ver=5.3.4">

スライダー系Css、親テーマのstyle.css、子テーマのstyle.cssの順に読み込まれています。

まとめ

今回は TCDテーマで子テーマを使った時にスライダーが表示されない時の対処法を紹介しました!

ここで紹介した方法はあくまで僕の環境での話になるので、皆さんの環境では別のことが原因になっている可能性もあります。

なので100%これが原因だと思わず参考程度に見て、少しで役に立ってくれたら嬉しいです!

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP