実録 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月勉強会 「みんなのテーマ開発」
   〜自分の好きな作り方を話そう〜
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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月勉強会 「みんなのテーマ開発」〜自分の好
   きな作り方を話そう〜
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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%;
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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; /* マーカーを小さく */
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide