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