WordPress4.7 新デフォルトテーマ Twenty Seventeen をチェックしています

Twenty Seventeen Main

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 の見た目の特徴だと思いますが 大きなヘッダー画像を使っています。
Twenty Seventeen ヘッダー画像
 
画像は WordPress4.7の新しい関数「<?php the_custom_header_markup(); ?>」を使って表示されています。
また、ブラウザ画面の大きさにあわせて 画像とメニューがちょうど表示されるように小技をきかせています。
Twenty Seventeen ヘッダー画像2
※↑ブラウザ画面の高さを小さくしてみた状態

 
ヘッダー画像は 2000px X 1200px を推奨していますが 推奨サイズ以外でも CSSで background-size: cover; にしていますのでサイズ的には合わせてくれています。
※サイトのタイトルがヘッダー画像の上に表示されるのでテーマカスタマイザーの「ヘッダーテキスト色」で色変更できるようになっています。
 

トップページ以外ではヘッダー画像の高さを小さくして表示させています。
Twenty Seventeen ヘッダー画像3

 
 

メニューはいつものヘッダーメニュー「Top」と フッターメニューの「Social Links Menu」があります。
ヘッダーメニュー「Top」はヘッダー画像の下に設置されていて画面を下へスクロールするとヘッダー画像が隠れるあたりで、固定されるようになっています。

フッター用の「Social Links Menu」は アイコン専用で Twitter や Facebook のリンク等を設置すれば 自動でアイコン表示にしてくれます。
Twenty Seventeen フッター

カスタムリンクで使える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 に記述されていますので今後 増えるかもしれません。
 
 

ウィジェット

Twenty Seventeen ウィジェット
ウィジェットは「Sidebar」と「Footer 1」「Footer 2」 があります。
「Sidebar」にウィジェットを設置すると2カラムで右側にウィジェットが表示されます。
「Sidebar」に何も設置しない場合はサイト全体が1カラムになります。
※固定ページと404ページにはサイドバーはありませんので非表示になります。

「Footer 1~2」はフッタ部分で2分割されて表示されます。左は width: 36%; 右は width: 58%;で表示されます。
Twenty Seventeen フッター2
 
 

テンプレートファイル

トップページでは通常の場合は まず 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 となっていますが、いい感じに縮小して「サイトのタイトル」の左部分に画像を設置する事ができます。
Twenty Seventeen ロゴ
「ロゴ」画像だけにしたい場合は下の「サイトのタイトルとキャッチフレーズを表示」のチェックを外すと出なくなりますが「ロゴ」画像は元のサイズで表示されるようになります。

「サイトのタイトル」「キャッチフレーズ」の文字色は次の「色」の所で変更できます。
「サイトアイコン」は AMP等で使いますので入れておいた方がいいです。

 

テーマ→カスタマイズではサイトのカラースキームを変更する事ができます。デフォルトのLight(白ベース)とDark(黒ベース)とCustomが選べます。
Twenty Seventeen color
 
謎の Custom は下のスライドバーで色合いを微妙に調整する事ができます。
Twenty Seventeen color2
 
ヘッダテキスト色は背景画像に合わせて変更する事ができます。
Twenty Seventeen color3

 

Theme Options

管理画面の テーマ→カスタマイズでは Twenty Seventeen オリジナルのテーマオプションが設置されています。
Twenty Seventeen ThemeOptions

固定フロントページ

固定フロントページは1つだけでなく あと4つの固定ページを連結してトップページに表示できます。

まずは管理画面の テーマ→カスタマイズで「固定フロントページ」メニューで フロントページの表示 で 固定ページ を選択して表示したいページを選択して保存します。
Twenty Seventeen ThemeOptions2
この時点でトップページは選択した固定ページ が表示されます。

次に「テーマオプション(Theme Options)」メニューで
Twenty Seventeen ThemeOptions

「Panel 1」をクリックして
Twenty Seventeen ThemeOptions3

次に表示する 固定ページ を選択します。
Twenty Seventeen ThemeOptions4

この手順で 必要なら「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/