画像キャプション回りのHTMLタグをカスタマイズする

画像にキャプションを入れると、WordPressは画像タグを<img>タグで囲み、キャプションを<p>タグで囲んで、それらを<div>でくくって、さらにstyle属性で「画像＋10px」の横幅を指定してしまいます。こういうソースですね。

これは画像が120pxの例です。このwidth属性でレイアウトの自由度が損なわれるので、この指定を削除する、あるいは任意のclassを追加する、といったカスタマイズ法です。ソースコードはいじらず、function.phpへの記述追加で可能です。

このHTMLタグを吐き出しているのは、wp-include内のmedia.phpです。Ver3.51のmedia.phpでは654行目に

という記述があり、ここで取得した画像の横幅$widthに10を加えてstyleのwidthとして入れています。

ですのでこの行を書き換えれば出力されるタグも変更できますが、やはりコアファイルはいじりたくないものです。WPのバージョンアップのたびに書き直さないとなりませんし。

こういう出力ソースを変更したい場合は、たいがいフィルターで処理するのですが、ここはショートコードで処理されています。ショートコードは自分でPHPソースなどを文中に挿入するときなどに使うもので、ユーザーが作成するものと思いがちですが、WPのデフォルトでいくつか（４つと以前聞きました）仕込まれているショートコードもあり、このキャプション回りもその一つです。

ですのでフィルターではうまく処理ができませんでした（もちろん私の技術力不足の可能性も大ですが）。そこで、ショートコードを加えているなら、オリジナルのショートコードを作成して、それを好きな出力設定に変更して適応させる、という方法にしてみたらうまくいきました。

そのやり方ですが、media.phpでは、まず

で img_caption_shortcode というショートコードを caption に適応させていることがわかります（610行目）。この行をコピーしてfunction.phpにペースとして、ショートコード名をオリジナルに変更します。

のように、 my_img_caption_shortcode を適応させるようにします（名称は任意です）。

そして、media.phpの628行目から始まるimg_caption_shortcodeの中身を626行目まで丸ごとコピーして、これもfunction.phpにペースト。

そして、まずfunction名の「img_caption_shortcode」を、自分が付けた新しい名前（今の例ではmy_img_caption_shortcode）に変更して、あとは自分が出力したいように中身を書き換えればOKです。基本的には最後の return 以降の部分の書き換えになると思います。私はstyel属性を削除したかったので、こんなふうにその部分を除いたソースにしました。

classやHTMLタグを入れたり、といった改変も可能なはずです。

もしかしたらもっとスマートなやり方があるかもしれませんので、ご存じの方は教えていただければ幸いです。

ちなみに以下のページの「ギャラリーのカスタマイズ法」を参考に、キャプション部分に応用してトライしてみました。どうもありがとうございました。

参考：y2blog » WordPressの『ギャラリー』をカスタマイズする