Twenty Fourteenの紹介と子テーマ

WordPressのバージョンが3.8にアップデートされ、デフォルトテーマがTwenty Fourteenへと変更になりました。
このテーマ、超シンプルでいい感じです！
WordPressの公式テーマですので、リスクコードが含まれている心配もないですし、何より使いやすそう”です！
本記事では、Twenty Fourteenを紹介し、子テーマを作る準備をしたいと思います。

Twenty Fourteenは標準3カラム

あれ？確かめてみたら2カラムな感じなんだけど？？
と思う方もいらっしゃいますよね。

そうなんです。
ダッシュボードで設定を一切変えていないデフォルト状態ではTwenty Fourteenは2カラムに見えます。

しかし、ダッシュボードのウィジェット管理画面でコンテンツサイドバーになにかウィジェットを追加すると…
ご覧のとおり、3カラムになります。
コンテンツサイドバーの部分にウィジェットがなにも設定されていないと、記事内容を表示する部分の横幅が広がり構造が変化します。
レスポンシブな設計になっているのでとても便利です。

アイキャッチ画像の表示が特徴的

Twenty Fourteenの最大の特徴は、アイキャッチ画像の表示のさせ方だと思います。
ピンク色の上にSalty WordPressと書かれている画像がアイキャッチ画像です。
記事タイトル表示部分がアイキャッチ画像に少し重なるように配置されています。
このアイキャッチ画像表示枠の横幅は672pxであり、それ以下のものをアイキャッチ画像として設定するとTwenty Fourteenであらかじめ用意されているグレーの斜線の画像が隙間を埋めるように表示されます。毎回意識して、所定のサイズのアイキャッチ画像を準備できれば投稿一覧ページはとてもオシャレになると思いますが、少々手間がかかるような気もします。

スマホなどに標準対応

まだすべてのデバイスで確かめたわけではありませんが、スマートフォンなどのデバイスに標準対応しており、それぞれのデバイスに最適化された表示をします。
私のiPhone 4Sでは記事一覧のトップページはタイトル一覧が表示されました。
標準対応はかなり嬉しいですね！

Twenty Fourteenの子テーマを準備する

さて、デフォルトでもかなり使いやすくオシャレなTwenty Fourteenですが、すべての状況に合うわけではありません。
子テーマを準備しカスタマイズしていきましょう！

WordPressの子テーマとは、直接Twenty Fourteenを修正するのではなく、修正必要部分だけを子テーマとしてまとめて管理していく方法です。
直接修正するのと表示結果はまったく同じになりますが、子テーマを作成した方が管理がしやすいと思います。
子テーマの作成はとても簡単にできますので、ぜひチャレンジしてみてください！

子テーマディレクトリを作成

WordPressのテーマがあるディレクトリ内に任意の名前で新たにディレクトリを作成します。
twentyfourteen-childというディレクトリを作成したという仮定で話をすすめます。

style.css作成

twentyfourteen-childディレクトリ内にstyle.cssというファイルを作ります。
そしてstyle.cssには以下の記述をします。/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');この記述でTwenty Fourteen Childというテーマ名でTwenty Fourteenの子テーマが完成です。
この状態ではTwenty Fourteenと全く同じです。

これにて子テーマにてTwenty Fourteenをカスタマイズする準備が整いました。
わくわくですね！

感想

私はこの記事作成現在ではTwenty Elevenを子テーマでカスタマイズして使用しています。
今後も本ブログではTwenty Eleven子テーマカスタマイズを使用予定なのですが、別のブログをWordPressにて立ち上げるタイミングでふと新しいデフォルトテーマが気になりました。
そして、リリースされたばかりのTwenty Fourteenを試してみると．．．
これが想像をはるかに超えてよかったんです！

まだまだTwenty Fourteenのことはあまり判っていませんが、ぼちぼちカスタマイズをして、その内容を本ブログにてシリーズ化していけたらと思います。

関連記事