twentysixteenをカスタマイズしよう！

WordPress構築のやり方1. 一般的に配布されているテーマを使用する2. フルスクラッチ（全部自分で最初から）でテーマを作成する3. デフォルトテーマをカスタマイズする

一般的に配布されているテーマを使用する

• デザインが豊富• クライアントに開発前からイメージを伝えやすい• 工数が少なくて済む（ラクチン）

メリット

• プラグインとのコンフリクトや細かい箇所での不具合が起きやすい• 多様な端末、多様なブラウザできちんとブラウジングできるテーマは意外と少ない• オレオレなコードなので分かりにくく、分かったとしてもそのノウハウが将来的にそれほど役に立たない• 現在は非推奨になっている書き方が残っていたりする• 表示が遅いものが多い• WordPressコアがバージョンアップしたときに不具合が起こったり、悪い場合には使えなくなる可能性がある

デメリット

フルスクラッチでテーマを作成する• スキルさえあればデザインも機能も自由自在• 自分で作ったものだから分かりやすい• 土台となるテーマをひとつ作って使い回しも可能

メリット

• スキルがかなり必要• 工数もけっこうかかる• クライアントにイメージを伝えにくい• 発見がない

デメリット

デフォルトテーマをカスタマイズする

• プラグインとのコンフリクトがほとんど起きない• 最新の技術を取り入れているのでコードを読むだけで勉強になり、勉強したことを次に生かせる（コードの一行一行に意味がある）• ただの最新ではなく、昔からの技術の積み重ねなので、古い IEでも表示が崩れにくい• WordPressコアとのコンフリクトが基本的には起きないので、将来のバージョンアップも安心• 良いテーマとは何か、を知ることができ、一般のテーマを選ぶときの基準にもなる

メリット

• みんながよく知っている、たくさん使われているテーマなので、デザインを大幅にカスタマイズしないと無個性になりがち

デメリット

デフォルトテーマをどうやってカスタマイズする？• phpのみ使って、 cssと jsは自分で書く（大変だけどデザインと機能の幅は広がる）• デフォルトテーマを親テーマとして、子テーマを作成する（将来のバージョンアップ対応を考えるとオススメのやり方。しかし、子テーマで親テーマを上書きするのはそれなりに大変で、デフォルトテーマを匂わせないデザインに仕上げるのは難しい）• css、 jsもデフォルトテーマを土台にする（簡単だし勉強になる。オススメ！）

デモを見てみよう

カスタマイズ前の twentyfifteenデモはhttps://twentyfifteendemo.wordpress.com

カスタマイズ前の twentysixteenデモはhttps://twentysixteendemo.wordpress.com

style guide や投稿も参考になります

テンプレートファイル構成カスタマイズ時に特に重要なのは•functions.php•style.cssのふたつのファイルまずこのふたつのファイルから、要らない箇所を削除するところから始めます。

functions.phpから削る•post formats•font関連（ enque, function, editor-style.css）

•custom-background-image•customizer

style.cssを修正する•名前を変える（必ず）•黒い枠を取る（ 453行目あたり、 2693行目あたりの 2箇所）•font-sizeと font-style•サブメニューの三角を削除（ 2898行目あたり）•サブメニューの位置を修正（その下）•.main-navigation .primary-menu > li の幅•.site-header-menu はwidth: 100%;

header.phpにmetaタグを入れる

headタグ内の最初に<meta http-equiv="X-UA-Compatible" content="IE=edge">