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の環境で有効にしたら・・
「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) をとっている為です。
これを消したい場合はテーマカスタマイザーで背景色を変更すると(中の色と同色)なくなります。
テーマカスタマイザーでは「Base Color Scheme」でカラータイプを変更すると様々な色の組み合わせが試せます。
ヘッダー
ヘッダーに画像を登録する事ができます。
推奨画像サイズは 1200px × 280px で画像が大きい場合は画像アップロード時にトリミングされます。
投稿コンテンツ
投稿記事の表示は左側に、投稿者名・日付・カテゴリ・タグ・コメント数 等の情報が表示されます。
また、投稿者のプロフィール情報があれば記事の下に表示されます。
アイキャッチ画像があれば上側に表示されます。(最大 WIDE:1200px)
投稿記事内の画像は最大WIDE:600pxでした。
メニュー
メニューはいつものヘッダー側「Primary Menu 」とフッター側の「Social Links Menu」があります。
「Social Links Menu」はカスタムリンクで Twitter や Facebook のリンク等を設置すれば 自動でアイコン表示にしてくれます。
ウィジェット
ウィジェットは「Sidebar」と「Content Bottom 1」「Content Bottom 2」 があります。
「Sidebar」にウィジェットを設置すると2カラムで右側にウィジェットが表示されます。
「Sidebar」に何も設置しない場合はサイト全体が1カラムになります。
「Content Bottom」は名前の通り、投稿記事又は固定ページの下に2列で表示します。
「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/