Twentyfifteenをカスタマイズする


WordPressは世界中のユーザーが多様なテーマファイルを公開しているので、好みのテーマを見つけて自分好みの見栄えにすることができます。

でもやはり100%自分の趣味に合致させるためには、自分でテーマを作るしかありません。
てことで、自分も公式テーマの“Twentyfifteen”をカスタマイズして自作テーマを作ることにしました。

なぜTwentyfifteenを基にしたかというと、

1. その時点で最新の公式テーマだから
2. モバイルファーストのレスポンシブデザインだから
3. HTML5で作られているから
4. 子テーマはワケがわからないから
5. 初心者だから

最新の公式テーマ

WordPressは頻繁にバージョンアップが行われ、新たなテンプレートタグが誕生しています。
Twentyfifteenでも最新のタグが使用されていて、投稿の表示方法が新しいアプローチになっていたりします。
そのタグがカスタマイズ性のあるものなのか、従来のほうが融通が効くのか、試行錯誤しながらテンプレートファイルと格闘していくのが、WordPressの勉強も兼ねた楽しみでもあります。

モバイルファーストのレスポンシブデザイン

レスポンシブデザイン用のCSSを書いていく場合、基本の設定をブレイクポイントごとに上書きしていくわけですが、Twentyfifteenでは以下のとおり小画面から設定を行っています。

1 Mobile Large 620px
2 Tablet Small 740px
3 Tablet Large 880px
4 Desktop Small 955px
5 Desktop Medium 1100px
6 Desktop Large 1240px
7 Desktop X-Large 1403px

また基本的な設定はシンプルなので、すべてに共通の設定をリセットの後に記述することでどのサイズの画面でも使いまわすことができます。

以前Twentyfourteenを基にして作ろうとしていた時は、初のレスポンシブデザインだったこともありリンク色(ビビッドな緑)があちこちに記述されていて探し回るのに苦労しましたが、Twentyfifteenはスムーズにこちらの意図する表示になってくれる印象です。

HTML5で作られている

2014年10月にとうとうHTML5が勧告され、正式に標準の規格としてHTML5を使えるようになりました。

もうサポートしていないOSとブラウザに気を遣う必要はないのね。さらにコーダーの敵、IE自体も淘汰されることになったようだし。
Edgeがどういう仕様になるのかまだわかりませんが、HTML4なんて忘れてしまいましょう。 :笑:

子テーマは作らない

WP Codexではテーマをカスタマイズする場合は「子テーマ」を作成することを推奨しています。

WordPress Codex 子テーマ

「子テーマを作る」とは、基となる親テーマには手を触れず、カスタマイズしたいところだけ上書きするテーマファイルを別途作成するということです。

そうすることで、親テーマがバージョンアップした際には、子テーマは全くそのままでも最新データが反映されるから便利ですよ、という意図のようですが、

バージョンアップで今までなかったものがいきなり表示されたらどうすんの :しょぼーん:

というのが個人的な意見です。
実際、自分がカスタマイズを始めた後のバージョンアップでは、Media Queriesの前に“widecolumn”とかいう設定が出現していました。
もちろん作り始めたテーマには今でも反映させていません。

多分子テーマのほうが楽な人もいるかと思いますが。そこんところはお好みで。

初心者だから既存テーマをいじくりたおす

Q&Aサイトでの回答者の敵、「初心者で~す。わかりやすく教えてくださぁい(笑) 」
笑うなコラ。 :やれやれ:

ちょっとわからなくなると自分で調べず人に聞く。それで覚えられるわけないじゃんと思うんですが。

自分はまだまだ仕事としてWordPressを扱えるほどの技術もない初心者なので、ひたすら既存テーマをいじって調べまくって自己解決しないと覚えられません。
人に聞いたことってすぐ忘れますが、間違ったことを調べて自己解決した場合は忘れにくいですよね。

てことで、次回テーマを作る時は、まっさらなブランクテーマから作れるようになりたいなという希望を持ちつつ、今回は徹底的にTwentyfifteenをカスタマイズしたのでした。
これからカスタマイズ箇所を小分けにして掲載していきます。