カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

画像を挿入した時のタグをカスタマイズ – WORDPRESS

この記事は最終更新日から1年以上経過しています。

挿入した画像のリンクにLightbox等の属性を追加したいとき、
その都度、手作業で挿入されたタグを編集してもいいですが
自動でできれば、それに越したことはないですよね?

そんなとき、フィルターフックに自作関数をフックして挿入されるタグをカスタマイズします。
※挿入されるときに適用されるので、それまでの投稿には反映されません。

Lightboxで必要なrel属性を追加します。以下のコードをfunctions.phpに追加。

function my_image_tag( $html, $id ) {
    $html = preg_replace('/a href=/', 'a rel="lightbox['.$id.']" href=', $html); 
    return $html;
}
add_filter( 'image_send_to_editor', 'my_image_tag', 10, 2 );

結果

<a rel="lightbox[800]" href="http://...../xxx.jpg"><img src="http://...../xxx.jpg" alt="" title="xxx" width="150" height="150" class="alignnone size-full wp-image-800" /></a>

フィルターフックについて

add_filter( $tag, $function_to_add, $priority, $accepted_args );

パラメータ
$tag
(文字列) (必須) $function_to_add がフックするフィルター名。
初期値:なし

$function_to_add
(コールバック) (必須) フィルターが適用されたとき、呼び出される関数名。
初期値:なし

$priority
(整数値) (オプション) 優先順位。数値が小さいほど早く実行し、同じ数値の場合は追加された順に実行する。
初期値:10

$accepted_args
(整数値) (オプション) 関数が受け取る引数の数。
初期値:1


引数を最大限受け取りたい場合。以下のコードをfunctions.phpに追加。

function my_image_tag( $html, $id, $caption, $title, $align, $url, $size ) {
    list( $img_src, $width, $height ) = image_downsize($id, $size);
    $html = "<a href=\"$url\"><img src=\"$url\" alt=\"$caption\" title=\"$title\" width=\"$width\" height=\"$height\" class=\"align$align size-full wp-image-$id\" /></a>";
    return $html;
}
add_filter( 'image_send_to_editor', 'my_image_tag', 10, 7 );

結果

<a href="http://...../xxx.jpg"><img src="http://...../xxx.jpg" alt="" title="xxx" width="80" height="80" class="alignnone size-full wp-image-000" /></a>

その他、imgタグに属性を追加したいとき。以下のコードをfunctions.phpに追加。

function my_image_tag($html, $id, $alt, $title, $align, $size){ 

    $html = preg_replace('/ src=/', ' alt="'.$title.'" src=', $html); 

    return $html; 
} 

add_action( 'get_image_tag', 'my_image_tag', 1 ,6);
この記事がお役に立ちましたらシェアお願いします
6,007 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です