闇雲にカスタマイズしていく前にtwentysixteenのcssをちょっと眺めて計画を練ります。しかる後、子テーマを作ってじわじわとベーシックなカスタマイズを施してまいりましょう。
前の記事 Twenty sixteen のカスタマイズ〜その2 ファイル構成と生成ページの構造 の続きです。
Twenty sixteen のstyle.css
行数は4000行弱で、twentyfourteenの4300行超より若干少なめです。もっと短いと思ったんですが意外と行数多いです。何をぐだぐだと書いてあるのでしょう。
style.cssの冒頭には目次があって、どのような構成かわかります。
* 1.0 – Normalize – 初期化のための基礎部分。
* 2.0 – Genericons – Genericon利用のわりと細かな指定
* 3.0 – Typography – 初期化の次段階の文字関係の基礎。hとかpとか
* 4.0 – Elements – テーマ独自のいろんなベースになるエレメント
* 5.0 – Forms – フォームボタンやサーチボタンなどの挙動
* 6.0 – Navigation – リンクやメニューに関する項目
* 6.1 – Links – ベーシックな a や hover がまずここで定義されています
* 6.2 – Menus – グローバルメニュー、ページナビ、ポストナビ、トグルボタンにソーシャルメニューまで、濃密な部分となります
* 7.0 – Accessibility スクリーンリーダーテキスト変える必要があまりない部分
* 8.0 – Alignments .alignleftでfloat:left;とか、alignの便利クラスが少々
* 9.0 – Clearings さまざまな固まりをclearしております
* 10.0 – Widgets – ウィジェットの見た目はここで
* 11.0 – Content – コンテンツの要、デザインの詳細
* 11.1 – Header – サイトヘッダーの詳細
* 11.2 – Posts and pages – articleからentry-何々に至るど真ん中部分のすべて
* 11.3 – Post Formats – 投稿フォーマット別のentry-titleの扱い
* 11.4 – Comments – コメント
* 11.5 – Sidebar – サイドバーのマージンとパディングだけなぜかここに
* 11.6 – Footer -フッター
* 12.0 – Media – メディアの表示設定
* 12.1 – Captions – キャプション
* 12.2 – Galleries – ギャラリー
* 13.0 – Multisite – マルチサイトの設定？
* 14.0 – Media Queries 地獄のメディアクエリは後で熟考します
* 14.1 – >= 710px
* 14.2 – >= 783px
* 14.3 – >= 910px
* 14.4 – >= 985px
* 14.5 – >= 1200px
* 15.0 – Print
*/
カスタマイズ方針
これまでcssをカスタムするとき、style.cssの冒頭目次に沿ってやってきました。しかしやがて目次から溢れて混沌の泥沼になってしまうという、そんなことに必ずなってきました。
目次にきちんと沿うことを目指して一から書き直しても、やはりいつの間にか混沌と化します。そもそも目次に沿うとか、そういう出来もしないことを辞めてはどうかと今回初めて思いまして。
目次の前に
混沌と化す原因はどこにあるのでしょう。目次に沿って親styleを少しだけ変えていくのに留まらないからです。親の目次の分け方そのものも少し具合の悪いところがあります。そんなこんなで、親からの変更点と新たに加える要素が混ざり合って収拾がつかなくなります。
そこで今回試してみようと思ったアプローチはこうです。目次をとりあえず無視して前提のようなものを作ります。
- 大枠の部分で最小限度の改変を見極めこれを実施する
- デザイン的な最低限度の改変を見極めこれを実施する
- その後は思う存分好きにいじり倒す
当面1と2について取り組みましょう。何が最小限度なのか、そんなことが簡単に判れば苦労しません。でも無理矢理最小限度を見極めます。その基準は個人的にこうです。
複数の運営しているどのサイトにも共通で使用できること
ひとつの基本的子テーマ作成し、それを各サイトにコピーして使えるものを目指します。各サイト独自の装飾はその後にやればよいという、そこが判断の分かれ目。あとで施した装飾をまとめて削除しても、基本的に必須と思っているカスタマイズが影響を受けないというのが理想です。だから項目ごとにやらず、項目が例えダブっても最低限かどうかという意味的な分け方を施すわけです。自分にとっては新しい画期的なやり口のつもりです。
カスタマイズ準備
実施する前に、改変の準備を行いましょう。
子テーマを作る
1. フォルダを作り「twentysixteen-child」と名付けます。名前をこうすることでカスタマイザーが利用できるようです。
2. ファイルを作り「style.css」と名付けます。作ったstyle.cssを開いて子テーマであることを明確にするため、コメントアウト内にTemplate:とTemplate Name: を書きます。
/* Template: twentysixteen Theme Name: Twenty sixteen Child */
あれ？Template Name: じゃなくて Theme Name: でしたっけ。どうでしたっけ。まあいいか。Theme Nameで動いてますのでこれで。あ、子テーマ作りだからTheme Nameですね。Template Nameはページのテンプレートでした。
基本これだけで動きます。css改造においては、日付かバージョン番号を入れることをお勧めします。いいところまで行ってはバックアップ保存します。失敗したなと思ったらポイと捨てバックアップからやり直します。このとき日付やバージョン番号が頼りになるでしょう。
3. ファイルを作り「functions.php」と名付けます。作った functions.php を開いてまずは子テーマの設定を書き記します。こう書く決まりだそうです。
<?php
//子テーマの関数
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
これで子テーマができました。あとは自由に改造していきます。
カスタマイズの基本はcssの変更になりますが、当然ながらfunctions.phpやテンプレートパーツ各種も絡んできます。方針に則って改造をじわじわ進めていきたいと思います。
カスタマイズその4 最小限の改変 に続きます
