Webサイトでよく使うボタンやギャラリー、メッセージボックスなどを記事内で手軽に再利用したいと思ったことはありませんか。WordPressのショートコードを使えば、少ないコードでそうした機能を何度も呼び出せるようになります。この記事では「ショートコード 作り方 基本」というキーワードに応え、初心者でもわかる基本的な仕組みから属性やネスト、セキュリティ対策まで、実践的な方法を最新情報にもとづいて解説します。これを読めば、オリジナルのショートコードを自信をもって作れるようになります。
目次
ショートコード 作り方 基本とは何か
ショートコードとは、記事やページのコンテンツ内で使う短いタグ形式の記述で、WordPressがそのタグを検知して特定の関数を実行し、表示を置き換える仕組みです。
この仕組みにより、HTMLやPHPの知識が浅くても共通部品の挿入や動的コンテンツの呼び出しが可能になります。
「ショートコード 作り方 基本」という観点では、特に次のポイントを理解することが重要です：定義のしかた／使用場所／属性付きか否か／囲み型か単一型か。
ショートコードとは何か
ショートコードは角かっこ“[ ]”で囲まれたタグ形式の文字列であり、テーマやプラグインで登録されたコールバック関数と対応しています。
記事内やページ、ウィジェットなどに記述すると、公開時に対応する出力がその位置に挿入されます。
この仕組みにより一度定義した機能を繰り返し使えるようになり、コードの重複を減らしメンテナンス性が向上します。
基本的な構成要素
ショートコードには以下の要素があります：タグ名／属性（atts）／囲み型（contentが伴う）か単一型かのタイプ。
タグ名は小文字とアンダースコアで構成されることが望ましく、ハイフンを使うことも可能ですが名前の衝突リスクに注意します。
属性は shortcode_atts 関数を使ってデフォルト値とユーザー指定値をマージすることで扱います。囲み型ではタグ間に記述された content を取得できます。
ショートコードのメリットと注意点
主なメリットは再利用性の高さ／編集者の非エンジニアでも使える／記事を書く速度アップ／テーマやプラグインの依存を減らせること。
一方で注意点として：戻り値を返すこと（echoしない）／ユーザー入力のサニタイズ／名前の衝突回避／処理が重くなると表示速度に影響することがあります。
WordPressにショートコードを実際に作る方法
ここからは、WordPressにオリジナルのショートコードを実装する手順を、最新情報をもとにわかりやすく手順ごとに説明します。
functions.php ファイルまたは独自プラグインを用いることが一般的で、どちらでも機能は同じですがコードの再利用性とテーマ変更時の保守性を考えるとプラグイン化が望ましいです。
PHPの記述と WordPress Shortcode API の基本関数を使って、シンプルな例から属性付き、囲み型まで順に進めます。
ショートコードを定義する
まず functions.php ファイルかカスタムプラグイン内に PHP 関数を書きます。関数は、`$atts` 引数（ユーザーが指定する属性）と、囲み型の場合は `$content` 引数を受けとる構造になります。
例えば、「Hello, World」というテキストを返すシンプルなショートコード関数を定義してから add_shortcode を用いて登録します。これだけで [helloworld] のように記事内で使えるようになります。
属性付きショートコードの作成
ユーザーがショートコード呼び出し時にパラメータを渡せるように、属性（attributes）を持たせることができます。これには shortcode_atts 関数を使用し、デフォルト値を設定しつつユーザー指定のものと統合します。
属性の値は esc_attr や esc_html でエスケープして安全性を確保します。例えばテキストや背景色などを属性で制御可能です。
囲み型ショートコードとネスト
囲み型ショートコードは、開始タグと終了タグに挟まれた content を取得して表示に反映させるものです。
また、content 内に別のショートコードを含めたい場合は do_shortcode を呼び出してネストを処理します。そうしないと中のショートコードがただのテキストとして出力されてしまいます。
属性やタイプによる応用例とコード例
ここでは、実際に使われる応用例を通じて属性の使い方／タイプの違い／ネストの処理などを具体的に紹介します。
色変更／サイズ指定／リンク付きボタン／動的データの挿入など、利用頻度の高いパターンを網羅しますので、自分のサイトに合わせて応用できるようになります。
色やサイズを指定できるデザインボタン
以下は属性で文字列と色、サイズを指定できるボタンの例です。
“`php
function custom_button_shortcode($atts) {
$atts = shortcode_atts(array(
‘text’ => ‘Click Here’,
‘url’ => ‘#’,
‘color’ => ‘blue’,
‘size’ => ‘medium’
), $atts);
$text = esc_html($atts[‘text’]);
$url = esc_url($atts[‘url’]);
$color = esc_attr($atts[‘color’]);
$size = esc_attr($atts[‘size’]);
return ‘‘. $text .’‘;
}
add_shortcode(‘button’, ‘custom_button_shortcode’);
“`
このように属性を使えばボタンの見た目やリンク先を呼び出し時に自由に変えられ、コードの汎用性が高まります。
囲み型でメッセージボックス
囲み型ショートコードの例として、囲まれたテキストを含むメッセージボックスを作るコードを示します。
“`php
function message_box_shortcode($atts, $content = ”) {
$atts = shortcode_atts(array(
‘type’ => ‘info’ // info, warning, error など
), $atts);
$type = esc_attr($atts[‘type’]);
$box = ‘
$box .= do_shortcode($content);
$box .= ‘
‘;
return $box;
}
add_shortcode(‘message’, ‘message_box_shortcode’);
“`
呼び出し例として `[message type=”warning”]注意書きの内容[/message]` のように記述すれば、その種類に応じた装飾ボックスが表示されます。
動的データやユーザー情報を表示する例
ショートコードは固定のHTMLだけでなく、動的データやユーザーに応じた情報を表示するのにも適しています。
例えば現在のログインユーザーの名前を取得して「ようこそ、〇〇さん」といったメッセージを表示するショートコードや、現在の日付や投稿件数を表示する機能です。
このような例では PHP の date 関数や WordPress のユーザー情報関数、投稿取得関数などを使い、破損しない安全な出力を心がけます。
ベストプラクティスとよくある間違い
ショートコードの作り方基本を理解したうえで、実際に実装する際に失敗しないための注意点や効率よく保守性を高めるためのコツを紹介します。
ここで紹介する方法を取り入れれば、将来的にテーマを変更しても問題なく使い続けられるコードが書けるようになります。
名前空間と接頭辞での衝突回避
複数のテーマやプラグインで同じショートコード名を使うと意図しない表示になることがあります。
これを避けるために namespace 的にテーマ名やプロジェクト名を接頭辞として使い、例として theme_button や proj_message のように一意な名前にします。
また、関数名もそのプロジェクトの接頭辞を付けて整理することで重複を避けやすくなります。
戻り値を使うこととエコーしないこと
ショートコードの関数では echo を使わず、必ず文字列を return するようにします。
echo を使うと出力タイミングがコンテンツ処理の流れと一致せず、意図しない場所に出力されたり、他のショートコードと干渉したりする原因になります。
return することで WordPress の do_shortcode の処理にのり、コンテンツとして正しい場所に挿入されます。
セキュリティとサニタイズ
ユーザーが属性で入力する値や content に含まれる HTML を扱う場合、サニタイズが重要です。
文字列なら esc_html／esc_attr を使用し、不必要な HTML タグは除去する。囲み型の場合 content 内に他のショートコードがあれば do_shortcode を使うが、その後 the_content フィルターやタグの制限をかけることを検討します。
SQLクエリを内部で使うような場合はプリペアステートメントやキャッシュを使って負荷を抑えます。
パフォーマンスとキャッシュの考慮
ショートコードが重い処理（複数の DB クエリや外部 API 呼び出しなど）を行うと表示速度に影響します。
可能であれば処理結果をキャッシュして使い回すか、遅延処理や軽量化を図ることが望ましいです。
また、必要な CSS や JavaScript を読み込む際は条件付きで読み込むようにして、ページ全体のロードを軽くすることが重要です。
ショートコードの活用事例と比較
ここでは実際にどのようなシーンでショートコードが効果的かを示し、他の方法との比較も行います。これにより「ショートコード 作り方 基本」というテーマがサイト運営上どのように活きるかを理解していただけます。
共通コンテンツの再利用
会社の営業時間や著者情報、免責事項など、複数ページで同じ情報を表示したい場合、ショートコードにしておくと修正が1か所で済みます。
例えば [working_hours] や [author_bio] のようなショートコードを作成しておけば、更新時の手間が大幅に減ります。
テーマテンプレートやブロックとの比較
同じような機能を実現する方法として、テーマテンプレートパーツや Gutenberg ブロックがありますが、それぞれにメリットとデメリットがあります。
ショートコードは柔軟性が高く文字コンテンツの中に埋め込みやすい一方、ブロックではよりビジュアルな編集体験が得られます。テンプレートパーツはテーマに強く依存するため、テーマ変更時の互換性に劣ることがあります。
互換性と将来のメンテナンス
テーマを変えたりプラグイン構成を変更したりする際、ショートコードが使えなくなることがあるため、コードはなるべくテーマとは独立した形にすることが望ましいです。
具体的には、機能をプラグインとして切り出す／子テーマやムープラグインに記述する／依存するリソース（CSS/JS）が限定的であることを確保することなどが挙げられます。
よくある問題とトラブルシューティング
実際にショートコードを作ったとき、動かない・表示が崩れる・属性が反映されないなどの問題に遭遇することがあります。
この章では具体的な原因とその対策を紹介しますので、自分で調査するときのヒントにしてください。
コードを記述した場所が誤っている
functions.php に書いたのにテーマを変更すると消えてしまう／子テーマではなく親テーマを書いてしまってテーマアップデートで上書きされてしまうことがあります。
これを回避するには機能をプラグイン化するか子テーマ（または MU プラグイン）に記述するのが安全です。
属性が反映されない
属性が指定してあるにも関わらず反映されない原因として、属性名が大文字小文字を正しく使っていない／デフォルト値と指定値の統合が上手くいっていない／escape 処理で値が削られてしまっている、あるいはショートコードが囲み型で content を扱っていないなどが考えられます。
ネストしたショートコードが動かない
ショートコード内に別のショートコードを書いた場合、囲み型のコールバック関数で必ず do_shortcode を使うようにします。
そうしないと中のショートコードがただのテキストとして表示されます。また、無限ループにならないよう処理を工夫します。
まとめ
ショートコードの作り方基本を押さえれば、WordPress でオリジナル機能を効率よく再利用することができます。定義と登録／属性の扱い／囲み型とネスト／セキュリティとパフォーマンスといった要素を理解することが重要です。
さらに、名前の衝突を避ける接頭辞の付与／戻り値重視／サニタイズの徹底などが、長く使えるコードを書くためのコツです。
まずは簡単なショートコードを作って使い、徐々に応用例を増やしていくと、記事作成やサイト管理が格段に楽になります。
ぜひこの基本編をマスターして、サイト運営の効率化と機能性の向上に役立ててください。
コメント