WordPress

wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

wordpress 1288020 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

wordpressで「子テーマ」という用語を聞いたことはありませんか?

まだwordpressを使い始めた初心者の方にとっては、聞きなれないものかもしれません。

ただし、実はこの子テーマについてよく知っておかないと「カスタマイズしまくったCSSが、テーマを更新したら消えて元に戻ってしまった…」なんてことにもなりかねないんです。

そこで今回は、そのような事態に陥らないために、子テーマについてお伝えします。

WordPressの子テーマとは?

まず、子テーマとは、「既存のテーマに加えてカスタマイズしたい時、カスタマイズ部分だけをテーマ化し、既存テーマにくっつける形で使うもの」というイメージです。

子テーマを使うメリット

子テーマの第一のメリットは、親テーマ(子テーマの元になる既存テーマのこと)のアップデートなどの影響を受けない点です。

例えば、頻繁にテーマの更新がある場合(これ自体は良いことなのですが)、色々とカスタマイズしたのに、それが初期化されてしまうといった事態が起こります。

一方で、子テーマを作ってそちらを使っていると、このようなことが発生しません。

WordPressでの子テーマの作り方

それでは実際の子テーマの作り方を説明していきます。簡単ですので、一緒に見て行きましょう。

親テーマをインストール

wp official theme - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

まずは、既存テーマの中から使いたいテーマを選択しましょう。今回はtwenty sixteenの子テーマを作っていきます。

こうしてテーマのインストールまで終わらし、使える状態にしておいてください。

2171410ad04b34ed2d56bf62728b79ed - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

子テーマフォルダ、style.cssを作成

次は、子テーマフォルダを作成します。

例えば、「twenty sixteen-child」のような名前のフォルダにします。その後、「twenty sixteen-child」フォルダ内にstyle.cssを作成し、以下の内容を記入します。

この表記の中で重要なのは2点です。

  • Theme Name:子テーマの名前になります
  • Template:親テーマの名前を入れます。(フォルダ名をそのまま)

子テーマのfunctions.phpを追加

次は、子テーマだと認識させるために、functions.phpを書きます。

上記のような内容を入力してください。

そして、FTPなどでフォルダ毎アップロードします。

54a1ff43da23da61994c34d92930f40c - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめすると、ダッシュボードの外観→テーマのところに、子テーマがテーマの選択ページに出現します。

d8c87b4f0d72d9515accccade6a66caf - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

子テーマのCSSカスタマイズについて

ここまで作れてしまえば、後は簡単です。

子テーマのstyle.cssにCSSを追記していくことで、CSSをカスタマイズできます。

5b1348ac01df52e58f6bec95b4955b50 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

ただし、ここで気をつけていただきたいのは、CSSを打ち消すのではなく、追記するという点です。

例えば、「padding:10px」のような指定が親テーマにある場合、それを放置していた場合、そのpaddingが適用されることになります。

functions.phpをカスタマイズ

また、functions.phpをカスタマイズもできます。

例えば、投稿時にカテゴリー分類をしたりなどの作業ができます。

header.phpをカスタマイズ

他にも、header.phpなどもカスタマイズすることができます。

こういったファイルは親テーマから一旦コピーをして、カスタマイズ後に子テーマにアップロードするのが良いでしょう。

例えば子テーマにして設定したいこととしたら、Googleアナリティクスのコードくらいでしょうか?

画像パスの工夫

なお、テーマフォルダ内に画像を置いている場合、画像パスが適切にならない時があります。

これは、phpで記載されている関数「bloginfo(‘template_url’)」が使われていることが原因かもしれません。

「bloginfo(‘template_url’)」→「bloginfo(‘stylesheet_directory’)」または「get_stylesheet_directory_uri()」に書き換えることで、対策できるでしょう。

子テーマ制作時のトラブルシューティング

子テーマを作っている時に、あれ?という問題が起きた時のトラブルシューティングの参考もお伝えします。

CSSが反映されない

CSSが反映されない時は、以下の内容を調べてみてください。

  • サーバーが変更を反映しているか(デベロッパーツール上でも確認できるか)
  • CSSの上書きキャンセル忘れがないか

親テーマが見つかりません

親テーマが見つかりませんと出る時は、style.cssにコメントアウトした部分が影響している可能性が高いので、以下を確かめてください。

  • 全角スペースが混ざっていないか
  • Templateの表記と親テーマのTheme Nameは同じか
  • 大文字・小文字が間違えていないか

子テーマで複数のCSSを読み込ませる

親テーマの複数のCSSを上書きしたい場合、優先順位などを気にしなくてはならず、少々面倒になります。

やり方としてはほとんど同じで、functions.phpに追記をしていきます。

親テーマのCSS読み込み順と合わせるのがポイントです。

WordPressの子テーマに関するまとめ

以上になりますが、いかがでしたでしょうか?

子テーマは一度作成に慣れてしまえば、誰でも簡単に作成することができます。

特に、例えばエックスサーバー0 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめを利用しているのであれば、単純にサーバーフォルダで子テーマのフォルダを作成し、基本的にはstyleシートとfunction.phpのシートをコピーしていれておくだけで完成します。

子テーマを作成した方が、それまでのカスタマイズが無駄になりませんので、ぜひ作成して見てくださいね。最後まで読んでいただき、ありがとうございました。