1.
実録 Twenty Sixteenのカスタマイズ
How to customize Twenty Sixteen
2016年2月21日
立花 明 / Akira Tachibana
WordBench 東京 2月勉強会 「みんなのテーマ開発」
〜自分の好きな作り方を話そう〜

2.
自己紹介
• 立花 明
• IT 関連会社勤務 (非 WordPress)
• 好きなこと: 何かを集めること、並べること
– 新しい趣味のため、集め始めない、並べ始めないと自戒
• WordPress との関係
– 2014年にブログで利用
– 2015年から Codex (マニュアル)を始めてしまった...。
– 英語版 延べ 190 文書の更新
– 日本語版延べ 483 文書の更新
2WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

3.
ちょっと宣伝
• 手間のかかった Codex 文書 Top 5
– 「用語集」 〜 数が多い
– 「データベース構造」 〜 確認が面倒
– 「テンプレート階層」 〜 動的階層でスクリプトと GitHub
– 管理画面各種
– ファイル数が多い、スクリーンショットが多い、新旧の記述が混在
– 「WordPress クイックスタートガイド」
– 新旧入り乱れた記述、長い割に中途半端な内容
• 読んでいただけると嬉しいです!
3WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

4.
テーマのカスタマイズ
• 原則
– 最小限の変更にとどめる。
• 流れ
1. ゴールの設定と親テーマの選定
2. 子テーマの作成
3. 管理画面やカスタマイザの利用
4. スタイルシートの編集
5. テンプレートファイル + スタイルシートの編集
6. プラグイン + スタイルシートの編集
4WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

5.
1. ゴールの設定と親テーマの選定
• ゴールを設定する(あるいは、設計)
– 闇雲にやっていると時間と手間が無限に必要
– 事前の工程にページを
割いた書籍も増えました。
• 今回の私の目標
– 利用していたブログっぽいの
– 書評が主のため、アイキャッチ画像は書影 = 縦長
• 近い親テーマの選定 ...
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 5

6.
Twenty Sixteen デフォルトと最終形の比較
• Twenty Sixteen = 画像を効果的に見せるテーマ
– 推奨 アイキャッチ画像幅: 1200px
– 推奨 カスタムヘッダー画像: 1200p x 280px
– カラム幅をはみ出してでも効果的に画像を表示
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 6
... ギャップが大きすぎない?

7.
Twenty Sixteen を親テーマにする理由
1. 標準だから
– バグの確認は公式テーマで
– 将来のバージョンアップ対応
2. 最新のコーディングが学べるから
– PHP7 / HTML5 / CSS3
– レスポンシブデザイン
3. 最新の考え方が学べるから
– テンプレートファイルの組み合わせ
– アクセシビリティ
7WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

8.
Twenty Sixteen を親テーマにする理由
• 昨年末のフォーラムの書き込み(抜粋)
– 日本語マニュアルに携わるものとしてはちょっと残念
• 4. 個人的な理由 - 情報不足を補う
8WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

9.
2. 子テーマの作成
• 親テーマファイルは保存しておきましょう。
– 公式であればバージョンを指定してダウンロード可能
– https://downloads.wordpress.org/theme/twentysixte
en.1.1.zip
– 参考: Twenty Sixteen の GitHub リポジトリ (ついに!)
– https://github.com/WordPress/twentysixteen
9WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
子テーマのメリットや注意点の話
(Mignon Styleさん)
WordBench 東京 2006年2月勉強会 「みんなのテーマ開発」〜自分の好
きな作り方を話そう〜

10.
3. 管理画面やカスタマイザの利用
• メニュー
• ウィジェット
• プロフィール情報 + アバター画像
• 周囲の黒枠を消すには、
– カスタマイザー > 色 > 背景色で「白」
10WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
WordBench 東京 2006年2月勉強会 「みんなのテーマ開発」〜自分の好
きな作り方を話そう〜
メニューやSNSアイコンは管理画面で設
定できるようにしよう (森山真祐子さん)

11.
ちなみにウィジェット間の黒線は...
• 「メインのテキストカラー」のため、他も消える。
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 11

