Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 26 Ad

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

Download to read offline

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

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

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

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

Advertisement

Recently uploaded (20)

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

  1. 1. 実録 Twenty Sixteenのカスタマイズ How to customize Twenty Sixteen 2016年2月21日 立花 明 / Akira Tachibana WordBench 東京 2月勉強会 「みんなのテーマ開発」 〜自分の好きな作り方を話そう〜
  2. 2. 自己紹介 • 立花 明 • IT 関連会社勤務 (非 WordPress) • 好きなこと: 何かを集めること、並べること – 新しい趣味のため、集め始めない、並べ始めないと自戒 • WordPress との関係 – 2014年にブログで利用 – 2015年から Codex (マニュアル)を始めてしまった...。 – 英語版 延べ 190 文書の更新 – 日本語版延べ 483 文書の更新 2WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  3. 3. ちょっと宣伝 • 手間のかかった Codex 文書 Top 5 – 「用語集」 〜 数が多い – 「データベース構造」 〜 確認が面倒 – 「テンプレート階層」 〜 動的階層でスクリプトと GitHub – 管理画面各種 – ファイル数が多い、スクリーンショットが多い、新旧の記述が混在 – 「WordPress クイックスタートガイド」 – 新旧入り乱れた記述、長い割に中途半端な内容 • 読んでいただけると嬉しいです! 3WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  4. 4. テーマのカスタマイズ • 原則 – 最小限の変更にとどめる。 • 流れ 1. ゴールの設定と親テーマの選定 2. 子テーマの作成 3. 管理画面やカスタマイザの利用 4. スタイルシートの編集 5. テンプレートファイル + スタイルシートの編集 6. プラグイン + スタイルシートの編集 4WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  5. 5. 1. ゴールの設定と親テーマの選定 • ゴールを設定する(あるいは、設計) – 闇雲にやっていると時間と手間が無限に必要 – 事前の工程にページを 割いた書籍も増えました。 • 今回の私の目標 – 利用していたブログっぽいの – 書評が主のため、アイキャッチ画像は書影 = 縦長 • 近い親テーマの選定 ... 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 5
  6. 6. Twenty Sixteen デフォルトと最終形の比較 • Twenty Sixteen = 画像を効果的に見せるテーマ – 推奨 アイキャッチ画像幅: 1200px – 推奨 カスタムヘッダー画像: 1200p x 280px – カラム幅をはみ出してでも効果的に画像を表示 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 6 ... ギャップが大きすぎない?
  7. 7. Twenty Sixteen を親テーマにする理由 1. 標準だから – バグの確認は公式テーマで – 将来のバージョンアップ対応 2. 最新のコーディングが学べるから – PHP7 / HTML5 / CSS3 – レスポンシブデザイン 3. 最新の考え方が学べるから – テンプレートファイルの組み合わせ – アクセシビリティ 7WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  8. 8. Twenty Sixteen を親テーマにする理由 • 昨年末のフォーラムの書き込み(抜粋) – 日本語マニュアルに携わるものとしてはちょっと残念 • 4. 個人的な理由 - 情報不足を補う 8WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  9. 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. 10. 3. 管理画面やカスタマイザの利用 • メニュー • ウィジェット • プロフィール情報 + アバター画像 • 周囲の黒枠を消すには、 – カスタマイザー > 色 > 背景色で「白」 10WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21 WordBench 東京 2006年2月勉強会 「みんなのテーマ開発」〜自分の好 きな作り方を話そう〜 メニューやSNSアイコンは管理画面で設 定できるようにしよう (森山真祐子さん)
  11. 11. ちなみにウィジェット間の黒線は... • 「メインのテキストカラー」のため、他も消える。 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 11
  12. 12. 3. 管理画面やカスタマイザの利用 (結果) 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 12
  13. 13. 4. スタイルシートの編集 • 手順 – ブラウザのインスペクタを使用してセレクタを確認しながら値 を変更していく – 画面幅を変更する (どこがブレイクポイントか意識する) • フォント • ウィジェットやコメント領域のデザイン 13WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  14. 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. 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. 16. レスポンシブ Web デザインの確認 • 画面の幅を変更しながら調整、確認する。 – 例: 1行で左右に振り分けてもいいけど、狭めると上下に なるのでそのまま (割り切り) 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 16
  17. 17. 4. スタイルシートの編集 (結果) 17WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  18. 18. 5. テンプレートファイル + スタイルシートの編集 • ヘッダー – 検索ボックス • サイドバー – おすすめ記事 • 本文 – アイキャッチ画像、メタ情報の位置、アイコン • トップページ • 詳細は末尾ページの記事、GitHub 参照 18WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  19. 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. 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. 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. 22. ひとまず完了 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 22
  23. 23. Blogのタイトル一覧 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 23
  24. 24. おまけ ビジュアルエディタのカスタマイズ • 想像以上に気持ちいいので是非 2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 24 [functions.php] add_editor_style('editor-style.css'); [editor-style.css] #tinymce { font-family: ...
  25. 25. まとめ • Twenty Sixteen を使う理由 • カスタマイズの流れ 1. ゴールの設定と親テーマの選定 2. 子テーマの作成 3. 管理画面やカスタマイザの利用 4. スタイルシートの編集 – インスペクター 5. テンプレートファイル + スタイルシートの編集 – テンプレートファイルの組み合わせ 6. プラグイン + スタイルシートの編集 25WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21
  26. 26. ありがとうございました。 • Unofficial Tokyo Web Site – http://unofficialtokyo.com – 記事 – 「実録 WordPress Twenty Sixteen のカスタマイズ」 – GitHub – https://github.com/atachibana/twentysixteen-child 26WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21

×