【画像付き解説】子テーマを作成してWordPressのカスタマイズを楽にしよう!

2015-10-01Web制作

こんにちは、とみーです。

WordPressのテーマって本当に色々ありますよね。
とても気に入ったテーマがあってもセンスって人によるもので、自分好みにしたい箇所ってあると思うんですよ。

それで「いざカスタマイズ!」と意気込み完成したとしても、テーマのバージョンアップによってそれは0に戻ってしまいます。せっかく時間をかけてカスタマイズしたのに水の泡に。

それを防ぐために、カスタマイズ前に子テーマを作成することをおすすめします。

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
子テーマ – WordPress Codex 日本語版

中には子テーマもダウンロードできるサイトがありますが、大半は親テーマのみのダウンロードです。

この記事は子テーマがないテーマに、自分で子テーマを作成しよう!という趣旨のページです。

スポンサーリンク

子テーマを作成するメリット

上で書いてしまいましたが、子テーマを作成するメリットは

親テーマがバージョンアップしても、自分がカスタマイズしたデザインはそのまま

これに尽きると思います。

WordPress Codex 日本語版のページでは開発時間だったりテーマの開発を学べるだったり書いてますが、そんなことは二の次です。

手順を画像付きで解説! 子テーマの作成方法

私が以前使っていたミニバード(現行:スターサーバー)  というレンタルサーバーではファイルマネージャーが用意されているので、その方法を説明します。

※2017年5月にサーバーをミニバードからMixHostに移転しました。

お借りしているレンタルサーバーにファイルマネージャーがない人はFFFTP というソフトがお勧めです。

子テーマのフォルダを作成する

まずサーバーにフォルダを作成するところから。

child_theme01

サーバー管理ツールにログインし、FTPアカウント設定をクリックします。

右画面にドメイン一覧が表示されますので、該当のドメインを選択。

child_theme02

するとFTPアカウント一覧が表示されますので、WebFTP欄のログインをクリックしてログインします。

child_theme03

ログインしたら左側にあるディレクトリツリーから、wp-contentフォルダの中のthemesフォルダを探してクリックします。

child_theme04

そしたら上部にある新規作成をクリックします。

child_theme05

名前を入力してフォルダ追加をクリックします。
今回ADELLEというテーマの子テーマを作成したいので、名前はadelle-childにしました。

child_theme06

無事フォルダが追加されました。

子テーマのスタイルシート・style.cssをファイルを作成する

次はstyle.cssを作成したいと思います。

child_theme04

ディレクトリツリーで先程作成したフォルダを選択し、再び新規作成をクリックします。

child_theme07

style.cssと入力してファイルを追加をクリックします。
style.cssは固定です。変えちゃダメです。

child_theme08

style.cssが出来ましたので一番左の編集アイコン(紙とペンのやつ)で編集します。

child_theme09

Chromeのせいか、エディターと上のボタンの間にいらないスペースありますね・・・。気にしないことにしよう。

スタイルシートの一番上にはそのテーマの情報を書く必要があります。

/*
Template: 親テーマのフォルダ名(必須)
Theme Name: 子テーマの名前(必須)
Author: 自分の名前
Version: バージョン(無くても全然問題ないです)
*/

子テーマは親テーマのカスタマイズしたい部分だけ書くのが普通なので、親テーマを子テーマにインポートしてあげる必要があります。

@import url("../adelle/style.css");

この1行で親テーマを読み込みます。adelleの箇所はご自身の親テーマのフォルダ名に合わせて変更してくださいね。

更に、本当に子テーマが適応されているのか確認するために背景を灰色に変更しましょう。ずっと灰色にするつもりないので確認したらこの3行は削除して構いません。

body{
background-color:#cccccc;
}

child_theme09

以上でOKです。改行コードをCR/LFに変更して上書き保存して閉じます。

ダッシュボードから子テーマを有効化する

child_theme10

WordPressのダッシュボードに戻ります。
外観 > テーマ をクリックすると、作成した子テーマが表示されているはずですので有効化します。

これで無事に子テーマの設定が終わりました!
サイトを確認してみると、背景が灰色になっているので無事成功したようです。

有効化したので以降スタイルシートは外観 > テーマの編集 から編集可能です。
背景は白に戻しておきましょう。

親テーマのインポートは公式が別の方法を推奨している件

@import url(“../adelle/style.css”); で親テーマを読み込みましたが、functions.phpを作成してそのプログラムから読み込む方法を公式では推奨しています。

とはいえ、style.cssで読み込んでも問題なく動きますので大丈夫です。

 

さて、いかがでしょうか。こんなに簡単に子テーマが作成できてしまうんです。カスタマイズが広がります。

スタイルシートって何? という方も、自分のサイトが自分好みに出来たら嬉しいですよね!

ぜひ子テーマを作成して、スタイルシートとは何なのか勉強してみてください。そんなに難しくないですよ。

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます