TwentyFourteenの子テーマを作成してカスタマイズの準備をする

WordPress のテーマ TwentyFourteen のカスタマイズ記事です。

2014 年は WordPress 3.8 に追加されたこの新テーマをカスタマイズして使ってみようかと考えています。

スポンサーリンク

TwentyFourteen の子テーマを作成

カスタマイズは TwentyFourteen 自体を弄ってもできますが、TwentyTwelve の時と同様に子テーマを作成してからカスタマイズをはじめます。

必要な部分のみを子テーマ内でカスタマイズしていく事で大抵の事はできますし、編集したファイルだけがひとつのディレクトリにまとめられるので割りと管理も楽だなと思っています。

※ 親テーマ内のファイルと混ざらないという意味で

子テーマの作成は簡単で下記のような流れで作業します。

1. themes ディレクトリに子テーマ用のディレクトリを作成
2. 親テーマ内のスタイルシートを子テーマ内にコピー
3. スタイルシートのヘッダー部分を書き換える
4. 管理画面より作成した子テーマを適用する

ディレクトリ作成はこんな具合に。

$ cd wp-content/themes/
$ mkdir twentyfourteen-child
$ cd twentyfourteen-child/
$ cp ../twentyfourteen/style.css .

スタイルシートのヘッダー部分はこんな感じに書き換えます。

/*
Theme Name: Twenty Fourteen Child Theme
Theme URI: https://worklog.be/
Author: miura
Author URI: https://worklog.be/
Description: Child theme for the Twenty Fourteen theme for WordPress
Template: twentyfourteen
Version: 1.0

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

このパラメータの意味については下記記事にまとめています。

ここまで完了したら次は管理画面より子テーマを適用します。

こんな具合に表示されていれば OK です。

管理画面内に表示された TwentyFourteen の子テーマ

これを適用したら表示崩れ等がないか念のためチェックしておきます。下記は 3 カラムで表示した例です。

子テーマの表示確認

まだ何もしていないので、親テーマと全く変わらないと思いますがこんな具合に表示されたら OK です。

後は、functions.php を追加したりテンプレートを弄ったりというのはこの子テーマ内だけでやっていきます。

簡単ですが TwentyFourteen の子テーマ作成は以上になります。