macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

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

WordPress

TCDテーマカスタマイズ経験者「いつもの手順で子テーマを作成し有効化したがどうも上手くいかない、見てみるとレイアウト崩れが起きている、エラーコードを確認するとスタイルシートが上手く反映されていないみたい、これってどうしたらいい?ちなみに、今まで使った別のTCDテーマではこんな事起きなかったんだよね。」

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

レイアウト崩れは1分で解決できる!!スキルアップもできる!!

目次【本記事の内容】

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

・レイアウト崩れの前提として
本記事では、子テーマの作成手順に間違いがないという前提で解説しています、自信がないという方はWordPress初心者は必ず覚えておきたい【子テーマの作り方】を参考にチェックしてみてください。

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

スポンサードサーチ


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

レイアウト崩れの原因と解決策【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処理を変更する方法以外に直接パスを指定することでレイアウト崩れは直せます。

bloginfo('stylesheet_directory');(phpタグも含む)を/wp-content/themes/親テーマディレクトリ名に置換すればOK。

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ブラウザ使用)

Windowsであれば「F12」、Macであれば「Command + Option + I」で開くことができます。

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

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

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

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

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

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

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

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

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

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

まとめ

コンソールを開いてエラーチェック → 404からパス指定間違いを疑う → ソースコードを開いてエラーの出ているファイルをチェック → パスが子テーマになっている → 親テーマを指定すれば解決だと分かる

スポンサードサーチ


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

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

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

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

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

以上になります。

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

bloginfo(‘stylesheet_directory’)
アクティブなテーマ(適用しているテーマ)のURL(パス)を取得し出力する、つまり子テーマを適用していると親テーマにパスが繋がらない。 get_stylesheet_directory_uri() 関数の出力を用いることが推奨されています。
get_template_directory_uri()
親テーマのURL(パス)を取得することができる関数、取得するだけなので手前にechoを記述し出力する必要がある。