WordPress4.4 新テーマ Twenty Sixteen をチェックしています

main_lookatTS2
WordPress4.4より、新しいデフォルトテーマ「Twenty Sixteen」が付属されるようですので「不動産プラグイン」に対応すべくチェックをしています。
この記事を書いた時点では Version: 0.1 でしたので今後、変わっていくかもしれません。
※不動産プラグインと組み合わせたデモ http://nendeb.jp/demo2/ (開発中)

 

Twenty Sixteen のリリース時期

WordPress4.4は 2015年12月 リリースの予定になっています。ここで「Twenty Sixteen」がデフォルトテーマとして付属されるもようです
※スケジュール https://make.wordpress.org/core/version-4-4-project-schedule/

 

Twenty Sixteen は WordPress4.4未満では使えません。

試しに4.3.1の環境で有効にしたら・・
2016-10
「Twenty Sixteen requires at least WordPress version 4.4. You are running version 4.3.1. Please upgrade and try again.」という警告が出て使えませんでした。

 

カラー

Twenty Sixteenの見た目の特徴だと思いますが外枠に太いボーダー風の枠が入ってます。
これは body(背景色:黒)で その直下のdiv枠(背景色:白)が margin(21px) をとっている為です。
これを消したい場合はテーマカスタマイザーで背景色を変更すると(中の色と同色)なくなります。
2016_01a

テーマカスタマイザーでは「Base Color Scheme」でカラータイプを変更すると様々な色の組み合わせが試せます。
2016-11

 

ヘッダーに画像を登録する事ができます。
2016-02
推奨画像サイズは 1200px × 280px で画像が大きい場合は画像アップロード時にトリミングされます。

 

投稿コンテンツ

投稿記事の表示は左側に、投稿者名・日付・カテゴリ・タグ・コメント数 等の情報が表示されます。
2016-09
また、投稿者のプロフィール情報があれば記事の下に表示されます。

アイキャッチ画像があれば上側に表示されます。(最大 WIDE:1200px)
2016-04

投稿記事内の画像は最大WIDE:600pxでした。
2016-03

 

メニューはいつものヘッダー側「Primary Menu 」とフッター側の「Social Links Menu」があります。
2016-05a

「Social Links Menu」はカスタムリンクで Twitter や Facebook のリンク等を設置すれば 自動でアイコン表示にしてくれます。
2016-05

 

ウィジェット

ウィジェットは「Sidebar」と「Content Bottom 1」「Content Bottom 2」 があります。
「Sidebar」にウィジェットを設置すると2カラムで右側にウィジェットが表示されます。

「Sidebar」に何も設置しない場合はサイト全体が1カラムになります。
2016-07

「Content Bottom」は名前の通り、投稿記事又は固定ページの下に2列で表示します。
2016-06
「Content Bottom 1」が右列、「Content Bottom 2」が左列です。

 

テンプレートファイル

WordPress4.3から使えるようになった singular.php が使われています。そのかわり single.php page.php がありません。※11/26追記 single.php page.phpが使われるようになりました。
single と page の内部の表示部分は、template-partsフォルダ内にある content-XXXXX.php で切り分けています。
またカテゴリ関係も、category.php や tag.php を使わないで archive.php を使ってます。

サイトシーンによるテンプレート読込

Twenty Sixteen トップ 投稿 固定ページ アーカイブ カテゴリ/タグ サイト内検索 404 アタッチメント
index.php
single.php
page.php
archive.php
search.php
404.php
image.php
content.php
content-single.php
content-page.php
content-search.php ○(該当有り)
content-none.php ○(該当無し)
biography.php
sidebar-content-bottom.php
comments.php
searchform.php
header.php
sidebar.php
footer.php

※searchform.php は「サイト内検索」ウィジェットでも使われています。

 

スポンサードリンク



 

CSS

Media Queriesは以下のようになっています。

/**
 * 14.1 - >= 710px
 */
@media screen and (min-width: 44.375em) {}

/**
 * 14.2 - >= 783px
 */
@media screen and (min-width: 48.9375em) {}

/**
 * 14.3 - >= 910px
 */
@media screen and (min-width: 56.875em) {}

/**
 * 14.4 - >= 985px
 */
@media screen and (min-width: 61.5625em) {}

/**
 * 14.5 - >= 1200px
 */
@media screen and (min-width: 75em) {}

「max-width」と「min-width」を両方使われると CSSを変更する場合、頭の中がややこしくなりますが
Twenty Sixteenで使ってるのは「min-width」だけなのでわかりやすくなっています。
但しサイズの単位が em なので元のフォントサイズを変更するとブレイクポイント(pxで)が変わりますので注意してください。
※こんなツールも便利です。
WordPressレスポンシブテーマのCSS編集に役立つ「現在のウィンドウサイズを表示する」スクリプト

 

まとめ

「Twenty Sixteen」はファイルやコードがとてもシンプルだけど、必要な機能はしっかりついています。とても気に入りました。
WordPress4.4未満では使えない (旧バージョンで使えるようにする為のコードが不要になる) というのもシンプルさ に役立っていると思います。

 

おまけ

Twenty Sixteen は Google Fonts を使っています。英語用フォントなのであまり使わないかもしれません。
もしCSSで全て日本語フォントを指定する場合は Google Fonts は不要になりますので 以下のコードを my-plugin.php に張り付けてください。

function twentysixteen_fonts_cancel() {
	wp_deregister_style( 'twentysixteen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_fonts_cancel' );

これで Google Fonts は読み込まなくなります。

 

「Twenty Sixteen」は WordPress4.4未満では有効にできないのですが 4.3.1でどうしてもテストしたい場合は 以下のコードを my-plugin.php に張り付けてください。

/*
 * Remove Prevent switching to Twenty Sixteen on old versions of WordPress.
 *
 * @since Twenty Sixteen 1.0
*/
function nendebcom_remove_twentysixteen_upgrade_notice () {
	remove_action( 'after_switch_theme', 'twentysixteen_switch_theme' );
	remove_action( 'load-customize.php', 'twentysixteen_customize' );
	remove_action( 'template_redirect', 'twentysixteen_preview' );
}
add_action( 'after_setup_theme', 'nendebcom_remove_twentysixteen_upgrade_notice' );

※いつ「Twenty Sixteen」の仕様変更で使えなくなるかわかりませんので、あくまでテスト用としてください。
※WordPress4.3.1で動きましたが 4.2 ではNGです。

 

参考

Twenty Sixteen
https://ja.wordpress.org/themes/twentysixteen/

WordPress 日本語Codex 関数リファレンス/wp enqueue script
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

WordPress Codex Function Reference/wp deregister style
https://codex.wordpress.org/Function_Reference/wp_deregister_style

WordPress Codex Function Reference/after setup theme
https://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme

Google Fonts
https://www.google.com/fonts

PXtoEM.com ( px <-> em 換算 )
http://pxtoem.com/