標準で使用できる数少ないショートコード[caption]とは

説明

画像をアップロードして「投稿に追加」ボタンをクリックすると、投稿記事内にリンク付きのimgタグか、ショートコードのが挿入される。ここではそれらの書式を整理する。 まずはリンク付きのimgタグを見てみよう。
<a href="%リンクURL(添付画像)%"><img src="%表示画像URL%" alt="%代替テキスト%" title="%タイトル%" width="%幅%" height="%高さ%" class="size-%サイズ% wp-image-%投稿ID(添付画像)%" /></a>
これは「キャプション」が未入力の場合に挿入されるもので、aタグのhref属性(%リンクURL%)はアップロードした画像ファイルのURLが、imgタグのsrc属性(%表示画像URL%)にはアップロードした画像から作った縮小イメージのURLが指定されている。またimgタグのclass属性には2つのクラス名があり、前者のクラス名(size-%サイズ%)は「サイズ」の指定に応じてthumbnail、medium、large、fullの何れかが適用される(例:「中サイズ」であればsize-mediumとなる)。

次は本題の[caption]。これは「キャプション」を入力している時に挿入されるものである。
[caption id="attachment_%投稿ID(添付画像)%" align="%配置%" width="%幅%" caption="%キャプション%"]
<a href="%リンクURL(添付画像)%"><img src="%表示画像URL%" alt="%代替テキスト%" title="%タイトル%" width="%幅%" height="%高さ%" class="size-%サイズ% wp-image-%投稿ID(添付画像)%" /></a>
[/caption]
[caption]タグにはid、align、width、caption属性がそれぞれ指定され、中には先に説明したリンク付きimgタグが含まれている。align属性(%配置%)には、「配置」の指定に応じてalignnone、alignleft、aligncenter、alignrightの何れかが適用される(例:「なし」であればalignnoneとなる)。

投稿記事内のショートコードは、 the_content関数によって(自前で表示する場合は do_shortcode関数を使うことで) img_caption_shortcode関数がの呼び出され、次のようなHTMLテキストに変換される。
<div id="attachment_%投稿ID(添付画像)%" class="wp-caption %配置%" style="width: %幅+10%px">
<a href="%リンクURL(添付画像)%">
<img src="%表示画像URL%" alt="%代替テキスト%" title="%タイトル%" width="%幅%" height="%高さ%" class="size-%サイズ% wp-image-%投稿ID(添付画像)%">
</a>
<p class="wp-caption-text">%キャプション%</p>
</div>
※ここではHTML構造を見やすくするために改行しているが、実際には改行されていない。

展開されたHTMLテキストを簡単に説明すると、imgタグを内包するaタグに続いてpタグが生成され、全体をdivタグで囲んだ形式となる。divタグにはstyle属性としてwidthが指定されており、その値はのwidth属性値に10を加えたものとなるので、ページレイアウトの際は注意したほうがいい。また当然のことだが、これらを自テーマのcssでは、.alignnone、.alignleft、.aligncenter、.alignright、.wp-caption、.wp-caption-textなどの指定を忘れてはならない。

最終更新 : 2018年05月27日 10:53


お勧め

wp_get_attachment_image(2018年5月27日 更新)

string wp_get_attachment_image( int $attachment_id [ , mixed $size = 'thumbnail' [ , bool $icon = false [ , mixed attr = '' ] ] ] )
アタッチメント情報のHTMLテキストを取得する。

get_parent_theme_file_path(2018年5月27日 更新)

string get_parent_theme_file_path( string $file = '' )
親テーマ内にあるファイルのパス名を取得する。

get_post_format_slugs(2011年9月12日 更新)

string get_post_format_slugs( )
投稿フォーマットのスラッグ一覧を取得する。

get_status_header_desc(2018年5月27日 更新)

string get_status_header_desc( int $code )
HTTPステータス説明文を取得する。

get_network_option(2018年5月27日 更新)

mixed get_network_option( int $network_id, string $option [ , mixed $default = false ] )
ネットワークオプション(サイトオプション)を取得する。