Hatena::ブログ(Diary)

ミショニポー このページをアンテナに追加 RSSフィード

Feedback

Menu Tags

2012-09-21

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

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


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




1.新テーマは、古いワードプレス(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

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

シンプルですね


スタイルシートの記述量


テーマ行数
twenty ten 1359
twenty eleven2694
twenty twelve1646


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



メディアクエリ

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’ )


アイキャッチ画像サイズ

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







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

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



印象


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




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

responsiveがあります




日本では、Responsive テーマと Front-end Editor プラグインの日本語訳 | ja.naoko.cc等の紹介事例がありますが、

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

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




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






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


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


Quick Specs (all measurements in pixels)

  1. The main column width is 625 except in the full-width layout where it’s 960; sidebar width is 250.
  2. 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.
  3. 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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tenman/20120921/p1
TOP
keywordcloud
人力検索はてな はてなアンテナ はてなブックマーク はてなダイアリー はてなフォトライフ はてなグループ はてなグラフ はてなアイデア はてなスター はてなメッセージ はてなワールド はてなハイク Rimo
ページビュー
1085568

サービス

メモや備忘

ナンダーリン カンダリーン

カレンダー
<< 2012/09 >>
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
プロフィール

最近のコメント

砂場