2026年5月20日

WordPressのショートコードを作成する方法

カスタマイズ

はじめに

WordPressのショートコードは [my-shortcode] のような短いタグを記事本文に挿入してPHPの出力を埋め込む仕組みです。ボタン・注意書き・問い合わせフォームへのリンクなど、再利用可能なコンポーネントに便利です。

症状・原因

記事内に同じHTMLブロックを何度も貼り付けている
非エンジニアでも使いやすい再利用コンポーネントを作りたい
ショートコードに属性で値を渡したい
Gutenbergでショートコードが表示されない

解決手順

ステップ1：基本的なショートコードを作成する

// functions.php

// [my-button] → ボタンHTMLを出力
add_shortcode('my-button', function(array $atts, ?string $content = null): string {
    // 属性のデフォルト値を設定
    $atts = shortcode_atts(
        [
            'url'    => '#',
            'color'  => 'primary',
            'target' => '_self',
            'text'   => 'クリック',
        ],
        $atts,
        'my-button'
    );

    // 出力はHTMLを返す（echo しない）
    return sprintf(
        '<a href="%s" class="btn btn-%s" target="%s" rel="%s">%s</a>',
        esc_url($atts['url']),
        esc_attr($atts['color']),
        esc_attr($atts['target']),
        $atts['target'] === '_blank' ? 'noopener noreferrer' : '',
        esc_html($atts['text'] ?: $content)
    );
});

記事内での使い方:
[my-button url="https://example.com" color="primary" text="詳細を見る"]
[my-button url="/contact" color="secondary" target="_blank"]お問い合わせ[/my-button]

ステップ2：クロージングタグ付きショートコードを作る

// [alert type="warning"]注意事項です[/alert]
add_shortcode('alert', function(array $atts, ?string $content = null): string {
    $atts = shortcode_atts(
        ['type' => 'info'],  // info / warning / danger / success
        $atts,
        'alert'
    );

    $icons = [
        'info'    => 'ℹ️',
        'warning' => '⚠️',
        'danger'  => '🚨',
        'success' => '✅',
    ];
    $icon = $icons[$atts['type']] ?? $icons['info'];

    return sprintf(
        '<div class="alert alert-%s" role="alert">%s %s</div>',
        esc_attr($atts['type']),
        $icon,
        wp_kses_post(do_shortcode($content ?? ''))
    );
});

ステップ3：よく使うショートコードパターン

// [year] → 現在の年を表示（著作権表示に便利）
add_shortcode('year', fn(): string => esc_html(date('Y')));

// [login-link] → ログイン/ダッシュボードリンク
add_shortcode('login-link', function(): string {
    if (is_user_logged_in()) {
        return '<a href="' . esc_url(admin_url()) . '">ダッシュボード</a>';
    }
    return '<a href="' . esc_url(wp_login_url(get_permalink())) . '">ログイン</a>';
});

// [post-count post_type="news"] → 投稿数を表示
add_shortcode('post-count', function(array $atts): string {
    $atts  = shortcode_atts(['post_type' => 'post'], $atts, 'post-count');
    $count = wp_count_posts(sanitize_key($atts['post_type']));
    return esc_html($count->publish ?? 0);
});

ステップ4：Gutenbergブロックでショートコードを使う

Gutenbergでショートコードを使うには:
1. ブロック追加（+ボタン）→「ショートコード」を選択
2. ショートコードを入力: [my-button url="/contact" text="お問い合わせ"]
3. プレビューで確認

または、ショートコードをGutenbergブロックに移行:
→ Block Development で register_block_type() を使う
→ @wordpress/create-block でスキャフォールドを作成

ステップ5：ショートコードをテンプレート内で使う

// テンプレートファイル内でショートコードを実行
echo do_shortcode('[my-button url="/contact" text="お問い合わせ" color="primary"]');

// ウィジェットテキストでもショートコードを有効化
add_filter('widget_text', 'do_shortcode');

// ショートコードが登録されているか確認
if (shortcode_exists('my-button')) {
    echo 'ショートコード登録済み';
}

// ショートコードを削除
remove_shortcode('my-button');

注意事項

ショートコードのコールバックは必ず文字列を return してください。echo で出力すると予期しない場所に挿入されます
ユーザーが属性値を入力できる場合は、必ず esc_attr()・esc_url()・esc_html() でエスケープしてください
WordPress 5.0以降はGutenbergブロックの使用が推奨されています。新規開発ではカスタムブロックの作成を検討してください
ショートコード名はハイフン使用可・スペース不可・小文字推奨です

まとめ

add_shortcode('名前', コールバック) で登録し、コールバックはHTMLを return します。shortcode_atts() でデフォルト値付きの属性を処理し、すべての値は出力前にエスケープしてください。テンプレート内では do_shortcode() で実行できます。

Post Views: 9