WordPress Snippet

ワードプレスをカスタマイズしよう

Twenty Fourteen

twentyfourteen

draft:0.1

Media Query

Twenty Thirteen
@media (max-width: 1599px)

@media (max-width: 1069px)

@media (max-width: 999px)

@media (max-width: 767px)

@media (max-width: 643px)

@media (max-width: 359px)

Twenty Twelve
@media print {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 600px) {}

Twentyeleven
@media print {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
@media (max-width: 450px) {}
@media (max-width: 650px) {}
@media (max-width: 800px) {}

Twentyfourteen
@media screen and (max-width: 400px)
@media screen and (min-width: 401px)
@media screen and (min-width: 642px)
@media screen and (min-width: 673px)
@media screen and (min-width: 673px)
@media screen and (min-width: 770px)
@media screen and (min-width: 810px)
@media screen and (min-width: 870px)
@media screen and (min-width: 1008px)
@media screen and (min-width: 1040px)
@media screen and (min-width: 1080px)
@media screen and (min-width: 1110px)
@media screen and (min-width: 1218px)
@media screen and (min-width: 1260px)

CSS volume

テーマ 行数
twenty ten 1359
twenty eleven 2694
twenty twelve 1646
Twenty Thirteen 3103
Twenty Thirteen 3103
Twenty Fourteen 2702

Post formats

  • twentyeleven
    • array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ )
  • twentytwelve
    • array( ‘aside’, ‘image’, ‘link’, ‘quote’ )
  • Twenty Thirteen
    • array(‘aside’, ‘audio’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’);
  • Twenty Fourteen
    • array(‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, );

CSS

追記：2013 12 18

vh

vhという単位が使われていました

	#secondary {
		background-color: transparent;
		border: 0;
		clear: none;
		float: left;
		margin: 0 0 0 -100%;
		min-height: 100vh;
		width: 122px;
	}

参考：vw, vh, vm(vmin) という単位についての覚え書き

clearfix

追記:2013 12 26
:beforeや:afterを使ったclearfix

micro clearfix hack

Micro clearfix demo

Float

Float

フォントファミリ

  • lato,
  • sans-serif;

アイコンフォント

  • Genericons

CSSリセット

Meyer Resetをベースにして、
bodyに、62.5%を設定（10pxベース）を追加する事で、emベースのサイズ指定を、1.3emなら13pxといった形で、調整しやすくする設定が見られる。

html5のリセットスタイルを含む構成になっているようです。

Retina Display

廃止

Action hook

  • twentyfourteen_featured_posts_before,
  • twentyfourteen_featured_posts_after,
  • twentyfourteen_credits,
  • before,
  • before_sidebar

Filter hook

  • twentyfourteen_custom_background_args,
  • twentyfourteen_get_featured_posts
  • twentyfourteen_get_featured_posts
  • twentyfourteen_attachment_size
  • twentyfourteen_custom_header_args
  • widget_title

感想

全体的には、_s をベースにしたテーマという印象

オーソドックスなスタイルの指定や、フォントサイズのピクセル指定など、これまでの、若干ギークな、新しい手法というものは、見つけにくい

ただ、sidebar-ephemera.php、contributor-page.php、content-featured-post.phpなど、の、新しいプレゼンテーションの試みが行われているようです。

私は、これまで、標準テーマで行われている、様々な、コーディングや、スタイル指定などを、「これからテーマがどうあるべきか」という点について、様々な示唆を含んできるものだと考えてきましたが、

その様な思い込みは、もう必要ないのかもしれません。