読者の未来に、少しでも役立つネタを配信するブログ。2018年12月29日TweetWordPressでサイトをカスタマイズしたい方、子テーマを作ろうとしている方に読んでほしい記事です。私も今まで子テーマを使っていなかったのですが、サイトを本格的にカスタマイズするにあたり、子テーマを試行錯誤して作成しました。子テーマを作成することによって、サイトのカスタマイズがスムーズにできるようになったので、子テーマのメリットと作成方法について、ご紹介できればと思います。子テーマとは子テーマとは、通常のWordPressテーマ(親テーマと言います)と連携したカスタマイズ専用のテーマのことです。子テーマを作ることで、親テーマのコードをいじることなく、サイトのカスタマイズを楽しむことができます。コード内容をサイトに反映するときに、通常は親テーマのコードをそのままサイトに反映しますが、子テーマにコードの記述がある場合、子テーマのコードを優先的に反映することができるからです。親テーマのコードがそのままサイトに反映。子テーマのコードを優先的にサイトに反映。子テーマのメリットとはここまで読んで、「親テーマを直接カスタマイズすれば良くない?」と感じている方もいると思うので、子テーマのメリットについて触れておきます。親テーマのアップデートに振り回されない子テーマがない場合、親テーマが何らかの理由でアップデートしたときに、アップデート前のカスタマイズ内容はすべて解除されてしまいます。子テーマがあればコードが独立しているので、そのままカスタマイズ内容を引き継ぐことができます。カスタマイズの試行錯誤がしやすい親テーマのコードを直接変更する場合、カスタマイズを失敗してしまったときに、元のコードがわからなくなってしまうリスクがあります。子テーマがある場合、カスタマイズに失敗をしても、親テーマにある元のコードを参照して戻すことができるので、カスタマイズの試行錯誤がとてもしやすくなります。子テーマのメリットを感じることができたら、いよいよ子テーマを作っていきましょう。子テーマの作り方WordPressのテーマ「STINGER5」、サーバー「ロリポップ!」の環境で説明しますが、他の環境でも手順は同じだと思います。あとで注意点にも記載しますが、作業前に必ずバックアップをとることをオススメします。サイトのFTPサーバーに入るロリポップ!の場合、「ロリポップ!FTP」に指定パスを入れてログインします。ロリポップ!FTP子テーマのフォルダを作成ドメイン名>wp-content>themesとフォルダの階層をたどっていき、「themes」フォルダ内に子テーマのフォルダを新規作成します。フォルダ名は自由ですが、「STINGER5」の場合、「stinger5child」と付けるのが主流です。子テーマのフォルダ内に、「style.css」ファイルを作成します。「style.css」ファイル内に、下記のコードを記述します。▲▲には親テーマのフォルダ名(私の場合は「stinger5ver20150505b」)を記載します。「style.css」と同じ手順で、子テーマのフォルダ内に、「function.php」ファイルを作成します。「function.php」ファイル内に、下記のコードを記述します。'/style.css',array('parent-style'));}?>※WordPressの公式オンラインマニュアルには、下記のコードでも反映できると記載がありましたが、私の場合は反映できませんでした。);}?>WordPressの公式オンラインマニュアル子テーマの有効化WordPressの管理画面にあるテーマ一覧に、子テーマが作成されていることを確認できたら、テーマを有効化します。※親テーマはそのまま有効化しておいてください。※もし、子テーマが作成されていないようであれば、ここまでの手順にミスがある可能性が高いです。子テーマ反映のテストWordPressの管理画面にあるテーマの編集に、FTPサーバーで作成した「style.css」ファイルがあることを確認したら、下記のコードを記述してみてください。※子テーマ発動用のコードの下に記述してください。center;サイトを更新し、サイトタイトルが「中央」になっていれば、子テーマが正常に機能していますので、子テーマの作成完了です。私が子テーマを作成するときに、学んだ注意点を最後に書いておきます。子テーマ作成前にバックアップをおこなう子テーマを作成しているときに、「間違ってファイルを消してしまった・・」など不測の事態が起きてしまうことがあるので、念のためバックアップはとっておいたほうが良いです。私もこれを機会に、ロリポップ!のバックアッププランに申し込みました。「style.css」に「@import」を記述するやり方はやらない子テーマの作成方法を探していると、よく「style.css」に「@import」を使用した作成方法を見かけますが、サイトのスピードが遅くなるなど、公式マニュアルでもこのやり方を推奨していないので、避けたほうが良いです。親テーマの「function.php」のコードを子テーマにそのままコピーしない子テーマは、「style.css」だけでなく、「header.php」「sidebar.php」など様々なファイルで作成可能です。サイトをカスタマイズをしていくにあたり、親テーマのコードをそのままコピーして(もしくは、ファイルごとコピーして)、子テーマを作成することが増えてきますが、「function.php」のファイルについては、親テーマのコードをそのまま子テーマに写すとエラーが発生します。「function.php」特有の子テーマ作成手順があるらしいのですが、私は「function.php」だけは親テーマを直接カスタマイズしています。(子テーマ作成時につくった「function.php」には、子テーマ発動のコードだけを記述しています。)親テーマの「function.php」のコードを変更しないと、子テーマの「style.css」のコードが一部反映されないことがあるWordPressのテーマ「STINGER5」で発生する事象ですが、親テーマの「function.php」にある下記のコードを削除しない場合、子テーマ「style.css」のコードが一部反映されないことがあります。'stinger_customize_css');//カスタマイザーで色を設定しない方は削除して下さい(ここまで)削除した場合、デフォルトのカスタマイズ設定が一部使えなくなりますが、今後いろいろとカスタマイズしていくのであれば、削除することをオススメします。本記事は以上になります。最初は子テーマを作成することに抵抗を感じるかもしれませんが、サイトをカスタマイズしていくにあたり、子テーマはとても便利に使えるので、早めに作成することをオススメします。お付き合い頂き、ありがとうございました!#最後に、子テーマを作成するときに参考にしたサイトを紹介しておきます。ブログをAMP対応する方法と注意点WordPressのAFFINGERテーマを使っていて、AM...2019/07/282つのエクセルを簡単に比較!ブックの整列を覚えよう2つのエクセルを比較して見たい方に読んでほしいブログです。日本で外国人と交流したい方に読んでほしいブログです。歯根嚢胞の摘出手術をしたので、治療や費用などをブログに書くよ結婚式の印刷物を即日格安で印刷できるキンコーズが超素敵!1万円の資金で株を始めたので、株の始め方を書いておくよこのブログを書いている人ネット企業ではたらくサラリーマンです。今までの知識や経験が、少しでも誰かの役に立てればと思い、ブログを開設しました。ブログ運営・TOEIC・英語・エクセル・IT関連のネタなど、定期的に情報を配信しています。ツイッターで気になる情報をつぶやいています!私のツイッターお問い合わせは、以下の宛先にお願いします!私のメールアドレス※内容によってはご返信できない点、ご了承ください。調査みらしん読者の未来に、少しでも役立つネタを配信するブログ。