wordpressのテーマ更新対策、子テーマを作成しよう!

wordpress-theme

wordpressにはテーマという物がある。テーマとは”テンプレート”と考えて欲しい。それではどのようなテーマがあるのだろうか?

ダッシュボードの”外観“というメニューから”テーマ“を選択しよう。このような画面が表示される。

wordpressで子テーマを作成する

画面には公式テーマが表示されている。これらの中から好きなテーマを選び使っていく。これ以外にも、検索すると個人が作成したテーマもたくさん見つかる。しかし公式テーマの方が脆弱性を心配する必要が少ないので、最初は公式テーマを使用することをお勧めする。

ここでひとつ注意点がある。

テーマには更新をする時がある」という事だ。そして更新をしてしまうと、それまで一生懸命テーマをカスタマイズしてきても、全てが初期状態に戻ってしまうのだ。

ではどうしたらよいのだろうか?

解決策として、テーマの分身”子テーマ“を作成する、という方法がある。この方法を使うと、公式テーマ(親テーマ)を更新しても子テーマは初期状態に戻らず、また親テーマの更新も子テーマに反映される。

子テーマを作成しよう!

ffftpを使いワードプレスのプログラムが入っているフォルダを確認して欲しい。そして”wp-content>themes“と階層を降りていこう。

そこにはテーマのフォルダが用意されている。”twentytwelve“とか”twentythirteen“とか”twentyfourteen“というフォルダの事だ。これが公式テーマのプログラムが入っているフォルダだ。

ここで”child“という新しいフォルダを作成する。そして”style.css“という名前の空のファイルを作成してchildフォルダの中にアップロードしておこう。

フォルダとファイルの構成はこのようになる。

wordpressで子テーマを作成する

注意:childフォルダにアップロードするstyle.cssは何も書いていない空のファイルを用意しよう。公式テーマフォルダにある、既にプログラムが書かれているstyle.cssをそのまま持ってきてchildフォルダにアップロードするとウェブサイトの画面表示がおかしくなるので注意しよう。

これで子テーマの準備が完了した。

ダッシュボードの”外観“というメニューから”テーマの編集“を選択しよう。このような画面が表示される。

wordpressで子テーマを作成する

編集するテーマを選択“のセレクトボックスより”child“を選択して”選択“のボタンを押そう。

そうするとchildテーマの編集画面になる。ここでテーマを編集していく。右側の”スタイルシート(style.css)“を選択しよう。

wordpressで子テーマを作成する

空のファイルをアップロードしたので、このような何も書かれていない空欄が表示されるはずだ。

この空欄部分に

/*
Theme Name: Child
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

と記述する。これはtwentytwelveのスタイルを受け継いだ子テーマを作成する、という宣言だ。※今回はtwentytwelveというテーマの子テーマを作成する方法で解説する。

wordpressで子テーマを作成する

こんな感じになる。twentytwelve以外のテーマの子テーマを作成する場合は、twentytwelveの部分を、そのテーマ名に書き換えよう。

宣言文の入力が完了したらページ下部の”ファイルを更新“のボタンを押そう。

これで子テーマの制作が完了した。今後、文字の大きさや枠の大きさなどのスタイルを調整する場合は、このstyle.cssの宣言文の下にCSSコードを追加していく。

子テーマでサイト制作する準備をしよう。

ダッシュボードの”外観“というメニューから”テーマ“を選択しよう。

wordpressで子テーマを作成する

そこに”child“というテーマが表示されているはずだ。このchildというテーマで”有効化“のボタンを押そう。

ウェブサイトを子テーマで作成する準備が整った。これで親テーマを更新しても子テーマは初期化されないし、親テーマの更新が子テーマにも反映される。これで安心してカスタマイズしていく事ができる。

補足:今後、style.cssファイルだけでなく、他のファイルも操作していく事になる。例えばheader.phpを操作するとしよう。このような”PHPファイル“を操作する時は親テーマのフォルダ(twentytwelveが親テーマの場合はtwentytwelveフォルダ)の中にあるPHPファイル(header.phpの場合はheader.phpそのもの)をコピーして子テーマのchildフォルダの中に持ってくる。PHPファイルの操作は、childフォルダに持ってきたPHPファイルの中のコードを削除したり改変したりして操作していく。

PHPファイルは、空のファイルを用意するのではなく、既にコードが書かれている親テーマフォルダの中にあるPHPファイルをコピーして持ってくる。間違いやすいので気をつけよう。

1つ例外がある。”functions.php“というファイルだ。これは最重要ファイルだ。このファイルを操作する時は、style.cssのようにコードの書いていない空のfunctions.phpファイルを用意してchildフォルダの中にアップロードしよう。functions.phpを操作する時は、空のfunctions.phpファイルに必要なコードを追記していく。

注意:functions.phpの扱いは注意が必要だ。記入するコードを間違えると画面表示がおかしくなる事がある。気をつけよう。