読者です 読者をやめる 読者になる 読者になる

WordPressでメディアを追加した時のimgタグを任意に編集する方法

WordPressは色々なフックがあって楽しい。

いつもは私がプログラマーなこともあって、アクションフックばっかり触っていたが、今回は珍しくフィルターフックを使ったのだ。

うむ、フィルターフックも便利だ。

では、備忘録として事の顛末を記していこう。

メディアアップローダーから追加した画像に任意のクラスをつけたい

いつものようにはてなのホッテントリをしらみつぶしに読んでいると、デザイナーさんから相談を受けた。

WordPressのオリジナルテーマを作り終え、細かい調整を行っていた時にその悲劇は起こったらしい。

メディアアップローダーから画像を記事に追加した時に、画像の配置やキャプションを入力することができる。

画像の配置を「左」や「右」として指定すると、記事本文にimgタグが生成される。

その時にWordPressはimgタグのclass属性に「alignleft」や「alignright」というCSSクラスを自動で追加するのだが、今回は「alignleft」や「alignright」というCSSクラスを既に他の用途で定義していたようだ。

つまり、WordPressに「alignleft」や「alignright」といったCSSクラスをimgタグに付与されると、デザインが崩れてしまうとのことだった。

WordPressが自動で付与する「alignleft」や「alignright」といったクラス名を、任意のクラスに変更できれば、対処できるだろう。

既に使っているという「alignleft」や「alignright」を別名で定義しなおせば済む話だが、作業の手戻りが発生するために、なるべく避けたいという。

うーん、ならばメディアアップローダーが画像を本文に挿入している箇所をフックして、クラスを書き換えることにしよう。

メディアアップローダー関係のフック

日本語版のCodexにはメディア関係のフィルターフックについては記述がないので、英語版のCodexの以下のページを参照してほしい。

Plugin API/Filter Reference の Media Filters

英語版のCodexも記事が作成されていないが、どうやら今回使用出来そうなのは、以下のフックのようだ。

  • get_image_tag_class
  • get_image_tag

get_image_tagをフックすると、imgタグ自体を書き換えることができるので、乱暴な話、文字列の置換で自分の好きなように置換してしまえば、classの書き換えを実現できる。

/**
 * メディアライブラリから画像を追加したときに、任意のCSSクラスを追加するためのフック 
 */
function set_image_tag_class($html){
	$html = str_replace('alignleft', 'alignleft-mu', $html);
	$html = str_replace('alignright', 'alignright-mu', $html);
	$html = str_replace('aligncenter', 'aligncenter-mu', $html);
	return $html;
}
add_filter('get_image_tag','set_image_tag_class');

上記コードでは、「alignleft」というCSSクラスを「alignleft-mu」というCSSクラスに書き換えている。

デフォルトのクラス名に、サフィックスとして「-mu」を追加した形だ。

実は、デザイナーさんに相談された件はこれで解決としたのだが、先にも述べたとおり、あまりに乱暴なのでget_image_tag_classの使い方を探ろう。

get_image_tag_class フィルター

get_image_tag_class については、英語版Codexのget_image_tag関数のページで、若干だが説明されている。

フィルターの引数は以下の通りだ。

  • $class imgタグに設定されるCSSクラス。今回の書き換え対象
  • $id 添付ファイルのID
  • $align 画像の配置場所。メディアアップローダーからは'none'、'left'、'center'、'right'が渡される。
  • $size メディアアップローダーで指定された画像サイズ。'medium'や'full'など。

では、先の例と同じように、「aligncleft」というCSSクラスを「alignleft-mu」という名前のCSSクラスに変更してみよう。

function original_img_class($class, $id, $align, $size)
{
	$class = 'align' . esc_attr($align) .'-mu size-' . esc_attr($size) . ' wp-image-' . $id;
	return $class;
}

add_filter('get_image_tag_class', 'original_img_class');

「align」関係以外のCSSクラスは、デフォルトをそのまま引き継ぐように書いている。

CSSクラスをWordPressとは全く関係ないオリジナルで定義したいなら、単純に次のように書けば良い。

function original_img_class($class, $id, $align, $size)
{
	$class = 'original_image';
	return $class;
}

add_filter('get_image_tag_class', 'original_img_class');

これでimgタグに「original_image」というCSSクラスのみが設定されることになる。

どうでもいいけど……

日本語版Codexの編集アカウントを発行してもらったので、今回の様な記事は、日本語版Codexに反映させれば良いのだが……。

日本語版Codexは英語版Codexの翻訳版という扱いなのだろうか。だとしたら、面倒くさいなあ。英語苦手だから翻訳作業はできないのよね。

あくまでWordPressの知識を集約する場所という扱いなら、自由に編集するんだけどなあ。