ショートコード（Shortcode）とは？簡単にコンテンツを挿入する仕組み

ショートコードとは

ショートコードは、複雑なHTML、PHP、JavaScriptコードを、短くてわかりやすい文字列に置き換える仕組みです。

基本的な使い方

💡 ショートコードの例

入力：[gallery]
出力：画像ギャラリーが表示される

入力：[contact-form-7 id="123"]
出力：お問い合わせフォームが表示される

入力：[button url="https://example.com"]クリック[/button]
出力：ボタンが表示される

ショートコードの種類

1. 自己完結型（Self-closing）

開始タグのみで完結するタイプ。

[gallery]
[sitemap]
[recent-posts]

2. 囲み型（Enclosing）

開始タグと終了タグで囲むタイプ。

[button]クリックしてください[/button]
[highlight]重要なテキスト[/highlight]
[box]ボックス内のコンテンツ[/box]

3. パラメータ付き

属性（パラメータ）を指定できるタイプ。

[gallery ids="1,2,3" columns="3"]
[button url="https://example.com" color="red"]購入[/button]
[video width="640" height="360"]

WordPress標準のショートコード

WordPressには、いくつかの標準ショートコードが用意されています。

よく使う標準ショートコード

ショートコード	機能	使用例
[gallery]	画像ギャラリー表示	[gallery ids="1,2,3"]
[caption]	画像にキャプション追加	[caption]説明文[/caption]
[audio]	音声ファイル埋め込み	[audio mp3="file.mp3"]
[video]	動画ファイル埋め込み	[video mp4="file.mp4"]
[embed]	YouTube等の埋め込み	[embed]URL[/embed]

[gallery]ショートコードの詳細

基本：[gallery]
画像指定：[gallery ids="1,2,3,4,5"]
カラム数指定：[gallery columns="3"]
サイズ指定：[gallery size="medium"]
リンク先：[gallery link="file"]

✅ [gallery]の便利なパラメータ

ids: 表示する画像のID（カンマ区切り）
columns: 横に並べる画像数（1〜9）
size: 画像サイズ（thumbnail, medium, large）
link: リンク先（file, post, none）

プラグインのショートコード

多くのプラグインが独自のショートコードを提供しています。

ショートコードの使い方

投稿・固定ページで使う

最も一般的な使い方です。エディタで直接ショートコードを入力します。

ブロックエディタ（Gutenberg）の場合

「+」ボタンをクリックしてブロックを追加
「ショートコード」ブロックを選択
ショートコードを入力（例：[gallery]）
プレビューで確認

クラシックエディタの場合

本文エディタの任意の場所にカーソルを置く
ショートコードを直接入力（例：[contact-form-7 id="123"]）
プレビューで確認

ウィジェットで使う

サイドバーやフッターにショートコードを配置できます。

「外観」→「ウィジェット」を開く
「テキスト」ウィジェットを配置したいエリアにドラッグ
ショートコードを入力
「保存」をクリック

⚠️ ウィジェットでの注意点
ウィジェットでショートコードを使う場合は、「テキスト」ウィジェットではなく「カスタムHTML」ウィジェットを使うこともあります。プラグインによって異なるので、動作しない場合は両方試してみてください。

テーマファイル（PHP）で使う

テンプレートファイル内でショートコードを実行できます。

<?php echo do_shortcode('[contact-form-7 id="123"]'); ?>

特定の場所に常にショートコードを表示したい場合に便利です。

カスタムショートコードの作成

functions.phpに記述することで、独自のショートコードを作成できます。

シンプルなショートコードの例

<?php

// [hello]ショートコード

function hello_shortcode() {

    return 'こんにちは！';

}

add_shortcode('hello', 'hello_shortcode');

?>

これで[hello]と記述すると「こんにちは！」と表示されます。

パラメータを受け取るショートコード

<?php

// [button url="..." text="..."]ショートコード

function button_shortcode($atts) {

    $atts = shortcode_atts(array(

        'url' => '#',

        'text' => 'クリック',

    ), $atts);



    return '<a href="' . esc_url($atts['url']) . '" class="button">' . esc_html($atts['text']) . '</a>';

}

