未分類

TCD WordPress「NANO」の子テーマのレイアウト崩れの解決方法

TCD WordPress「NANO」を購入し、子テーマを適応した際にレイアウトが崩れてしまった人

公式ブログに子テーマを自作する方法が記載されていたけど、同じ方法で試したらレイアウトが崩れてしまった。

レイアウト崩れを解決する方法をお答えします。

本記事の内容
公式ブログを参考に子テーマを作成すると崩れる
WordPress「NANO」の子テーマのレイアウト崩れの解決方法

この記事を書いている私は、フリーランスとしてサーバーサイドエンジニアで活動しています。

サーバーサイドエンジニアの私が、なぜ、WordPressを記事にしたのか？

ありがたいことに、知り合いからHP作成を依頼をいただいたことがきっかけでした。

WordPress初心者の私がハマったところだったので、同じような人の助けになれば幸いです。

公式ブログを参考に子テーマを作成するとレイアウトが崩れる

TCD公式ブログには子テーマを作る理由と自作する方法が記載されています。

私はWordPress初心者でしたので、テーマが用意されていると大変助かりました。

そこでTCD様の「NANO」というテーマを購入したところ、子テーマを作る必要があるという情報に辿り着きました。

TCD様の公式ブログに子テーマを自作する方法が記載されおり、記載通りに実装することで、うまくいくと思い込んでおりました。

「style.css」「functions.php」の二つのファイルを修正する必要があると記載があり、私は以下のように修正を行いました。

style.css

/*
Theme Name:Nano child
Theme URI:子テーマのURLを記載する（空欄でもOK）
Description:WordPressテーマ「Nano」の自作子テーマ
Template:親テーマのフォルダ名を入力
Author:テーマの作成者名
Version:x.x.x
*/

functions.php

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

こちらの修正を加えてWordPressに反映すると、PC表示でのTOP画面の画像のスライダー部分の表示が崩れる現象が起きました。

レイアウト崩れの解決方法

レイアウトが崩れたことによって、WordPress初心者の私がまず行ったことは、TCD様へ問い合わせを行いました。

しかし、子テーマの使用はカスタマイズに準じた扱いになるため、サポートと動作保証の対象外と返答がありました。

なので、自力でレイアウト崩れを解決する方法になりました。。。

functions.php

試行錯誤した結果、以下の順番にcssファイルを読み込ませることによって、解決することができました。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'nano-slick', get_template_directory_uri() . '/assets/css/slick.min.css');
  wp_enqueue_style( 'nano-slick-theme', get_template_directory_uri() . '/assets/css/slick-theme.min.css');
  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'));
}

まとめ

テーマを使うことによって、WordPress初心者の私でも、ある程度見応えのあるホームページを作ることができます。

まずは、テーマを用意してくださっているTCD様には感謝しかありません。

私のようにフロントエンド周りの経験がない方や初心者の方には、ハマるポイントと思い今回解決方法を記事にさせていただきました。

同じような人の助けになれば幸いです。

-未分類