Web事業部実績紹介
Web事業部実績紹介
2013.06.20

フックって?WordPressのカスタマイズ方法を説明します!

小林

おはようございます。小林です。最近のレゴ®ってすごいですね。

さて、WordPressのプロフィールにHTML書きたいときありますよね、特にリンクとか。

例えば、プロフィールを以下のようなHTMLにしたいとします。

もうすぐ4歳。<br>
<a href="http://www.takaratomy.co.jp/products/plarail/" target="_blank">プラレール</a>と<a href="http://www.lego.com/ja-jp/" target="_blank">レゴ®</a>が大好き。

 

もうすぐ4歳。
プラレールレゴ®が大好き。

ご欄のとおり、target属性は書いても除去されてしまいます。

というのも、WordPressはセキュリティのために入力値に様々な制限をかけています。
このプロフィール欄でもそれが適用されているため、上記の様な結果になるのです。

具体的に、どのような制限がかかっているかといいますと、
例えば、この場合のaタグについては、wp-includes/kses.phpというファイル内で以下のように定義されています。

/**
 * Kses allowed HTML elements.
 *
 * @global array $allowedtags
 * @since 1.0.0
 */
$allowedtags = array(
        'a' => array(
                'href' => true,
                'title' => true,
        ),

これがどういうことかと言いますと、
$allowedtags という配列に、許可するタグが記述されているのですが、
aタグについては、「href」と「title」という属性のみ許容するという形になります。

ということで、目的のためには、このファイルのこの部分を以下のように修正したくなります。

/**
 * Kses allowed HTML elements.
 *
 * @global array $allowedtags
 * @since 1.0.0
 */
$allowedtags = array(
        'a' => array(
                'href' => true,
                'title' => true,
                'target' => true
        ),

結果的にはこれで、目的は達成されます。

が、しかし、これでは、WordPress本体のコードを変更してしまっておりますので、WordPressのバージョンアップの度に、同じような作業を繰り返さなければなりません。

そこで、WordPressにはフックという仕組みが用意されています。

フックとは?

フックにはフィルターフックとアクションフックというものがあります。

「Hook」ですから、「引っ掛ける」みたいなイメージですね。

どんなものかを簡単にご紹介します。

アクションフック

例えば、WordPressが「ある処理」を行うとします。
その「ある処理」に「某」かをフックしていたとします。
すると、「ある処理」が行われる際に「某」も同時に行うことができるのです。

フィルターフック

例えば、WordPressが「とあるデータのやりとり」を行うとします。
その「とあるデータのやりとり」に「某」かをフックしていたとします。
すると「とあるデータのやりとり」の際に「とあるデータ」を「某」できてしまうのです。

うん・・・。

フィルターフックの実用例

では、はじめに戻って、HTMLのaタグからtarget属性が除去されないようにするに方法を考えます。
実は、あるフィルターフックを利用することによってこれを行うことができるのです。
「wp_kses_allowed_html」というフィルターフックがそれです。
これは、最初の方のコードでいうところの、$allowedtagsを操作できるのです。
先ほどの説明に照らし合わせますと、
WordPressが「$allowdtagsのやりとり」を行うとします。
その「$allowdtagsのやりとり」に「target属性を許可する記述を追記すること」をフックしていたとします。
すると、「$allowdtagsのやりとり」の際に「target属性を許可する記述を追記すること」ができてしまうのです。

ソースコード

以下のスクリプトをfunctions.php等に貼付けてください。

add_filter( 'wp_kses_allowed_html', 'my_wp_kses_allowed_html', 10, 2 );
function my_wp_kses_allowed_html( $tags, $context ) {
	if ( 'pre_user_description' === $context ) {
		$tags['a']['target'] = true;
	}
	return $tags;
}

 

解説

add_filter()という関数でフィルターフックを定義します。

  • 一つ目の引数「wp_kses_allowed_html」が、「とあるデータのやりとり」です。
  • 二つ目の引数「my_wp_kses_allowed_html」が「某」です。
  • 三つ目の引数は順番です。フィルターフックはいくつでも設定できるので、その実行順序が指定できます。
  • 四つ目の引数は某に渡される引数の数です。

次に「某」の中身を説明します。

function my_wp_kses_allowed_html( $tags, $context ) {

この引数$tagsに$allowedtagsが格納されています。
$contextには、このフィルターが利用された場面のようなものが格納されていますが、これについては後述します。

if ( 'pre_user_description' === $context ) {

このフィルターフックは、実は様々な場面で利用されています。
今回はユーザープロフィールの変更という場面でのみ利用したいので、その条件を追加していたのです。

あとは先ほど、WordPress本体のファイルに直接記述してしまっていた内容。

$tags['a']['target'] = true;

これで、WordPress本体のファイルを操作することなく、
ユーザープロフィールのHTML内で、target属性付きのaタグを利用することができるようになります。

最後に

今回は、具体的な例を交えながら、フックについて簡単に説明させていただきました。

非常に便利なのですが、このフックは、メジャーなものから、マイナーなものまで、
また、WordPressプラグインでも独自に実装されているフックなど、
多岐に渡ります。

どんなフックがあるか、以下を一度ご覧になってください。

ただ、実際問題、例えばフィルターフックに渡される「とあるデータ」がどんなものかを知るには、ソースコードを見たりしないと、なかなかに難しかったりします。

しかし、このあたりを的確に利用できるようになりますと、WordPressのカスタマイズの幅が一層広がることかと思います。

貴重なお時間、誠にありがとうございました。

世界中の全ての子供達に愛と平和が訪れますように…。