WordPressでメディア追加するときのHTMLのクラス属性を変更する

公開日 :

最終更新日 :

カテゴリー :

WordPressで記事を書くときはMarsEditとかWindows Writerとかするぷろなどの投稿ツールなどを除けば、WordPressの管理画面から記事を作成することのほうが多いでしょう。管理画面で記事を作成しているときには「メディアの追加」とかで画像を記事内に挿入することはよくあると思います。

挿入されたimgタグを根本から変更したいときとかあります。「メディアの追加」で挿入される画像のHTMLには、いくつかフィルターフックが用意されています。

WordPressで用意されているメディアのフィルターフックの中からget_image_tag_classフィルターを紹介します。get_image_tag_classフィルターは、挿入されるimgタグのクラス属性を変更できるフィルターフックでget_image_tag_classフィルターを追加すると挿入される画像のimgタグのクラス属性を任意のクラス属性に変更できます。

get_image_tag_classフィルターの仕様

引数名 説明
$class string クラス名かスペース区切りのクラス名リスト
$id int 添付ファイルID
$align string 画像の挿入位置
$size string 画像のサイズ

$classは、挿入する画像のimgタグのクラス属性の単体クラス名か、スペース区切りのクラス名リストになります。どのようなものかは、以下の通りです。

function my_image_class_filter($classes) {
return $classes . ' another-image-class';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

$idは、挿入する画像の添付ファイルIDになります。添付ファイルIDは、wp_postsテーブルのIDです。$alignは、画像を追加するときに「配置」で挿入位置を指定できますが、指定した配置の挿入位置のクラス名が入っています。$sizeは、$alignと同じように画像を追加するときの「サイズ」画像をサイズを指定できますが、指定した画像サイズのキーが入っています。画像にもよりますが、WordPressの標準だと$sizeは、thmubnailやmediumやlargeといったものが入っています。

画像の挿入

get_image_tag_classフィルターの使い方

get_image_tag_classフィルターを使った例で、挿入されるimgタグに新たに特定のクラスを追加したものになります。

<!-- 単体クラス名 --<
<!-- この場合、class="test"のtest --<
<img class="test" src="test.jpg"<

<!-- スペース区切りのクラス名リスト --<
<!-- この場合、class="test1 test2 test3"のtest1 test2 test3がくる --<
<img class="test1 test2 test3" src="test.jpg"<

まとめ

get_image_tag_classフィルターを使いたい場合に多いのが、それ以外だとクラス属性を特定のものオンリーにするときとかlightbox系のJavascriptを動かすときにクラスの指定がいるときに追加するとかが多いかなと思います。imgタグそのものを変えたいわけではないけどクラス名は変えたいみたいなときにget_image_tag_classを使うといいでしょう。

+1 Pocket はてブ!
© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress