ワードプレスのテーマを自作しよう！

＜テーマチェックに合格するぞシリーズ＞
チェック実施の際の警告の中にこんなのがあります。

REQUIRED: .wp-caption css class is needed in your theme css.
REQUIRED: .wp-caption-text css class is needed in your theme css.

「wp-caption（とwp-caption-text）はあんたのテーマのCSSに必要だ！」という意味みたいですがwp-captionというのは、

• 画像を表示する際にキャプションを付けると発生する。
• キャプションを付けなければ吐き出されるタグは＜img class=だが、キャプションを付けると＜div　class=”wp-caption”と変わる。

というものらしいです。とりあえず、下の様なCSSをstyle.cssに追加しました。

/* 画像キャプション */
.wp-caption,
#honbun .wp-caption-text {
  font-size: 90%;
}

　これでテーマチェックエラーは消えるのですが、ついでなのでwp-captionやwp-caption-textがどういう形でブログに出てくるかを確認してみましょう。
　

・画像の挿入１：ﾘﾝｸURLも何もつけないｼﾝﾌﾟﾙﾀｲﾌﾟ

　

・画像の挿入２：ﾘﾝｸURL=ﾌｧｲﾙURL、配置=右

画像の右寄せ指定をした上で、大きな画像へのリンクもつけてみました。この場合のソースを見てみると

<a href="http://pc-sk.com/uploads/2011/06/yama02_b.jpg">
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" 
alt="" title="yama02_b" width="150" height="150" 
class="alignright size-thumbnail wp-image-6" /></a>

　
となっており、右配置指定になっているのが判ります。この部分はhtmlでは無く、CSSにおいてalignrightを設定することにより実装されています。従って、CSSに設定していないテーマでは右寄せ画像にならないので注意して下さい。通常は下の様な設定をstyle.cssに追加すれば良いと思います。

#honbun .alignright {
  display: inline;
  float: right;
  margin-left: 1.625em;
}

　

・画像の挿入３：ﾘﾝｸURL=無し、配置=無し、キャプション=有り

まず、ワードプレス投稿画面でのソースを見てみますと

[caption id="attachment_6" align="alignnone" width="150"
 caption="これはキャプション例として書いています"]
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt=""
 title="yama02_b" width="150" height="150"
 class="size-thumbnail wp-image-6" />[/caption]

　
となっていました。［caption］というショートコードが使われているのが判ります。これがブラウザ上のソースとなりますと、

<div id="attachment_6" class="wp-caption alignnone" style="width: 160px">
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt=""
 title="yama02_b" width="150" height="150" class="size-thumbnail wp-image-6" />
<p class="wp-caption-text">これはキャプション例として書いています</p>
</div>

　
と変わります。ワードプレスによりwp-caption、wp-caption-textが埋め込まれているのが判ります。
　

・画像の挿入４：ﾘﾝｸURL=無し、配置=左、キャプション=有り

さて、最後に配置とキャプションの複合形を示します。この場合、画像の左寄せを指定しているので文章が右に回りこみます。また、キャプションが有りますのでwp-caption等も出力されています。このソースは下に示していますが、単なる左寄せの時と異なり、図＋キャプションの全体に左指定を行う為alignleftがimgタグからdivタグに移動しているのが判ります。
　

<div id="attachment_6" class="wp-caption alignleft" style="width: 160px">
<img src="http://pc-sk.com/uploads/2011/06/yama02_b-150x150.jpg" alt=""
 title="y2" width="150" height="150" class="size-thumbnail wp-image-6" />
<p class="wp-caption-text">図４．（キャプションの例）</p>
</div>

　
ここでもalignrightと同様に、alignleftに対して

#honbun .alignleft {
  display: inline;
  float: left;
  margin-right: 1.625em;
}

の様な設定をstyle.cssに追加しておきましょう。
　

おまけ

　alignrightとalignleftのCSSを追加すると、

REQUIRED: .alignright css class is needed in your theme css.
REQUIRED: .alignleft css class is needed in your theme css.

の２つのテーマチェックエラーも消えてくれます。