WordPress 2.6での画像挿入でなんだかイヤな
captionタグ、Lightbox関連をちょこっと修正。
キャプション(＝caption、alt属性)を入力するとくっついてくるcaptionタグ対策。
画像の挿入ウィンドウ。
↑画像のアップロード後、このように入力して「投稿に挿入」をクリックすると
次のコードが本文中にペーストされます。
※本来はcaptionタグの頭に半角スペースは入りません。
[ caption id="attachment_661" align="alignnone" width="128" caption="キャプション(＝alt)です。"] <a href="http://fuzzmaster.jp/wp/ ... /test.jpg"> <img src="http://fuzzmaster.jp/wp/ ... /test-128x128.jpg" alt="キャプション(＝alt)です。" title="タイトルです。" width="128" height="128" class="size-thumbnail wp-image-661" /> </a> [/caption]
これが実際にブログ上で表示される際には、
captionタグが次のようなHTMLに自動で変換されています。
(一番下のpタグ内)
<div id="attachment_661" class="wp-caption alignnone" style="width: 138px"> <a href="http://fuzzmaster.jp/wp/ ... /test.jpg"> <img src="http://fuzzmaster.jp/wp/ ... /test-128x128.jpg" alt="キャプション(＝alt)です。" title="タイトルです。" width="128" height="128" class="size-thumbnail wp-image-661" /> </a> <p class="wp-caption-text">キャプション(＝alt)です。</p> </div>
そこで、php内をいじるのは面倒なので
テーマのCSS内に下記を追加して「wp-caption-text」クラスを非表示にしました。
.wp-caption-text {
margin, padding:0;
visibility:hidden;
display:none;
}
Lightbox用の修正。
Lightbox内でのタイトル表示。
プラグイン「Lightbox 2 Plugin (ver 0.7)」使用時に便利なように修正。
Lightbox 2 Plugin
http://www.m3nt0r.de/blog/ligh……ss-plugin/
【その1】aタグ内にtitle属性を入れる。
aタグ内にtitle属性が自動で入らないため、
Lightbox上でもキャプションが入らない。
【その2】Lightboxコンテナ用のrel挿入
投稿内の画像リンクにはaタグ内に「rel=”lightbox”」が自動挿入されるが、
一つの記事内にある複数の画像を連続してみせたい場合、
マニュアルで「rel=”lightbox[適当な名前]“」を入力する必要がある。
→「rel=”lightbox[記事のID]“」を自動的に挿入したい。
そこで、
wp-admin/includes/media.php
61行目付近を下記の通り変更しました。
if ( $url ) $html = '<a href="' . clean_url($url) . "¥"$rel>$html</a>";を次のように書き換え。
if ( $url ) $html = '<a href="' . clean_url($url) . $rel . '" title="' . $title . '" rel="lightbox[' . $_REQUEST['post_id'] . ']">' . $html . '</a>';
$post_idで記事のid(この記事の場合677)がひっぱれるかと思ったら
画像が記事にpostされたid(？)になってしまうらしく、
(画像がアップロードされた際に振られるidとは違うっぽいが、未確認)
もう面倒なので直でひっぱってみましたよ！
できあがり。
キャプション(＝alt)です。
投稿内に挿入されるコードは下記のようになります。
※本来はcaptionタグの頭に半角スペースは入りません。
[ caption id="attachment_661" align="alignnone" width="128" caption="キャプション(＝alt)です。"] <a href="http://fuzzmaster.jp/wp/ ... /test.jpg" title="タイトルです。" rel="lightbox[677]"> <img src="http://fuzzmaster.jp/wp/ ... /test-128x128.jpg" alt="キャプション(＝alt)です。" title="タイトルです。" width="128" height="128" class="size-thumbnail wp-image-661" /> </a> [/caption]
実際に表示されるHTMLは下記のようになります。
<div id="attachment_704" class="wp-caption alignnone" style="width: 138px"> <a href="http://fuzzmaster.jp/wp/ ... /test.jpg" title="タイトルです。" rel="lightbox[677]"> <img src="http://fuzzmaster.jp/wp/ ... /test-128x128.jpg" alt="キャプション(＝alt)です。" title="タイトルです。" width="128" height="128" class="size-thumbnail wp-image-704" /> </a> <p class="wp-caption-text">キャプション(＝alt)です。</p> </div>
これでだいぶ楽になったかなー。
