ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

WordPressで子テーマを作って既存の親テーマをカスタマイズする方法と理由

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

WordPressをカスタマイズしたいけどどうすればいいか分からない。。。

子テーマをカスタマイズすれば良いと聞いたことがあるが、どうやって子テーマを作るの?

あと、なんで親テーマをカスタマイズしたらいけないか理由も教えて欲しい。

今回の記事では、WordPress初心者向け子テーマを作って既存の親テーマをカスタマイズする方法をご紹介し、なぜ親テーマをカスタマイズしてはいけないか理由をご紹介します!

WordPressをカスタマイズする際には、この子テーマを必ず作ってテーマを編集する必要があり、これをしないと、、、

  • 親テーマをアップデートした際にカスタマイズしたデータが消える
  • サイトの表示がうまくいかない

このような原因にもなります!

こんな方にオススメ
  • WordPress初心者の方
  • WordPressの親テーマをカスタマイズしたい方
  • WordPressの子テーマの作り方を知りたい方

WordPressについてあまり詳しくない方は下記の記事をまずはご覧ください!

→ 【初心者向け】WordPressとは?できること、使う前の基礎知識を解説

スポンサーリンク

WordPressの子テーマとは?作る理由

WordPressのテーマにはそもそも2つのタイプがあり、、、

  • 親テーマ・・・メインのテーマ
  • 子テーマ・・・カスタマイズ用のテーマ(親テーマを部分的に編集する)

この2つのタイプがあります。

人気のWordPressテーマや、ブロガー向けのWordPressテーマにはこの子テーマというのがほとんど作られており、親テーマ同様にインストールして使用することができます。

子テーマがあるWordPressテーマの例
  • Cocoon:最強のブロガー向け無料のテーマ(僕のサイトでも使用しています)
  • JIN:人気No1のブロガー向け有料テーマ

プログラミング知識のない、ブロガー向けのWordPressテーマには子テーマがあるケースが多いですが、商用利用可能のテーマやビジネス向けのテーマはオリジナル性を持たせるためプログラマーがカスタマイズする必要があるので、「子テーマは自分で作ってね!」というケースが多いです。

子テーマがないWordPressテーマの例
  • Xeory:バズ部が提供する商用利用可能の無料テーマ
  • Bizvektor:ザ!コーポレートサイトを作りたいときに使うシンプルな無料テーマ

親データでカスタマイズするとアップデート時に問題が!

ネコ君
ネコ君

なんで親テーマでカスタマイズしたらダメなの?

Hiko
Hiko

親テーマを直接編集すると後からトラブルが起きてしまいます!

WordPressのテーマは、開発者が定期的にアップデートを行います。

アップデートする際には親テーマを更新するわけですから、もし親テーマをカスタマイズしてしまうと、アップデートする際にカスタマイズ内容が更新されてしまいます。

つまり、子テーマを作ってカスタマイズすることにより、親テーマをアップデートしてもカスタマイズ内容が上書きされることがありません。

その他のメリットとしては、子テーマをカスタマイズした際に、もし何か表示崩れが起きたり記事が正しく表示されなくなってどうしようもないときでも親テーマを有効化すればデフォルトの状態に戻すことが可能です。

子テーマでカスタマイズすることにより、親テーマのアップデートの際にカスタマイズ内容が上書きされることを防ぐことができる!

スポンサーリンク

WordPressで子テーマを作って既存の親テーマをカスタマイズする方法

Hiko
Hiko

では、実際に手を動かしながら子テーマを作っていきましょう!

とっても簡単なので、安心してください!

子テーマを作ってカスタマイズする大まかな流れ
  1. 子テーマのフォルダを作る(親テーマ名+-child)
  2. style.cssを作る
  3. functions.phpを作る
  4. テーマ管理画面で有効化
  5. 編集したいファイルを編集していきカスタマイズする

1.子テーマのフォルダを作る(親テーマ名+-child)

