この記事は最後に更新してから1年以上経過しています。
説明
画像をアップロードして「投稿に追加」ボタンをクリックすると、投稿記事内にリンク付きのimgタグか、ショートコードのが挿入される。ここではそれらの書式を整理する。 まずはリンク付きのimgタグを見てみよう。<a href="%リンクURL(添付画像)%"><img src="%表示画像URL%" alt="%代替テキスト%" title="%タイトル%" width="%幅%" height="%高さ%" class="size-%サイズ% wp-image-%投稿ID(添付画像)%" /></a>
次は本題の[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]
投稿記事内のショートコードは、 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テキストを簡単に説明すると、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_save_post_revision(2024年1月10日 更新)
int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。
get_the_author_posts_link(2019年8月21日 更新)
string get_the_author_posts_link( )
投稿者アーカイブページのリンクを取得する。
get_year_link(2012年2月2日 更新)
string get_year_link( mixed $year )
年アーカイブのURLを取得する。
register_taxonomy(2022年6月1日 更新)
WP_Taxonomy | WP_Error register_taxonomy( string $taxonomy, array | string $object_type, array | string $args = array() )
タクソノミーを登録する。
wp_add_object_terms(2013年8月6日 更新)
mixed wp_add_object_terms( int $object_id, mixed $terms, mixed $taxonomy )
投稿情報などにタクソノミーを追加する。