WordPress子テーマって何? 作り方は? 図で超シンプルに解説

こんにちは! ライターのナナミです。

少しずつWordPressの使い方に慣れてくると、

「ここの線の色だけ変えたい…!」
「固定ページのデザインを変更したい」

など自分好みにカスタマイズを加えたいと思いますよね。

WordPressをカスタマイズすることこそ、WordPressユーザーにとっての醍醐味です。

CSSでカスタマイズする方法もありますが、テーマのアップデートが行われた際に消えちゃう可能性があります!

そうならないためには、WordPressの子テーマを作るのがオススメです。

この記事では、WordPressの子テーマを利用するメリット作り方を紹介します。

【基礎】子テーマとは?
【基礎】子テーマを使うメリット
【基礎】子テーマを作ってみよう
【発展】そのテーマ、子テーマかも?

子テーマを使ったテーマカスタマイズ方法、ばっちり伝授しますね!

子テーマとは?

WordPressのテーマ、いろんな種類がありますよね。
そんなテーマを基本として、一部の記述を上書きするような形で作成するのが子テーマです。

例えば、下記のようなテーマがあったとしましょう。

このテーマのレイアウトは好きだけど、真ん中の星は別の色がいい…

なんて状況の時が子テーマの出番です。

基本のテーマにCSSを上書きするような感じで、テーマをカスタマイズすることができるのです。

この時、基本のテーマのことを親テーマと言います。

子テーマを使うことで、親テーマに影響を及ぼさずにカスタマイズができるというわけです。

子テーマを使うメリット

ではそんな便利な子テーマ、使うとどんなメリットがあるのでしょうか?

大きく分けて2つのメリットがあります。

親テーマを元にするからカスタマイズが楽

元々完成されているテーマを元にして作るので、カスタマイズするのがとっても楽です。

自分好みのテーマにするとなると、1から作らないといけないんだろうか…

と思っていた人もこれで安心。
記事を表示するための難しいコードを書いたりする必要がありません。

1から作るよりも楽に、自分好みのテーマに仕上げることができます。

親テーマが更新されても上書きされない

でも別に親テーマを直接変更しちゃってもいいんじゃない?

と思う方もいるかもしれませんね。

もちろん、それでもカスタマイズをすることは可能です。

しかし親テーマを直接カスタマイズすると、親テーマがバージョンアップした時にカスタマイズ内容が消えてしまうのです。

要は上書き保存されちゃうわけですね、悲しい。

しかし子テーマは別ファイルなので、親テーマがいくら更新されても、上書きされたりすることはありません

自分好みのカスタマイズを、そのまま使うことができるのです。

子テーマの作り方

子テーマがどのようなものかがわかったところで、早速子テーマを作ってみましょう!

ちょっとコードを書いたりしますが、基本的にはコピペとちょっとの変更でOKです。
プログラミングは苦手だ…という人も、安心して作っちゃってください!

子テーマ用のフォルダを作ろう

まずは子テーマのファイルを入れるためのフォルダを作りましょう。

作る場所は、親テーマと同じディレクトリ、themesフォルダです。

フォルダ名は英数字ならなんでも構いません

今回はわかりやすいように、childという名前のフォルダを作りました。

style.cssを用意しよう

次に、style.cssというファイルを用意していきます。

このファイルにカスタマイズのためのCSSを書いていくのですが、子テーマの場合それ以外の役割も持っています。

ひとまず、ファイルを作って下記のコードをコピペで貼っちゃいましょう。

CSS

このコードは、このフォルダをテーマとして認識させる目的と、親テーマと子テーマを紐づける目的で書きます。

なので、親テーマと書かれている部分には親テーマの名前を、子テーマとなっている部分には子テーマの名前を書くようにしましょう。

子テーマの名前はここで決定されるので、好きな名前にしても大丈夫です。

実はここで他にも色々な情報書いてもいいのですが、個人で使う場合には不要なものなので割愛します。
詳しくは、下記のリファレンスを参照してください。

>>子テーマのリファレンス

functions.phpを用意しよう

さらに親テーマと子テーマを紐づけるために、子テーマのfunctions.phpを用意していきます。

ファイルを作成したら、下記のコードをコピペするだけでOKです。

PHP

ここまでの作業を行なうと、子テーマのフォルダにはstyle.cssfunctions.phpがある状態になります。

子テーマを有効化しよう

style.cssとfunctions.phpの準備ができれば、管理画面で子テーマを選択できるようになっています。

ここで有効化を押せば、子テーマが適用された状態となります。

今は子テーマのCSSを何も書いていないので、親テーマそのままの見た目になります。

子テーマ用のCSSを書こう

ここからがカスタマイズの本番!
子テーマのstyle.cssに、子テーマ用のCSSを書いていきます

試しに、背景色を変えてみましょう。

CSS

色が変わりましたね!

こんな感じで、あとはどんどんカスタマイズを進めていくだけ!
CSSの知識があれば、問題なく進められますね。

CSSもちょっとわからない…
という方は、下記の記事などで確認しながらカスタマイズしてみてください。

>>サイトの見た目を自由に変更!CSSの使い方

親テーマへの影響はない!

子テーマのカスタマイズをした状態で、ちょっと試しに親テーマに戻してみると…

元の状態に戻りました。
親テーマへ影響がないことが確認できますね。

そのテーマ、子テーマかも?

子テーマは個人でのカスタマイズ用の仕組みと思われがちですが、配布されているテーマでも子テーマを活用しているものがあります。

例えば下記のテーマ、ポップでとても可愛いですね。

One X

https://ja.wordpress.org/themes/one-x/

実はこれ、下記のテーマの子テーマなんです。

OneLine Lite

https://ja.wordpress.org/themes/oneline-lite/

だいぶ雰囲気がちがいますね!

先ほどのポップなテーマを使うには、親テーマであるこちらのテーマもダウンロードする必要があります。
テーマを選ぶ時など、確認するようにしてみてくださいね。

まとめ

いかがでしたか?

子テーマを使ったカスタマイズは、上書きされたりすることなく安心安全に使うことができます
ぜひ活用して、自分好みのカスタマイズを作ってくださいね

おすすめのコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

「何の言語から勉強すればいいかわからない・・・」そんなあなたに質問に答えていくだけで、何の言語を学べば良いのか診断いたします!未経験から6ヶ月でプログラミング習得に向けた学習プランが1分で分かる!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

3000名以上来場の人気セミナーが開催決定

18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。

0からプログラミングを習得し、フリーランスエンジニアになる方法プログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。

  • 日付:4/20(土),4/27(土)
  • 時間:14:00〜17:35終了予定
  • 場所:当社 道玄坂オフィス
  • 住所:〒150-0043 東京都渋谷区道玄坂2丁目11-1 Gスクエア渋谷道玄坂 4F *Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
  • 参加費:無料
  • URL:https://seminar.sejuku.net/
詳しくは下の画像をクリックして弊社セミナー内容をご確認ください。

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。