まず始めに、子テーマのファイルをまとめるために子テーマのフォルダを作成します。

(※今回はバズ部のXeoryExtensionを例に解説していきます!)

themesフォルダの中に、親テーマのフォルダが入っているので同じディレクトリの場所に、

親テーマの名前+ -childで名前をつけて子テーマフォルダを作成します。

この子テーマフォルダの中に、カスタマイズしていくファイルを格納していきます。

2.style.cssを作る

次に作成した、子テーマフォルダの中(xeory_extension-child)にstyle.cssファイルを作成します。

そして作成したstyle.cssファイル内に下記のコードを記入します!

@charset "UTF-8";
/*
Theme Name: XeoryExtension-child
Description: Xeoryの子テーマ
Author: バズ部
Template: xeory_extension
*/
/* all display
-------------------------------------------------- */
Theme Name子テーマの名前を記入します(必須)
Description子テーマの説明文(必須ではない)
Author開発者の名前(必須ではない)
Template親テーマのフォルダ名(超重要)

style.cssの冒頭にこのように記入します。

Templateの部分は、一つでもスペルミスがあると正しく子テーマが認識されないので、注意してください!

3.functions.phpを作る

次に、親テーマのデータを継承するために子テーマフォルダ内にfunctions.phpファイルを作りコーディングしていきます。

そして、作成したfunctions.phpに下記のコードをコピペします。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css、functions.phpに記載するコードは、

Child Themes | Theme Developer Handbook | WordPress Developer Resources

こちらのWordPress公式サイトから引用しています。

Hiko
Hiko

これで、子テーマの完成です!次に管理画面から有効化します!

4.テーマ管理画面で有効化

次に作成した子テーマフォルダをWordPressの管理画面から有効化していきます。

このように、管理画面に進むと子テーマが表示されていると思うので、有効化します。

子テーマが表示されていない場合は、style.cssとfunction.phpの記載ミスが原因なので、もう一度チェックするようにしましょう!

5.編集したいファイルを編集していきカスタマイズする

主にカスタマイズする内容として多いのが、、、

  • style.cssを編集してデザインをカスタマイズする
  • header.phpやfront-page.phpのHTMLやPHPコードを編集する

この2つが主にカスタマイズする内容だと思います。

この.cssファイルと.phpファイルをカスタマイズする際には特徴と注意点があって、、、

  • style.css→親テーマのstyle.cssに追加する形になる
  • .phpファイル→親テーマの.phpファイルに上書きする形になる

この特徴をしっかりと覚えておきましょう!

style.cssに追加でコードを書きカスタマイズ

「ここの背景色を変えたいな!」「このレイアウトを変更したいな!」などのスタイルをカスタマイズする際には、子テーマ内のstyle.cssにCSSでコーディングしていけばOKです!

←このように好きなスタイリングをしていってデザインをカスタマイズしていきます!

header.php(.php系のファイル)をカスタマイズ

header.phpなどの.phpファイル系をカスタマイズする際にはいくつかポイントがあります。

  1. 親テーマの.phpファイルを子テーマ内に複製する
  2. htmlやphpを編集していく

このように、新規で子テーマ内にheader.phpと作成するのではなく、親テーマのheader.phpを複製する必要があります。(コピペでもOK)

まず始めに、カスタマイズしたい.phpファイルを親テーマのフォルダ内からコピーします。

次にそのコピーした、.phpファイルを子テーマのフォルダ内にペーストします。

あとは、好きなようにHTMLやPHPのコードを編集していけばOKです!

このように、メインのTOPページに要素を追加したい場合には、.php系のファイルを編集する必要があります!

WordPress子テーマの作り方 まとめ

ネコ君
ネコ君

これで、WordPressで自由にカスタマイズできるようになったよ!

いかがでしたでしょうか!!

WordPressをカスタマイズする際には、必ず子テーマを作ってカスタマイズする!

これだけはしっかりと覚えておきましょう!

最後までご覧いただきありがとうございました!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました