WordPressでWebサイトを運用していると、特定のパーツや複雑なレイアウトを繰り返し使用したい場面が多くあります。
そのような時に便利なのが、短いコードを記述するだけで複雑な処理を呼び出せる「ショートコード」の機能です。
ショートコードを自作できるようになると、HTMLやCSSの知識が乏しいサイト運用者でも、投稿画面から簡単に高度なデザインや機能を配置できるようになります。
今回は、WordPressのコア機能であるadd_shortcode関数を使用して、独自のショートコードを実装する方法を詳しく解説します。
基本的な作り方から、引数を受け取る属性付きのショートコード、そしてコンテンツを囲む形式の実装まで、実用的なコード例を交えてご紹介します。
add_shortcode関数の基本構造と登録方法
WordPressでショートコードを作成するためには、add_shortcodeという専用の関数を使用します。
この関数は、ショートコードの「タグ名」と、そのタグが呼び出された際に実行される「関数名」を紐付ける役割を持っています。
基本的な記述場所は、テーマ内のfunctions.php、または自作のプラグインファイル内となります。
// ショートコードの登録例
add_shortcode('my_shortcode_tag', 'my_shortcode_handler_function');第一引数には、投稿画面などで使用する際の「タグ名」を小文字の英数字とアンダースコアで指定します。
第二引数には、実際にどのような内容を出力するかを定義した「コールバック関数名」を記述します。
注意点として、ショートコード内では「echo」による直接出力は行わず、必ず「return」で値を返す必要があります。
もしechoを使用してしまうと、ショートコードを記述した場所ではなく、ページの一番上にコンテンツが表示されてしまうという不具合が発生します。
引数なしのシンプルなショートコードを作成する
まずは、決まった定型文やHTMLコードを表示するだけの最もシンプルなショートコードを作成してみましょう。
例えば、記事の最後に必ず表示したい定型の署名や、広告のコードなどをショートコード化すると管理が非常に楽になります。
以下のコードは、「[signature]」と入力した場所に特定のメッセージを表示させる例です。
/**
* シンプルな署名を表示するショートコード
*/
function my_signature_shortcode() {
$content = '<div class="my-signature">';
$content .= '<p>この記事を書いた人：テクニカルライター</p>';
$content .= '<p>最新のWordPress技術情報を発信しています。</p>';
$content .= '</div>';
return $content;
}
add_shortcode('signature', 'my_signature_shortcode');
このコードをfunctions.phpに追記した後、投稿エディタで以下のように入力します。
[signature]実際のWebサイト上では、指定したHTML構造がそのまま展開されて表示されます。
<div class="my-signature">
<p>この記事を書いた人：テクニカルライター</p>
<p>最新のWordPress技術情報を発信しています。</p>
</div>このように、定型的なHTMLパーツを1行のコードで呼び出せるのがショートコードの最大の利点です。
属性（パラメータ）を利用した動的なショートコード
ショートコードをさらに活用するために、外部から引数を渡して動作を変更する「属性（Attributes）」の実装方法を学びましょう。
属性を使用することで、同じショートコードでも、呼び出す場所によってテキストや色、リンク先などを柔軟に変更できるようになります。
この機能を実装する際には、WordPress標準のshortcode_atts関数を利用するのが一般的です。
shortcode_atts関数の役割と重要性
shortcode_atts関数は、ユーザーが指定した属性と、あらかじめ決めておいたデフォルト値を結合してくれます。
これにより、属性が省略された場合でもエラーを防ぎ、意図した動作を保証することが可能になります。
以下の例では、リンクボタンを作成するショートコードを定義し、URLとラベルを属性として受け取ります。
/**
* カスタムボタンを表示するショートコード
* 属性: url, label, color
*/
function my_button_shortcode($atts) {
// 属性のデフォルト値を設定し、入力を受け取る
$attributes = shortcode_atts(
array(
'url' => '#',
'label' => '詳細はこちら',
'color' => '#0073aa',
),
$atts
);
// セキュリティのためのエスケープ処理
$url = esc_url($attributes['url']);
$label = esc_html($attributes['label']);
$color = esc_attr($attributes['color']);
return sprintf(
'<a href="%s" style="background-color:%s; color:#fff; padding:10px 20px; text-decoration:none; border-radius:5px;">%s</a>',
$url,
$color,
$label
);
}
add_shortcode('my_btn', 'my_button_shortcode');このショートコードを使用する際は、以下のように属性を指定します。
[my_btn url="https://example.com" label="資料をダウンロード" color="#ff0000"]実行結果として、指定したURL、色、テキストが反映されたリンクボタンが出力されます。
<a href="https://example.com" style="background-color:#ff0000; color:#fff; padding:10px 20px; text-decoration:none; border-radius:5px;">資料をダウンロード</a>属性を活用することで、「デザインのテンプレートは共通、中身だけを個別に変更」という高度な運用が可能になります。
コンテンツを挟み込む「囲み型」ショートコードの実装
次に、特定のテキストをタグで挟み込んで装飾する「囲み型（Enclosing）」のショートコードについて解説します。
例えば、重要な文章を強調するための「補足ボックス」や「注意書き」を作成する際に非常に便利です。
コールバック関数には、第一引数に属性（$atts）、第二引数に囲まれた中身（$content）が渡されます。
/**
* 注意書きボックスを作成する囲み型ショートコード
*/
function my_alert_box_shortcode($atts, $content = null) {
// 属性の取得
$attributes = shortcode_atts(
array(
'title' => '注意',
),
$atts
);
// 囲まれた中身に対して他のショートコードも適用されるようにdo_shortcodeを実行
$inner_content = do_shortcode($content);
$html = '<div class="alert-box" style="border:2px solid #cf2e2e; padding:15px; margin:10px 0;">';
$html .= '<strong style="color:#cf2e2e;">' . esc_html($attributes['title']) . '</strong>';
$html .= '<div>' . $inner_content . '</div>';
$html .= '</div>';
return $html;
}
add_shortcode('alert', 'my_alert_box_shortcode');このショートコードを投稿画面で使うときは、開始タグと終了タグでテキストを囲みます。
[alert title="重要なお知らせ"]
ここに入力したテキストがボックスの中に表示されます。
[/alert]ここで重要なポイントは、関数内で「do_shortcode($content)」を呼び出している点です。
これにより、ショートコードの中にさらに別のショートコードが記述されていた場合でも、正しく解析されて展開されます。
囲み型のショートコードを自作する際は、入れ子構造への対応を忘れないようにしましょう。
ショートコードの実装における注意点とセキュリティ
ショートコードを自作する際には、Webサイトの安全性と安定性を保つための注意点がいくつかあります。
2026年現在のWordPress開発においても、セキュリティ対策は最も優先すべき事項です。
特に属性としてユーザーの入力を受け取る場合、悪意のあるスクリプトが注入される「XSS（クロスサイトスクリプティング）」への対策が欠かせません。
出力時のエスケープ処理を徹底する
ショートコードの戻り値を作成する際は、必ずWordPressが用意しているエスケープ関数を使用してください。
URLを出力する場合はesc_url()、HTML属性（class名やstyle属性など）を出力する場合はesc_attr()、テキストを出力する場合はesc_html()を使用します。
また、複雑なHTML構造をそのまま出力したい場合は、wp_kses_post()関数を通して許可されたタグのみを残すように処理しましょう。
既存のショートコード名との衝突を避ける
WordPress本体やインストールしているプラグイン、テーマが既に同じ名前のショートコードを使用している場合、後から登録されたもので上書きされてしまいます。
名前の衝突を避けるためには、タグ名の先頭に自分のプロジェクト名やサイト名のプレフィックスを付けることをお勧めします。
例えば、単に「[button]」とするのではなく、「[myproj_button]」のように命名することで、トラブルのリスクを大幅に軽減できます。
ショートコードとブロックエディタの使い分け
現代のWordPressでは、Gutenberg（ブロックエディタ）が主流となっており、カスタムブロックを作成することも可能です。
しかし、PHPの知識だけで手軽に実装でき、過去の膨大なコンテンツでも共通して利用できるショートコードの需要は依然として高いままです。
視覚的にリアルタイムで編集結果を確認したい場合はカスタムブロックを、プログラマティックに柔軟な出力を生成したい場合はショートコードを選択すると良いでしょう。
特に、プラグインから動的なデータを取得して表示するような機能には、現在もショートコードが非常に適しています。
ウィジェットやテンプレートファイルでショートコードを使う方法
通常、ショートコードは投稿や固定ページの本文内でしか動作しません。
しかし、サイドバーのウィジェットや、テーマのテンプレートファイル（PHPファイル）の中でショートコードを実行したいケースもあります。
テンプレートファイル内でショートコードを呼び出すには、do_shortcode()関数を直接使用します。
<?php
// PHPファイル内でショートコードを実行して表示
echo do_shortcode('[my_btn url="https://example.com" label="公式ページへ"]');
?>
また、クラシックなテキストウィジェットなどでショートコードが効かない場合は、以下のフィルターフックをfunctions.phpに追加することで、ウィジェット内でもショートコードが展開されるようになります。
// ウィジェット内でのショートコード実行を許可する
add_filter('widget_text', 'do_shortcode');これにより、サイト全体のあらゆる場所で自作のショートコードを使い回せるようになり、開発効率が劇的に向上します。
まとめ
WordPressのショートコード自作は、PHPの基本的な関数作成の知識があれば誰でも取り組める強力なカスタマイズ手法です。
add_shortcode関数の使い方をマスターすることで、複雑なHTMLの記述から解放され、メンテナンス性の高いサイト運営が可能になります。
属性を利用した動的な制御や、コンテンツを囲む形式の実装を組み合わせれば、表現の幅は無限に広がります。
実装の際は、returnによる値の返却や、shortcode_attsによるデフォルト値の設定、そして徹底したエスケープ処理を心がけてください。
2026年のモダンなWeb開発においても、ショートコードはWordPressの柔軟性を支える重要な技術の一つです。
この記事を参考に、ぜひあなただけの便利なカスタムショートコードを作成して、Webサイトの運用をよりスムーズなものにしていきましょう。