WordPress4.7より、新しいデフォルトテーマ「Twenty Seventeen」が付属されるようなので「不動産プラグイン」に対応すべくチェックをしています。
この記事を書いた時点では開発中ですので今後、変わっていくかもしれません。
Make WordPress Core – Twenty Seventeen: Merge Proposal for 4.7
https://make.wordpress.org/core/2016/10/18/twenty-seventeen-merge-proposal-for-4-7/
Twenty Seventeen は WordPress4.7 beta版以降 に同梱されています。
https://wordpress.org/news/2016/10/wordpress-4-7-beta-1/
WordPress 4.7についてはこちらをご覧ください。「WordPress 4.7 をチェックしています」
http://nendeb.com/510
「不動産プラグイン」を使ったデモサイトはこちら
サンプル不動産(TwentySeventeen)
Twenty Seventeen のリリース時期
WordPress4.7は 2016年12月 リリースの予定になっています。ここで「Twenty Seventeen」がデフォルトテーマとして付属されるもようです。
※スケジュール https://make.wordpress.org/core/4-7/
管理画面の外観→テーマで「新規追加」ボタンを押すと出てくるようになりました。
対応バージョン
Twenty Seventeen は WordPress4.7以降 でないと使えません。
ヘッダー画像
Twenty Seventeen の見た目の特徴だと思いますが 大きなヘッダー画像を使っています。
画像は WordPress4.7の新しい関数「<?php the_custom_header_markup(); ?>」を使って表示されています。
また、ブラウザ画面の大きさにあわせて 画像とメニューがちょうど表示されるように小技をきかせています。
※↑ブラウザ画面の高さを小さくしてみた状態
ヘッダー画像は 2000px X 1200px を推奨していますが 推奨サイズ以外でも CSSで background-size: cover; にしていますのでサイズ的には合わせてくれています。
※サイトのタイトルがヘッダー画像の上に表示されるのでテーマカスタマイザーの「ヘッダーテキスト色」で色変更できるようになっています。
トップページ以外ではヘッダー画像の高さを小さくして表示させています。
メニュー
メニューはいつものヘッダーメニュー「Top」と フッターメニューの「Social Links Menu」があります。
ヘッダーメニュー「Top」はヘッダー画像の下に設置されていて画面を下へスクロールするとヘッダー画像が隠れるあたりで、固定されるようになっています。
フッター用の「Social Links Menu」は アイコン専用で Twitter や Facebook のリンク等を設置すれば 自動でアイコン表示にしてくれます。
カスタムリンクで使えるURLは以下の通りです。
behance.net codepen.io deviantart.com digg.com dribbble.com dropbox.com facebook.com flickr.com foursquare.com plus.google.com github.com instagram.com linkedin.com medium.com path.com pinterest.com getpocket.com polldaddy.com reddit.com skype.com skype: slideshare.net snapchat.com soundcloud.com spotify.com stumbleupon.com tumblr.com twitch.tv twitter.com vimeo.com vine.co vk.com wordpress.org wordpress.com yelp.com youtube.com mailto:
URLに上記どれかの文字列があれば対応したアイコンで表示してくれます。(それ以外では表示されません)
※ 使えるURLは inc/icon-functions.php に記述されていますので今後 増えるかもしれません。
ウィジェット
ウィジェットは「Sidebar」と「Footer 1」「Footer 2」 があります。
「Sidebar」にウィジェットを設置すると２カラムで右側にウィジェットが表示されます。
「Sidebar」に何も設置しない場合はサイト全体が１カラムになります。
※固定ページと404ページにはサイドバーはありませんので非表示になります。
「Footer 1～2」はフッタ部分で2分割されて表示されます。左は width: 36%; 右は width: 58%;で表示されます。
テンプレートファイル
トップページでは通常の場合は まず front-page.php が読まれていて、内部で index.php を参照してます。
固定フロントページを設定している場合は front-page.php だけになります。
single や page の内部の表示部分は、componentsフォルダ内にある content-XXXXX.php を使っています。
またカテゴリ関係も、category.php や tag.php を使わないで archive.php を使ってます。
サイトシーンによるテンプレート読込
| Twenty Seventeen | トップ | 投稿 | 固定ページ | アーカイブ | カテゴリ/タグ | サイト内検索 | 404 | アタッチメント |
| front-page.php | ○ | |||||||
| single.php | ○ | ○ | ||||||
| page.php | ○ | |||||||
| archive.php | ○ | ○ | ||||||
| search.php | ○ | |||||||
| 404.php | ○ | |||||||
| header.php | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| sidebar.php | ○ | ○ | ○ | ○ | ○ | ○ | ||
| footer.php | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
※固定ページと404ページにはサイドバーはありません。
テーマカスタマイザー
サイト基本情報
サイト基本情報には「ロゴ」「サイトのタイトル」「キャッチフレーズ」と「サイトアイコン」が設定できます。
「ロゴ」部分は 推奨画像サイズは一応 250px×250px となっていますが、いい感じに縮小して「サイトのタイトル」の左部分に画像を設置する事ができます。
「ロゴ」画像だけにしたい場合は下の「サイトのタイトルとキャッチフレーズを表示」のチェックを外すと出なくなりますが「ロゴ」画像は元のサイズで表示されるようになります。
「サイトのタイトル」「キャッチフレーズ」の文字色は次の「色」の所で変更できます。
「サイトアイコン」は AMP等で使いますので入れておいた方がいいです。
色
テーマ→カスタマイズではサイトのカラースキームを変更する事ができます。デフォルトのLight(白ベース)とDark(黒ベース)とCustomが選べます。
謎の Custom は下のスライドバーで色合いを微妙に調整する事ができます。
ヘッダテキスト色は背景画像に合わせて変更する事ができます。
Theme Options
管理画面の テーマ→カスタマイズでは Twenty Seventeen オリジナルのテーマオプションが設置されています。
固定フロントページ
固定フロントページは1つだけでなく あと4つの固定ページを連結してトップページに表示できます。
まずは管理画面の テーマ→カスタマイズで「固定フロントページ」メニューで フロントページの表示 で 固定ページ を選択して表示したいページを選択して保存します。
この時点でトップページは選択した固定ページ が表示されます。
次に「テーマオプション(Theme Options)」メニューで
「Panel 1」をクリックして
次に表示する 固定ページ を選択します。
この手順で 必要なら「Panel 4」まで設定すると トップページに固定ページ が連続して表示させる事ができます。
スポンサードリンク
CSS
Media Queries
Media Queriesは以下のようになっています。
/* 480px ～ */
@media screen and (min-width: 30em) {}
/* 768px ～ */
@media screen and (min-width: 48em) {}
/* 880px ～ */
@media screen and ( min-width: 55em ) {}
/* 1072px ～ */
@media screen and ( min-width: 67em ) {}
/* 1264px ～ */
@media screen and ( min-width: 79em ) {}
/* 768px ～ 782px*/
@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {}
最後の48em～48.875emは admin-bar専用のようなので考慮しなくていいと思います。
サイズの単位が em なので元の(body)フォントサイズを変更するとブレイクポイント(pxで)が変わりますので注意してください。
※こんなツールも便利です。
「WordPressレスポンシブテーマのCSS編集に役立つ「現在のウィンドウサイズを表示する」スクリプト」
Font
CSSでの font-family は 英語用で設定されているのが多かったのですが「Twenty Seventeen」では各言語あわせてfont-familyを設定しています。
/* Typography for Japanese Font */
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6 {
font-weight: 700;
}
あとがき
Twenty Seventeen 特徴の 大きなヘッダー画像は サイトを印象づける重要な要素になりますので 画像選びに悩みそうですね。
参考
Make WordPress Core – Twenty Seventeen: Merge Proposal for 4.7
https://make.wordpress.org/core/2016/10/18/twenty-seventeen-merge-proposal-for-4-7/
WP Tavern – WordPress 4.7 to Ship with New Twenty Seventeen Default Theme
https://wptavern.com/wordpress-4-7-to-ship-with-new-twenty-seventeen-default-theme
Make WordPress Core – Say Hello to Twenty Seventeen
https://make.wordpress.org/core/2016/09/09/say-hello-to-twenty-seventeen-%F0%9F%91%8B%F0%9F%8F%BD/
GitHub – Twenty Seventeen theme
https://github.com/WordPress/twentyseventeen
PXtoEM.com ( px <-> em 換算 )
http://pxtoem.com/
追記
Theming with Twenty Seventeen
https://make.wordpress.org/core/2016/11/29/theming-with-twenty-seventeen/
