Home mail me! RSS

WP – WordPress 2.6 画像挿入まわりの修正。

WordPress 2.6での画像挿入でなんだかイヤな
captionタグ、Lightbox関連をちょこっと修正。

関連:  http://fuzzmaster.jp/wp/2008/07/29/643/


キャプション(=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内でのタイトル表示。


プラグイン「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)です。

キャプション(=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>


これでだいぶ楽になったかなー。

Share

コメントする