実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21

WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21

サイト http://unofficialtokyo.com を Twenty Sixteen で構築した際の手順やコツを紹介しました。

Transcript

1. 実録 Twenty Sixteenのカスタマイズ How to customize Twenty Sixteen 2016年2月21日 立花 明 / Akira Tachibana WordBench 東京 2月勉強会 「みんなのテーマ開発」 〜自分の好きな作り方を話そう〜
2. 自己紹介 • 立花 明 • IT 関連会社勤務 (非 WordPress) • 好きなこと: 何かを集めること、並べること – 新しい趣味のため、集め始めない、並べ始めないと自戒 • WordPress との関係 – 2014年にブログで利用 – 2015年から Codex (マニュアル)を始めてしまった...。 – 英語版 延べ 190 文書の更新 – 日本語版延べ 483 文書の更新 2 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
3. ちょっと宣伝 • 手間のかかった Codex 文書 Top 5 – 「用語集」 〜 数が多い – 「データベース構造」 〜 確認が面倒 – 「テンプレート階層」 〜 動的階層でスクリプトと GitHub – 管理画面各種 – ファイル数が多い、スクリーンショットが多い、新旧の記述が混在 – 「WordPress クイックスタートガイド」 – 新旧入り乱れた記述、長い割に中途半端な内容 • 読んでいただけると嬉しいです! 3 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
4. テーマのカスタマイズ • 原則 – 最小限の変更にとどめる。 • 流れ 1. ゴールの設定と親テーマの選定 2. 子テーマの作成 3. 管理画面やカスタマイザの利用 4. スタイルシートの編集 5. テンプレートファイル + スタイルシートの編集 6. プラグイン + スタイルシートの編集 4 WordBench 東京 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. 最新の考え方が学べるから – テンプレートファイルの組み合わせ – アクセシビリティ 7 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
8. Twenty Sixteen を親テーマにする理由 • 昨年末のフォーラムの書き込み(抜粋) – 日本語マニュアルに携わるものとしてはちょっと残念 • 4. 個人的な理由 - 情報不足を補う 8 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
9. 2. 子テーマの作成 • 親テーマファイルは保存しておきましょう。 – 公式であればバージョンを指定してダウンロード可能 – https://downloads.wordpress.org/theme/twentysixte en.1.1.zip – 参考: Twenty Sixteen の GitHub リポジトリ (ついに!) – https://github.com/WordPress/twentysixteen 9 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21 子テーマのメリットや注意点の話 (Mignon Styleさん) WordBench 東京 2006年2月勉強会 「みんなのテーマ開発」〜自分の好 きな作り方を話そう〜
10. 3. 管理画面やカスタマイザの利用 • メニュー • ウィジェット • プロフィール情報 + アバター画像 • 周囲の黒枠を消すには、 – カスタマイザー > 色 > 背景色で「白」 10 WordBench 東京 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. スタイルシートの編集 • 手順 – ブラウザのインスペクタを使用してセレクタを確認しながら値 を変更していく – 画面幅を変更する (どこがブレイクポイントか意識する) • フォント • ウィジェットやコメント領域のデザイン 13 WordBench 東京 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. スタイルシートの編集 (結果) 17 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
18. 5. テンプレートファイル + スタイルシートの編集 • ヘッダー – 検索ボックス • サイドバー – おすすめ記事 • 本文 – アイキャッチ画像、メタ情報の位置、アイコン • トップページ • 詳細は末尾ページの記事、GitHub 参照 18 WordBench 東京 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 21 WordBench 東京 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. プラグイン + スタイルシートの編集 25 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
26. ありがとうございました。 • Unofficial Tokyo Web Site – http://unofficialtokyo.com – 記事 – 「実録 WordPress Twenty Sixteen のカスタマイズ」 – GitHub – https://github.com/atachibana/twentysixteen-child 26 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21