【子テーマの使い方!】WordPressのテーマをカスタマイズする方法

WordPress初心者向けに「子テーマ」を使って、Webサイトのデザインをカスタマイズする方法を解説。バージョンの変更とともにデザインが変わらないように自分で変更する方法を紹介しています。「子テーマ」の使い方も理解できるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressでおしゃれなサイトを作成しようと思ったら、元々入っているテーマでは不十分なことも多いでしょう。自分でカスタマイズしてオリジナルのテーマにしたいと思っている方も多いのではないでしょうか。

とはいえ、自分で設定しようとするとスタイルが当たっていないなど、壁にぶつかることも多々あります。

そこで、今回は子テーマを使ってカスタマイズする方法を紹介していきます。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

20160620

 

田島メンター!!!ちょっと困ったことがあるんですけど・・・。

 

20163020-2

 

どうしたの?

 

20160620

あの、WordPressでデザインを編集してたんですけど、テーマをアップデートした途端、編集してたのが元にもどってしまいまして・・・。

 

20163020-2

あぁ、残念。親テーマをカスタマイズしてたんだね。そういうときのために、子テーマを編集しないと。

 

20160620

 

親テーマ?子テーマ?なんですか、それ?

 

20163020-2

 

今時間あるし、教えてあげるね。

 

20160620

 

はい!お願いします!!

 

子テーマとは

WordPressにははじめからいくつかのテーマがインストールされていて、

これらのテーマをカスタマイズして簡単にページのデザインを変えることが出来ます。

 

ただしテーマを直接カスタマイズしてしまうと、そのテーマがバージョンアップされた時に、変更した部分が上書きされてすべて消えてしまいます。

テーマがバージョンアップされても変更内容を保持したいときに、「子テーマ」を使うと便利です。

元にするテーマを「親テーマ」、それを元にカスタマイズしたテーマを「子テーマ」と言います。

 

実際に子テーマでカスタマイズしてみましょう。

 

テキストエディタの用意

「子テーマ」に必須なのは「style.css」というファイルです。「style.css」はテキストエディタで作成します。

文字コードが「UTF-8N」(UTF-8 BOMなし)、改行コードが「LF」で保存できるテキストエディタならどれでも問題ありません。

Windowsをお使いならterapad、MacならSublime Textなど、フリーソフトもいろいろありますのでお好みのものを選びましょう。

Sublime Textの使い方に関しては以下をご覧ください。

Sublime Textの使い方

 

[PR] WordPressで挫折しない学習方法を動画で公開中

style.cssの約束事

次にカスタマイズしたいテーマ(親テーマ)を選びます。

WordPressの管理画面(ダッシュボード)の「外観」から「テーマ」を選択してページを表示させると、インストールされているテーマがわかります。

 

今回は「twentyfifteen」を例にします。

最初にテキストエディタに以下を記述します。「/*」「*/」も忘れないようにしてください。

/*
 Template:twentyfifteen
 Theme Name:twentyfifteen_c1
 */
@import url(“../twentyfifteen/style.css”);

「Template:」の後ろが親テーマの名前、「Theme Name」の後ろが子テーマです。

子テーマは任意の名前でOKですが、どのテーマの子テーマか分かったほうが便利だと思います。

 

今回は、twentyfifteenの子テーマなのでchildのcを使い、c1としました。

「@import url~」の部分は、親テーマのディレクトリの場所を表します。

わかりづらくなるので、今は「Template:」に書いたテーマ名をそのまま書くと覚えておくとよいでしょう。

 

ここまで出来たら一度保存しておくと、やり直すときに便利です。

保存するときの名前はstyle.css(拡張子が.css)です。

文字コードを「UTF-8N」(UTF-8 BOMなし)、改行コードを「LF」で保存するのを忘れないで下さい。

 

カスタマイズしたい箇所を記述

先ほど作ったstyle.cssにカスタマイズしたい箇所を記述してみましょう。

「twentyfifteen」ではページの背景色が#f1f1f1に指定されています。

これをブルーに変えてみましょう、style.cssに以下を記述します。

すでに記述してある @import url(“../twentyfifteen/style.css”); から1行あけて以下のように記述します。

#21578cがカラーコードになので、これを変えれば背景の色を自由に変更できます。

body {
  background: #21578c;
}

 

FTPクライアントでアップロード

変更したい箇所をすべて記述したら、FTPクライアントでお使いのサーバーにアップロードします。

FTPクライアントも「FFFTP」や「FileZilla」などフリーソフトが利用できます。

「wp-content/themes」ディレクトリ(フォルダ)に、子テーマの名前で専用ディレクトリを作り、そこにstyle.cssをアップロードします。

 

アップロードを終えたら、WordPressの管理画面のテーマのページに、子テーマの名前があるか確認して下さい。

あとは子テーマを有効化すれば、カスタマイズした箇所が反映されます。

 

以上のような手順でテーマのカスタマイズが行えるはずです。

FTPクライアントなど、自分でサーバーの管理画面に入るなどの必要がありますが、特に難しいことはありません。

CSSを自分でも書けるようになれば、好きなデザインにレイアウトを整えられると思いますので、ぜひ試してみてください。

無料で使えるWordPressのテーマ30選も合わせてご覧ください。

ぜひ、WordPressの使い方を覚えましょう!

 

20160620

 

なるほど、カスタマイズする時は子テーマを編集したほうがいいんですね。

 

20163020-2

 

そうだね。アップデートの影響とか受けずにカスタマイズできるからね。

 

20160620

 

わかりました!今後は子テーマで調整していくことにします!!!

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。