【TCDテーマ】子テーマ作成でレイアウトが崩れる原因【1分で解決】

こんな悩みに答える記事になります。

本記事では、「TCDテーマを親テーマとした際の子テーマ使用時にレイアウトが崩れる問題」について解決策を提示しています、1分もあればすぐ解決できるのでサクッと読んで作業を進めちゃいましょう。解決策だけではなく問題の特定方法についても解説しているので、今後に活かすことも可能です。

1分で解決できます！

私は仕事柄WordPressを使う機会が多いんですが、たまにTCDテーマを触る機会もありまして、その時うっかり忘れてレイアウト崩れに3分ほど頭がフリーズする事があったので備忘録として解決策をシェアしておこうと思います。

それでは見ていきましょう。

レイアウト崩れの原因と解決策【2ステップ】

TCDテーマで子テーマを作成した際に起こるレイアウト崩れは、スタイルシートが読み込まれていないことが原因で起こります。

子テーマ作成手順に間違いが無い場合はほとんどがこれでして、だいたいパスがおかしかったりするんですよね。

TCDテーマ全てで起こるというわけではなく、レイアウト崩れが起きないテーマ（「MAXX（tcd043）」など）もあったりするので、慣れている人ほど「ん？」ってなったりしますよね、ちなみに「AGENT（tcd033）」はレイアウト崩れが起きるテーマの一つです。

これを解決する方法は実に簡単、2ステップでOK。

レイアウト崩れを直す方法【2ステップ】

1. 親テーマのheader.phpを子テーマにコピー
2. header.phpの一部コードを置き換える

それぞれ解説します。

ステップ1：header.phpを子テーマにコピー

まず親テーマディレクトリ内にあるheader.phpを子テーマディレクトリ内にコピーします。

コピーしたファイルの方を編集することになります。

ステップ2：一部のコードを置き換える

コピーしたheader.phpを開きます。

開いたファイルの中にあるbloginfo('stylesheet_directory');のコードを全てecho get_template_directory_uri();に置き換えてください。

それで保存し、確認してみるとレイアウト崩れは直っているはずです、やることはたったこれだけ。

TCDテーマの一つである「agent_tcd033」を例に、置換前と置換後のビフォーアフターを見てみましょう。

TCDテーマ「AGENT」での置換前【1(46)行目,6(51)行目】

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/agent.css" type="text/css" />

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jscript.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/js/comment.js?ver=<?php echo version_num(); ?>"></script>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/comment-style.css" type="text/css" />

1(46)行目と6(51)行目に問題の処理（bloginfo('stylesheet_directory');）がありますね、これを別の処理に置き換えることでレイアウト崩れが直ります。

TCDテーマ「AGENT」での置換後【1(46)行目,6(51)行目】

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/agent.css" type="text/css" />

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jscript.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/js/comment.js?ver=<?php echo version_num(); ?>"></script>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/comment-style.css" type="text/css" />

おまけ：PHPコードを使わない方法【直接指定】

bloginfo('stylesheet_directory');をecho get_template_directory_uri();に置換するといった、PHP処理を変更する方法以外に直接パスを指定することでレイアウト崩れは直せます。

TCDテーマ「AGENT（agent_tcd033）」を親テーマとするのであれば下記のような感じになる

    <link rel="stylesheet" href="/wp-content/themes/agent_tcd033/agent.css" type="text/css" />

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jscript.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/js/comment.js?ver=<?php echo version_num(); ?>"></script>
    <link rel="stylesheet" href="/wp-content/themes/agent_tcd033/comment-style.css" type="text/css" />

基本的には最初に解説した方法を使ってください、ただ、こうやって書いてみるとレイアウトが崩れた原因がよりわかりやすいと思うので「ふむふむ」と軽く読み流していただければOK。

本記事のメインはここまでですが、時間に余裕がある方は最後まで読んでみてください、今回の問題を良い機会と考えてスキルとして定着させましょう。

自分で解決できる力を身に付ける【方法を伝授】

レイアウト崩れが直っても次にまた同じような問題に直面した際、本記事を読んでいるというのはいかがものかと思うので、問題の切り分け方というか特定方法についても解説しておきます。

自分で解決出来るようになろう

上記の場合、つまりは今回の場合であれば下記の手順で問題を特定することができます。

1. コンソールを見る【問題の把握】
2. ソースコードを見る【原因の特定】

基本的にはこれでOK、それぞれ解説します。

レイアウトが崩れたらまずコンソールを見る

レイアウト崩れが起きた時はまずコンソールを開きエラーがあるかどうか確認しましょう（筆者はChromeブラウザ使用）

上記スクショはTCDテーマ「AGENT（tcd033）」の子テーマ適用時にレイアウト崩れが起きた際のエラーコードです。

エラーコードで確認したい箇所は「404（Not Found）」とファイル名の2つ。

まず「404」はファイルが見つからない（パスがおかしい）時によく出てくるエラーです、そしてファイル名は問題が起きている（パスがおかしい）部分を特定するのに役立ちます。

これを理解した上で次を見てみましょう。

ソースコードで原因を特定する

404エラーを確認することでパスがおかしい箇所があると予想できました、その上で問題を特定するにはファイル名を使ってソースコード内を検索すればOK。

まずコンソールタブからElementsタブに変えましょう、そして「Ctrl + F」（Macであれば「Command + F」）で検索窓を出しましょう。

検索窓にエラーコードの右にあったファイル名（CSSファイル）を入力します、今回であればcomment-style.cssかagent.cssで検索。

検索結果で表示されたコードを読んでみると、パスが子テーマディレクトリを指定していることがわかります、つまり、親テーマにあるはずのスタイルシートを子テーマで指定しているから読み込めずレイアウトが崩れていた事が分かります。

まとめ

終わりに【エラーからスキルアップ】

どんな事でも何か問題やトラブルが発生した時はそれを解決するだけではなく、次同じ事が起きたときに時間を割かないようにしましょう。

そのためには【なぜ問題が起きたのか？】【どうやって解決したのか？】【なぜそれで解決したのか？】をしっかり理解することが大事です。

今回であれば原因の特定方法と、使用した関数くらいは理解しておくべきです。

以上になります。

各処理の理解を深めてスキルアップ【おさらい】