WordPressのカスタマイズを楽に! 子テーマを作成しよう

2015-10-01WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

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

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

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

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

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

スポンサーリンク

メリット

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

親テーマがバージョンアップしてもデザインはそのまま

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

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

子テーマの作成方法

さて、子テーマの作成に入ります。

フォルダを作成する

まずサーバーにフォルダを作成します。

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

※2017年5月にMixHostに移転しました。

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

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

child_theme01

右画面にドメイン一覧が表示されますので、該当のドメインを選択。するとFTPアカウント一覧が表示されますので、WebFTP欄のログインをクリックしてログインします。

child_theme02

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

child_theme03

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

child_theme04

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

child_theme05

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

child_theme06

ファイルを作成する

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

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

child_theme04

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

child_theme07

style.cssが出来ましたので一番左の編集アイコンで編集します。

child_theme08

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

child_theme09

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

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

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

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

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

child_theme09

子テーマを有効化する

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

child_theme10

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

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

公式はfunctions.phpでのインポートを推奨している件

@import url(“../adelle/style.css”); で親テーマを読み込みましたが、functions.phpを作成してそのプログラムから読み込む方法を公式では推奨しています。
とはいえ、style.cssだけでも(今のところ)問題なく動きますので大丈夫です。

まとめ

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

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

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