WordPressでHTMLタグに設定することが可能な属性は決まっている

aタグにdata-wantという属性を追加して記事を投稿すると、その属性は削除されて投稿される

WordPressでは、HTMLタグに設定できる属性が標準で決まっています。

anchorタグにdata-wantという属性を追加するために、管理画面の記事エディタで以下のHTMLを記述してリンク付きの画像を表示しようとしたとします。

<a data-want="10" href="/sites/10/2014/03/CIMG0335.jpg"><img src="/sites/10/2014/03/CIMG0335-300x225.jpg" alt="CIMG0335" width="300" height="225" class="alignnone size-medium wp-image-41" /></a>

上のHTMLは、メディアを追加ボタンで画像を選択して自動的に生成されたHTMLコードに手動でdata-want属性を追加した状態になります。この状態で、記事を投稿するとコードは以下の状態で公開されます。

<a href="/sites/10/2014/03/CIMG0335.jpg"><img src="/sites/10/2014/03/CIMG0335-300x225.jpg" alt="CIMG0335" width="300" height="225" class="alignnone size-medium wp-image-41" /></a>

data-want属性が自動的に消去された状態で記事が投稿されてしまいます。data-want属性を有効なまま投稿するためには、

$allowedposttags

という、HTMLタグや属性のホワイトリストを調整する必要があります。

利用可能なHTML属性をホワイトリストに追加する

HTML属性を追加して有効にする前に、aタグについてどのような属性が利用可能になっているのか確認してみます。initアクションフックに$allowedposttagsをvar_dumpするコードを関連付けます。

function init_setup() {
	global $allowedposttags;
echo "<pre>";
var_dump($allowedposttags['a']);
echo "</pre>";
}

add_action('init', 'init_setup');

下のデータ構造が出力されます。

array(9) {
  ["href"]=>
  bool(true)
  ["rel"]=>
  bool(true)
  ["rev"]=>
  bool(true)
  ["name"]=>
  bool(true)
  ["target"]=>
  bool(true)
  ["class"]=>
  bool(true)
  ["id"]=>
  bool(true)
  ["style"]=>
  bool(true)
  ["title"]=>
  bool(true)
}

このデータ構造に定義されていない属性や定義されていても値がfalseになっているHTML属性は、記事投稿時に属性が削除されて公開されてしまいます。

そのため、上のデータ構造の中に今回の場合であれば、data-want属性を追加することでこの属性をWordPressで有効化することが可能となります。

上に載せたinit_setup関数を以下のように変更します。

function init_setup() {
	global $allowedposttags;
        $allowedposttags['a']['data-want'] = true;
}

add_action('init', 'init_setup');

data-wantというキーの配列を作成しtrueを明示的に設定したのが上のコードです。data-wantに限らずWordPressで有効化されていないHTML属性は上の方法で自動消去されることなく記事を投稿することができるようになります。