WordPress新デフォルトテーマTwentyTwevleリリース直近メモ

Twenty Twelve | WordPress.org

ワードプレスの、新デフォルトテーマが、まもなくテーマディレクトリに登場する勢いなので、お勉強してみました。

”Twenty Twelve’s release to the WordPress.org theme directory will be next week.”

このメモは、あくまで個人的な感想です。新テーマの効果や効能とは無関係なので、健康食品の利用者の感想のように読んでくださいね。

１．新テーマは、古いワードプレス（3.4より古いものは、）サポートしていません。

3.4以前のワードプレスでは、このテーマが使用している関数をサポートしていないので、ヘッダー画像周りで、エラーが発生すると思います。

HEADER_IMAGE　HEADER_IMAGE_WIDTH　HEADER_TEXTCOLOR　等の定数は使われてないです。

早速、最新版にしておきましょう

これまでの、公式テーマの後方互換性はver2までとなっていたはずなのに、今回早くなったと思っていたら、

テーマレビューのレギュレーションの変更があったようです（2012 9/21)

Backward compatibility:
- Themes must not provide backward compatibility for out-of-date WordPress versions, including using function_exists() conditional wrappers for current WordPress functions.
  - Themes must not support backward compatibility for more than two prior major WordPress versions (currently, that means versions prior to WordPress 3.2)
  - Themes should not support backward compatibility for more than one prior major WordPress version (currently, that means versions prior to WordPress 3.3)

source

２．新しいテーマは、Twentyelevenなどと比べてなにが、変わるのか

シンプルですね

スタイルシートの記述量

テーマ	行数
twenty ten	1359
twenty eleven	2694
twenty twelve	1646

メディアクエリスタイルの変化

メディアクエリ

Twentytwelveでは、以下のメディアクエリが使用される

@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) {
 
}

ディレクトリ　includes　が作られ、functions.phpのコードが整理

投稿フォーマットのサポートの変更

post-formats

twentyeleven
array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ )
twentytwelve
array( ‘aside’, ‘image’, ‘link’, ‘quote’ )

アイキャッチ画像サイズ

アイキャッチ画像サイズは、固定比率で表示されていましたが、アップロードしたサイズで表示されるように変更されました。

ウィジェットエリアが、削減されました
- twenty twelve
- Main Sidebar
- Homepage Widgets

削除されたウィジェットエリア
- Showcase Sidebar
- Footer Area One
- Footer Area Two
- Footer Area Three

posted on , posted inが　entry metaに整理されました

この変更で、一般に、タイトル下に表示されていた投稿日、投稿者のリンクが、投稿の後方にカテゴリ等と、一緒に表示されるようになりました。

印象

レスポンシブテーマである事は、現在と同様ですが、やはり印象に残るのは、ブログツールとして最適化されてきたワードプレスが、固定ページをフロントに置く事で、いわゆるホームページのように使う事に、軸足を移し始めたという点ではないかと思います。

ここ半年ほどの、ワードプレスの公式テーマの中で、一時は、Twentyシリーズのテーマに肉薄する勢いで人気を集めたテーマに

responsiveがあります

日本では、no title等の紹介事例がありますが、

「30分で、FTP もテキストエディタも使わず、カスタマイズしたサイトをつくる」

と、少なからず注目が集まっている模様です。

これからワードプレステーマを作る時には、page-templates というディレクトリの中に、front-page.php　を　配置するというのが、半年後には、「そんなの常識ジャン」といわれる時が来るだろうと思いました。

まだ、wordpress.com　のほうでしか使えない新しいテーマ、Twentytwelveの行方が気になる今日この頃

他

ドキュメントのサイズなどについて

Quick Specs (all measurements in pixels)

The main column width is 625 except in the full-width layout where it’s 960; sidebar width is 250.

Featured image width is 624 (height is flexible)―these images are displayed on displayed on “standard” posts; posts without a specific format such as image, aside, link, or quote.

The suggested header image dimensions are 960 by 250 (width, height). However, both are flexible so you can upload a smaller cropped image if you wish. The width is limited to 2000.

*

source

早くも、Twentytwelveのスタイルをカスタマイズしようとする人へ

style.css　に説明書きがありますが、このテーマは、rem (ルートem）という、サイズ指定を行っております。

remは、IE8,IE9はサポートしていないので、（IE10はサポートするみたい）なので、現状のスタイルは、px併記になっています。

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.846153846; ($line-height / 16)

---------- Vertical spacing

line-height: 1.846153846; ($line-height / 16)

これは、確かに、おかしい。

line-height:1.7;

とか、フォントサイズをベースにしたものでいいんじゃないのかなぁ

何で、24というベースサイズを設けるんだろうか？

単に　説明用？

追記　10/3　1.0　修正されていました。

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

このサイズ指定は、レスポンしぶなテーマで使われていた　em と何が違うのか？

h1{font-size:2em;}

#site-title{font-size:2em;}

上のように、重複した指定があると、4emになっちゃいました。という欠点を補う事が出来る単位みたいです。

remの使い方を、しっかりおぼえましょう。

10/3　追記

add start---

style.cssのコメントが変更されていました。大事な事なので、追記

Text Domain: twentytwelve

という、コメントが増えていました。このコメントが示唆するところは、以下のような事なのかなぁ　と妄想

<?php
/*
 *@see http://codex.wordpress.org/Function_Reference/wp_get_theme
 */

$theme = wp_get_theme( $stylesheet, $theme_root ); 

?>
<p>Example</p>
<?php
$my_theme = wp_get_theme();
var_dump($my_theme); //現在のところ、privateな感じですから、var_dump()でみてください
$my_text_domain = $my_theme->{'TextDomain'};　//今は、null

_e( '3.5では、このように記述するようになるのかも', $my_text_domain );
?>

---add end