SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
実録 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/twentysixte
en.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.php
function 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

Más contenido relacionado

La actualidad más candente

一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress正樹 平野
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンHidetaka Okamoto
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?tokumotonahoko
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
 
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoWordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoHidekazu Ishikawa
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイトrie05
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門Hidetaka Okamoto
 
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップWordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップSho Shirasaka
 
WordBench京都9月号
WordBench京都9月号WordBench京都9月号
WordBench京都9月号Koji Asaga
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshareGo Imai
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンHidetaka Okamoto
 
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術Mignon Style
 
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」Akari Doi
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015Yoshinori Kobayashi
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいことKatz Ueno
 
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015Kitani Kimiya
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろうTakahiro Nakahata
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!FLOW web planning & design
 
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?Masahiro Nakashima
 
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フローvar dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー優也 田島
 

La actualidad más candente (20)

一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoWordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
 
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップWordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
 
WordBench京都9月号
WordBench京都9月号WordBench京都9月号
WordBench京都9月号
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
 
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
 
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
 
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
WordPress tokyo2015 - 公式プラグインでお金を稼ぐことができるか?
 
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フローvar dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
 

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

7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminarAtushi Sugiyama
 
Share point 小ネタ集
Share point 小ネタ集Share point 小ネタ集
Share point 小ネタ集Mayuko Hatanaka
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。Hiroshi Urabe
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうAtushi Sugiyama
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録タカシ キタジマ
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうMori Kazue
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶYouji Sakai
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)Atsushi Ando
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToAkira Maruyama
 
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LTAkira Tachibana
 
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるテーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるTsuyoshi.
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜schoowebcampus
 
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...Akira Tachibana
 
月刊ライトニングトーク 12月号
月刊ライトニングトーク 12月号月刊ライトニングトーク 12月号
月刊ライトニングトーク 12月号Masaki Yamamoto
 
デザイン作業効率化
デザイン作業効率化デザイン作業効率化
デザイン作業効率化功介 沼
 
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えることWordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えることWeb nist
 

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

7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
 
Share point 小ネタ集
Share point 小ネタ集Share point 小ネタ集
Share point 小ネタ集
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 
WordPressって何
WordPressって何WordPressって何
WordPressって何
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
Ripps BootCamp 02
Ripps BootCamp 02Ripps BootCamp 02
Ripps BootCamp 02
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
 
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT
基本の WordPress コーディング規約 / WordCamp Tokyo 2016 LT
 
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるテーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
 
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...
WordPress マニュアル Codex の紹介 - 2016年3月の今だけ限定、超簡単本家 WordPress.org へのコントリビュートあります ...
 
月刊ライトニングトーク 12月号
月刊ライトニングトーク 12月号月刊ライトニングトーク 12月号
月刊ライトニングトーク 12月号
 
デザイン作業効率化
デザイン作業効率化デザイン作業効率化
デザイン作業効率化
 
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えることWordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
 

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

  • 1. 実録 Twenty Sixteenのカスタマイズ How to 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/21 WordBench 東京 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/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. 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/21 WordBench 東京 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 Tokyo Web Site – http://unofficialtokyo.com – 記事 – 「実録 WordPress Twenty Sixteen のカスタマイズ」 – GitHub – https://github.com/atachibana/twentysixteen-child 26WordBench 東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜2016/02/21