画像挿入時のコードを変更する

やりたいこと

通常、投稿内の画像をlightboxでポップアップ表示させる場合、「メディアを追加」で追加した画像のソースコードにlightbox用のrel=”lightbox”を記述してあげなきゃいけません。これを毎回おこなうのは手間なので、WordPress側で画像追加時に自動で付与させちゃおうということです。

設定を1度おこなっておけば、後は以下のようなlightbox仕様の画像が手間いらずで配置できます(「メディアを追加」で画像を追加しているだけでできる、ということです)。
test_lb

jQueryプラグイン「lightbox」の設定が環境したら、WordPress側を以下のように設定しましょう。

画像を追加した際に入力されるコードをlightbox用にカスタムする

以下のコードをfunctions.phpに追加します。

add_filter('the_content', 'rellightbox_replace');
function rellightbox_replace ($content){
 global $post;
 $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
 $replacement = '<a$1href=$2$3.$4$5 rel="lightbox"$6>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
}

これだけで、画像を挿入した際のaタグにrel=”lightbox”が付与されます。そのほか、一緒にclass名も付与したいなんて場合もあるかもしれません。そんな時は上のコードではなく、以下のコードをfunctions.phpに追加してください。

add_filter('the_content', 'rellightbox_replace');
function rellightbox_replace ($content){
 global $post;
 $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
 $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" class="aaa"$6>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
}

最初のコードとの違いは6行目のclass=”aaa”という部分です。aaaは追加されるクラス名なので、この部分は各自で適宜変更してください。