【コピペOK 】WordPressで子テーマを作る方法

01/08/2020

カスタマイズの前に…

ワードプレスでオリジナルのサイト、ホームページ、ブログ、ネットショップなどを作成するなら、まず最初にやるべきことを紹介します。


これをしておかないと….
せっかく努力してカスタマイズした内容が一瞬で消える….
なんて悲劇になりかねないので、必ず1番最初にチェックしてください。


簡単にできるようにコピペできるソースも用意しています。

WordPressカスタマイズの必須準備

WordPressは、無料でたくさんの選べるテーマ(テンプレート)があり、簡単にブログやホームページなどのウェブサイトを簡単に作成できるとっても便利なコンテンツ管理システム。

WordPressは、テーマ(テンプレート)内のソースコードを読み込むことでWebサイトを生成する仕組みになっているので、テーマ(テンプレート)をカスタマイズすることで、より自分好みのオリジナルサイトをデザインすることもできます。

そこで、WordPressをカスタマイズする時には、まず「子テーマ」を作成することを強くオススメします。

子テーマって何?

子テーマは、元のテーマの情報を引継ぎつつ、子テーマに記述した内容を優先的に読み込んでウェブサイトに表示させることを目的に作成するファイルのことです。

元のテーマではなく、作成した子テーマをカスタマイズすることで、以下のようなメリットがあります。

最初に「子テーマ」を作る3つのメリット

最初に「子テーマ」を作り、「子テーマ」をカスタマイズすると以下のようなメリットがあります。

  • 元のテーマをそのまま保存できるから安心!
  • 元のテーマがアップデートしても上書きされないから安心!
  • 対象ファイルが見つけやすいので時短!
  • オリジナルが残る

    直接テーマのソースコードを編集してしまうと、もし思う通りにできなかった時や、何かエラーが発生した時に、元のソースがわからなくなってしまっているので、遡って復元することができなくなってしまいます。

    子テーマは、いくら編集しても、親テーマは元のままなので、万が一トラブルがあっても簡単に元に戻せます。

    アップデートしても安心

    元のテーマを直接カスタマイズしてしまうと、元のテーマがアップデートされた時に、せっかくカスタマイズした内容が上書きされて消えてしまうリスクがあります。

    子テーマは自分が作ったファイルなので、勝手にアップデートされたり、上書きされることはありません。

    もちろん、アップデートした元のテーマの情報を引継ぎつつ、カスタマイズしてある場所はちゃんと反映されます。

    せっかくの苦労してカスタマイズしたのに、アップデートで消えた….

    なんて悲劇を予防し、安心してカスタマイズできます。

    ファイルがスッキリ

    これから作成する子テーマのファイルをみていただければわかりますが、最低限必要なファイル数は2つだけ。

    あとは、カスタマイズしたい箇所のファイルだけ追加していくので、子テーマフォルダ内には、カスタマイズした箇所のファイルしかありません。

    通常、テーマ(テンプレート)フォルダには大量のファイルがあるので、変更したい箇所を探すだけでも大変時間がかかります。

    子テーマを作成することで、ファイル管理の手間も、必要なファイルを探す時間も節約できます。

    子テーマの作り方(コピペ可)

    子テーマを保存フォルダを作成

    最初に子テーマのファイルを保存するファイルを作成します。

  • 作成する場所:wordpress > wp-content > theme
  • ファイル名:「(元のテーマ名)_chiid」
  • *ファイル名に決まりはありませんが、上記のように、「元のファイル名+アンダースコア+child 」とルールを決めておくと整理しやすく、見やすいと思います。

    2つのファイルを作成

    どこをどんな風にカスタマイズをする場合でも、絶対に必要な2つのファイルをまず最初に作成します。

    style.css

    先ほど作成した子テーマフォルダ内にstyle.cssという名前のファイルを作成し、下記のコードをコピペして貼り付けます。

    
    /*
    Template:テーマ名
    Theme Name:テーマ名_child
    */
    
    

    例えば、元のテーマの名前が「webskill123」だったら、style.cssに以下のように記述します。

    
    /*
    Template:webskills123
    Theme Name:webskills123_child
    */
    
    

    functions.php

    先ほど作成した子テーマフォルダ内にfunctions.phpという名前のファイルを作成し、下記のコードをコピペしてphpとして貼り付けます。

    特に編集する箇所はないのでそのままコピペしてください。

    
    
    
    

    テーマ一覧から子テーマを選ぶ

    上記の2つのファイルを作成すると、ワードプレスの管理画面ダッシュボードのテーマ一覧から、作成した子テーマ(元のテーマ名_child*/)を選択できるようになるので、選択して有効化してください。

    この時点では、元のテーマの情報を引き継いでいるだけなので、元のテーマと全く同じ内容が表示されます。

    カスタマイズしたいファイルを追加

    ワードプレスのデザインカスタマイズは、CSSの編集だけでもかなりオリジナリティを出すことができますが、他にもカスタマイズしたい箇所がある場合は、カスタマイズしたい箇所のファイルを、子テーマファイル内に追加して、追加したファイルをカスタマイズします。親テーマと同じファイルがある場合、子テーマのファイルが優先して読み込まれます。

    Google Analytics や Google AdSenseのコードを貼ったりする header.phpや、元のテーマ(テンプレート)の宣伝やリンクの入っているfooter.phpは、必須ファイルに入るかもしれません。

    どんなカスタマイズをしたい時に、どのファイルを選ぶかについても別の記事でまとめていますので参考にご覧ください。