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

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

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

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

 

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

 

 

子テーマとは

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の使い方を覚えましょう！

 

 

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