add_shortcode('button', 'button_shortcode');

?>

使用例：[button url="https://example.com" text="詳細を見る"]

コンテンツを囲むショートコード

<?php

// [box]コンテンツ[/box]ショートコード

function box_shortcode($atts, $content = null) {

    return '<div class="custom-box">' . do_shortcode($content) . '</div>';

}

add_shortcode('box', 'box_shortcode');

?>

使用例：[box]ボックス内のテキスト[/box]

✅ ショートコード作成のポイント

関数名は一意にする（他と重複しないように）
セキュリティのためesc_html()、esc_url()を使う
デフォルト値を設定する（shortcode_atts）
必ずreturnで返す（echoは使わない）

ショートコードのトラブルシューティング

よくある問題と解決方法

1. ショートコードがそのまま表示される

原因：
・ショートコードが正しく登録されていない
・プラグインが無効化されている
・スペルミス

解決方法：
・プラグインが有効化されているか確認
・ショートコード名のスペルを確認
・角括弧[]が全角になっていないか確認

2. ショートコードが動作しない

原因：
・パラメータが間違っている
・JavaScriptエラーが発生している

解決方法：
・ブラウザの開発者ツールでエラーを確認
・パラメータの記述を確認
・プラグインのドキュメントを確認

3. レイアウトが崩れる

原因：
・ショートコードのHTMLとテーマのCSSが競合

解決方法：
・カスタムCSSで調整
・ショートコード専用のCSSを追加

よくある質問（FAQ）

Q1. ショートコードはどこに記述できますか？

投稿、固定ページ、ウィジェット、テーマファイル（PHPの場合はdo_shortcode関数を使用）など、さまざまな場所で使用できます。ただし、テーマのヘッダーやフッターで直接使う場合は、PHPコードとして記述する必要があります。

Q2. ショートコードを無効化するとどうなりますか？

プラグインを無効化したり、functions.phpから削除したりすると、ショートコードは機能しなくなり、[shortcode]のようにそのまま表示されます。再度有効化すれば、元通り動作します。

Q3. ショートコードをエスケープ（無効化）する方法は？

ショートコードを実行せず、そのまま表示したい場合は、角括弧を二重にします。例：[[gallery]]と記述すると、[gallery]と表示され、ショートコードとして実行されません。

Q4. ショートコードはSEOに影響しますか？

ショートコード自体はSEOに直接影響しません。ただし、ショートコードで生成されるコンテンツ（テキスト、画像、リンクなど）は、通常のコンテンツと同様にSEOの対象となります。適切に使えば、リッチなコンテンツを簡単に追加でき、ユーザー体験の向上を通じてSEOにプラスに働きます。

Q5. ショートコードのネスト（入れ子）はできますか？

はい、可能です。例：[box][button]クリック[/button][/box]のように、ショートコード内に別のショートコードを記述できます。ただし、内側のショートコードを処理するには、関数内でdo_shortcode()を使う必要があります。

Q6. ショートコードとブロックエディタのブロック、どちらを使うべきですか？

可能であれば、ブロックエディタのブロックを使う方が、視覚的に分かりやすく、設定も簡単です。ただし、すべてのプラグインがブロック対応しているわけではないため、ショートコードしか提供されていない場合もあります。また、ウィジェットやPHPファイルで使う場合は、ショートコードの方が便利です。

まとめ

ショートコードは、複雑な機能を簡単に記事に追加できる便利な仕組みです。プログラミング知識がなくても、[shortcode]と記述するだけで、ギャラリー、フォーム、ボタンなど、さまざまな要素を挿入できます。

✅ ショートコード活用のポイント

WordPress標準のショートコードを活用する
プラグインのドキュメントでショートコードを確認
ブロックエディタでは「ショートコード」ブロックを使う
パラメータを正しく記述する（スペース、引用符に注意）
カスタムショートコードはセキュリティに配慮
不要になったショートコードは削除または置き換え

ショートコードを使いこなすことで、WordPressサイトの表現力が大きく広がります。まずは標準ショートコードやプラグインのショートコードから試してみましょう。

ショートコード