この記事は最後に更新してから1年以上経過しています。

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

ショートコード[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_print_inline_script_tag（2021年4月19日更新）

void wp_print_inline_script_tag( string $javascript [ , array $attributes = array() ] )

インラインJavaScriptを含むscript要素を出力する。

register_rest_route（2022年8月17日更新）

bool register_rest_route( string $namespace, string $route [ , array $args = array() [ , bool $override = false ] ] )

REST APIのルートを登録する。

wp_determine_option_autoload_value（2024年7月22日更新）

string wp_determine_option_autoload_value( string $option, mixed $value, mixed $serialized_value, boo l |string $autoload )

自動ロードのトリガー値を取得する。

single_tag_title（2018年5月27日更新）

string single_tag_title( [ string $prefix = '' [ , bool $display = true ] ] )

投稿タグアーカイブページの投稿タグ名を取得し、パラメータ$displayがtrueならば表示する。$displayがfalseの場合は、文字列として返す。

home_url（2023年3月31日更新）

string home_url( [ string $path = '' [ , string $scheme = null ] ] )

現在のブログ（サイト）のホームURLを取得する。ホームURLは、管理者ページの「設定」-「一般」の「サイトのアドレス(URL)」のこと。

説明

関連

お勧め