Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実録 WordPress Twenty Sixteen のカスタマイズ | WordBench...

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

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

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

Akira Tachibana

February 21, 2016
Tweet

More Decks by Akira Tachibana

Other Decks in Technology

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. 4. スタイルシートの編集 • 手順 – ブラウザのインスペクタを使用してセレクタを確認しながら値 を変更していく – 画面幅を変更する (どこがブレイクポイントか意識する)

    • フォント • ウィジェットやコメント領域のデザイン 13 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
  12. ウィジェット間の黒線など • カスタマイザで変更可能な値はインラインスタイルの ため 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
  13. 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%;
  14. 5. テンプレートファイル + スタイルシートの編集 • ヘッダー – 検索ボックス • サイドバー

    – おすすめ記事 • 本文 – アイキャッチ画像、メタ情報の位置、アイコン • トップページ • 詳細は末尾ページの記事、GitHub 参照 18 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
  15. 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() 投稿アイキャッチ画像の表示、等々
  16. 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() ※ カスタマイズするものだけ
  17. 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; /* マーカーを小さく */ }
  18. まとめ • Twenty Sixteen を使う理由 • カスタマイズの流れ 1. ゴールの設定と親テーマの選定 2.

    子テーマの作成 3. 管理画面やカスタマイザの利用 4. スタイルシートの編集 – インスペクター 5. テンプレートファイル + スタイルシートの編集 – テンプレートファイルの組み合わせ 6. プラグイン + スタイルシートの編集 25 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21
  19. ありがとうございました。 • Unofficial Tokyo Web Site – http://unofficialtokyo.com – 記事

    – 「実録 WordPress Twenty Sixteen のカスタマイズ」 – GitHub – https://github.com/atachibana/twentysixteen-child 26 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/02/21