12.
3. 管理画面やカスタマイザの利用 (結果)
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 12

13.
4. スタイルシートの編集
• 手順
– ブラウザのインスペクタを使用してセレクタを確認しながら値
を変更していく
– 画面幅を変更する (どこがブレイクポイントか意識する)
• フォント
• ウィジェットやコメント領域のデザイン
13WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

14.
ウィジェット間の黒線など
• カスタマイザで変更可能な値はインラインスタイルの
ため style.css での設定が効かない
– 優先度
1. インラインスタイル
2. 子テーマの style.css
3. 親テーマの style.css
• 対策
1. !important 宣言で打ち消す
– 例) border-color: #ffffff !important;
2. 論理的に打ち消す
– 例) border-style: none;
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 14

15.
WordPress での CSS3
• :not と :empty (Twenty Fifteen から)
– 検索結果ページと固定ページは除外
– ウィジェットタイトルがないとき
• flexbox (Twenty Sixteen から)
– 右上のメニューの配置
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 15
body:not(.search-results) article:not(.type-page)
.entry-footer {
float: left;
.widget .widget-title:empty {
margin-bottom: 0;
}
.site-header-menu {
flex: 0 1 100%;

16.
レスポンシブ Web デザインの確認
• 画面の幅を変更しながら調整、確認する。
– 例: 1行で左右に振り分けてもいいけど、狭めると上下に
なるのでそのまま (割り切り)
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 16

17.
4. スタイルシートの編集 (結果)
17WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

18.
5. テンプレートファイル + スタイルシートの編集
• ヘッダー
– 検索ボックス
• サイドバー
– おすすめ記事
• 本文
– アイキャッチ画像、メタ情報の位置、アイコン
• トップページ
• 詳細は末尾ページの記事、GitHub 参照
18WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

19.
Twenty Sixteen ファイル構成
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 19
twentysixteen
template-parts
inc
content-single.php
template-tags.php
single.php
投稿用テンプレート
記事 (<article>〜</article>)
function twentysixteen_entry_meta()
投稿メタ情報の表示
function twentysixteen_post_thumbnail()
投稿アイキャッチ画像の表示、等々

20.
Twenty Sixteen Child ファイル構成
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 20
twentysixteen
template-parts
inc
content-single.php
template-tags.php
single.php
投稿用テンプレート
記事 (<article>〜</article>)
function twentysixteen_entry_meta()
投稿メタ情報の表示
function twentysixteen_post_thumbnail()
投稿アイキャッチ画像の表示、等々
twentysixteen-child
template-parts
content-single.php
single.php
functions.php
function twentysixteen_entry_meta()
※ カスタマイズするものだけ

21.
6. プラグイン + スタイルシートの編集
• プラグインのインストール後、スタイルシートで調整
– Amazon JS
– Collapsed Archives
– Google AdSense
21WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
.amazonjs_item .amazonjs_info h4 {
/* Twenty Sixteen では、幅広に表示されるため戻す */
letter-spacing: 0rem;
}
li.collapsing.archives .sym {
font-size: 0.8em !important; /* マーカーを小さく */
}

22.
ひとまず完了
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 22

23.
Blogのタイトル一覧
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 23

24.
おまけ ビジュアルエディタのカスタマイズ
• 想像以上に気持ちいいので是非
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 24
[functions.php]
add_editor_style('editor-style.css');
[editor-style.css]
#tinymce {
font-family: ...

25.
まとめ
• Twenty Sixteen を使う理由
• カスタマイズの流れ
1. ゴールの設定と親テーマの選定
2. 子テーマの作成
3. 管理画面やカスタマイザの利用
4. スタイルシートの編集
– インスペクター
5. テンプレートファイル + スタイルシートの編集
– テンプレートファイルの組み合わせ
6. プラグイン + スタイルシートの編集
25WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

26.
ありがとうございました。
• Unofficial Tokyo Web Site
– http://unofficialtokyo.com
– 記事
– 「実録 WordPress Twenty Sixteen のカスタマイズ」
– GitHub
– https://github.com/atachibana/twentysixteen-child
26WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21