Download as PDF, PPTX
![おまけ ビジュアルエディタのカスタマイズ
• 想像以上に気持ちいいので是非
2016/02/21 WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 24
[functions.php]
add_editor_style('editor-style.css');
[editor-style.css]
#tinymce {
font-family: ...](https://image.slidesharecdn.com/twentysixteencustomizationrev3160221-160221140725/75/WordPress-Twenty-Sixteen-WordBench-2-2016-2-21-24-2048.jpg)
Uploaded byAkira Tachibana
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21 サイト http://unofficialtokyo.com を Twenty Sixteen で構築した際の手順やコツを紹介しました。
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 2016/2/21
- 1. 実録 Twenty Sixteenのカスタマイズ Howto 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/21WordBench 東京 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/21WordBench 東京 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/21WordBench 東京 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 TokyoWeb Site – http://unofficialtokyo.com – 記事 – 「実録 WordPress Twenty Sixteen のカスタマイズ」 – GitHub – https://github.com/atachibana/twentysixteen-child 26WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21