add_shortcode()のcallbackはechoせず表示HTMLをreturnする
公開日: 執筆:佐藤
add_shortcode()へ登録するcallbackは、表示するHTMLを文字列としてreturnします。callbackの中でechoしても、その値はshortcodeを書いた位置へ差し込まれません。本文を組み立てる途中で出力されるため、表示位置がずれる原因になります。
先に決めるのは、shortcodeが受け取る属性と、返すHTMLです。tagを登録すること、入力を整理すること、出力を安全な文字列にすることを分ければ、短いcallbackでも保守できます。
callbackの戻り値がshortcodeの位置へ入る
WordPress 4.2.2のShortcode APIでは、add_shortcode()がtag名とcallbackを対応付けて保存します。本文内でtagが見つかると、do_shortcode_tag()がcallbackを呼び、その戻り値を元のshortcodeと置き換えます。
処理の関係は次のとおりです。
add_shortcode()でtag名とcallbackを登録する- 本文内のshortcodeから属性を取り出す
- callbackへ属性を渡す
- callbackが返した文字列をshortcodeの位置へ入れる
echoは四番目の戻り値を作りません。HTMLを組み立て、最後に一回だけreturnしてください。
shortcode_atts()で受け付ける属性を限定する
説明用の仮例として、次のshortcodeでお知らせを表示します。
[satolab_notice text="休業日のお知らせ"]
plugin側のcallbackは次のように書けます。
function satolab_notice_shortcode( $atts ) {
$atts = shortcode_atts(
array(
'text' => 'お知らせ',
),
$atts
);
return '<p class="notice">' . esc_html( $atts['text'] ) . '</p>';
}
add_shortcode( 'satolab_notice', 'satolab_notice_shortcode' );
shortcode_atts()の第一引数には、受け付ける属性と初期値を置きます。この例で受け付けるのはtextだけです。投稿者がtextを省けば「お知らせ」を使い、定義していない属性は返される配列へ入れません。
属性値をHTMLへ入れる直前には、その出力先に合わせて処理します。例では段落内の文字として表示するため、esc_html()を使っています。URL、HTML属性、許可するHTMLを含む本文では、必要な処理が異なります。すべての値へ同じ関数を機械的に使わず、値を置く場所を先に決めます。
tag名はほかのpluginと衝突しない名前にする
add_shortcode()は、tag名をkeyとしてcallbackを保存します。同じtag名がもう一度登録されると、同じkeyのcallbackが置き換わります。
noticeやboxのような短い一般名は、ほかのpluginやthemeと重なる可能性があります。サイトまたはpluginを識別できる接頭辞を付け、satolab_noticeのように用途まで分かる名前にしてください。
関数名にも同じ考え方を使います。tag名だけ固有にしても、PHPの関数名が重なれば別の問題が起こります。配布元、tag名、callback名を一組で記録します。
shortcodeを消す前に投稿本文を検索する
shortcodeは、投稿本文へtagを保存し、表示時に登録済みcallbackへ置き換える仕組みです。callbackを持つpluginを停止または削除すると、本文に書かれたtagがそのまま表示される場合があります。
pluginを外す前に、使っているtag名で投稿本文を検索してください。置換先を通常のHTMLへするのか、別のshortcodeへするのか、表示自体を削るのかを決めます。pluginの停止作業と、投稿本文の移行作業は別です。
制作を外部へ依頼する場合は、次の情報を受け取ります。
- 登録したtag名
- callbackを置いたplugin file
- 利用できる属性と初期値
- shortcodeを使っている投稿
- pluginを外すときの置換方法
実装を依頼しても、本文に残るtagとpluginの保守責任はサイト所有者に残ります。最初の一手は、一つのcallbackを開き、echoではなく文字列をreturnしているかを確認することです。
関連記事

