ショートコードを作って記事に独自機能を追加する方法

公開：2025.09.18

この記事はこんな人向けです

固定ページや投稿に「料金表」「注意書き」「ボタン」などの共通パーツを楽に挿入したい
Gutenberg（ブロックエディタ）でも使えるショートコード運用のコツを知りたい
functions.phpに触るか専用プラグイン化するかの判断基準を整理したい

WordPressレベル別対応難易度

Lv1 Lv2 Lv3 Lv4 Lv5 Lv6 Lv7

レベル判断は、右のレベル表（スマホは画面下）を参考にしてください。

赤：外注推奨オレンジ：条件付き自力可緑：自力対応可

ショートコード運用の全体像と対応方針

WordPressショートコードは、記事内に共通パーツや繰り返し機能を簡単に呼び出すための仕組みです。
実装自体はシンプルですが、エスケープ・セキュリティ・保守性まで含めて設計するのが運用のコツです。
まずは「何を誰がどこまで運用するか」を決め、レベルに応じて安全に進めましょう。

ショートコード機能追加～WordPressレベルごとのおすすめ対応

「設計」と「用途」を決めて外注

ショートコードは、投稿本文に [price] のような短い記述で機能を呼び出せる便利な仕組みです。
ですが、functions.phpの編集やプラグイン追加が必要になるため、誤操作や表示崩れのリスクもあります。
赤レベルの方は下記の要件だけを決めて、外注業者へ渡すことをおすすめします。

何を挿入したいか（例：価格表、注意書き、CTAボタン、FAQ、地図、埋め込みフォーム）
どの投稿タイプで使うか（投稿／固定ページ／カスタム投稿）
誰が更新するか（更新担当者、誤入力の回避方針、編集ガイド）

この3点が固まっていれば、外注業者側は「ショートコード名」「属性（オプション）」「出力ルール（HTML構造・クラス）」を設計しやすくなります。
セキュリティ面（XSS対策のエスケープや属性のバリデーション、do_shortcodeの乱用回避など）は実装側の守備範囲なので、無理せず任せるのが良いです。

なお、Gutenbergブロックでもショートコードは使えますが、「どのブロックで使うか」を先に決めておくと編集者の迷いが減って更新が楽になります。

小さく始めて、後からプラグイン化

テーマやプラグインを多少触ったことがあるオレンジレベルの方なら、小さな用途から始めるのはありです。ポイントは「スコープを限定」し、最初から保守を想定することです。

用途は1つに絞る（例：「注意書き」だけ／「価格」だけ）。最初から多機能にしない。
出力HTMLはシンプルにする。サイトの既存クラスへ合わせると利用しやすいです。
属性（オプション）を最小限にする。後から拡張できる名前設計（例：type=”primary|outline”）。
エスケープ／サニタイズの方針をメモ化する（管理画面やREADMEに残す）。
テスト投稿で表示崩れ・改行・スマホ幅を確認する。キャッシュ系プラグインの影響も見る。

最初はテーマ側で動かしても、運用が回り出したら子テーマ or 小さな専用プラグインへ切り出すのが定石です。テーマ変更時の移植性が上がり、将来のトラブルを減らせます。
また、ショートコード乱立は運用事故のもとになります。命名規則（接頭辞や用途カテゴリ）を決め、一覧ドキュメント（使い方／属性の表）を用意しましょう。

Gutenbergとの相性面では、「ショートコードブロック」での挿入や、カスタムブロック化（必要なら）を視野に入れます。編集者がブロック一覧から選ぶだけで使えるようにすると、教育コストが下がります。

「設計・品質・運用」の三位一体で

要件定義と情報設計ができる人は、プラグイン化前提で進めるのが長期的に有利です。品質と運用を揺るぎなくする観点を整理します。

責務分離：ショートコード登録、属性バリデーション、テンプレート描画、CSS/JS読込を分割。
テンプレート化：出力HTMLはテンプレートファイル分離。テーマオーバーライド方針を決める。
国際化／多言語：翻訳関数への対応、属性のローカライズ可否を方針化。
セキュリティ：属性は型・許容値で検証、出力は文脈別エスケープ、URLはホワイトリスト。
パフォーマンス：重いデータ取得はトランジェント等で簡易キャッシュ。ループ内多用の回避。
後方互換：属性のデフォルト保持、Deprecated通知の設計、置換ポリシー（検索置換計画）。
編集者体験：Gutenbergブロック化／プレビュー対応、UIラベル整備、エラーメッセージ明瞭化。
監査性：どの投稿で使われているかの横断一覧（検索・レポート）を用意。

実運用では、「ショートコード → ブロック」への段階的移行も検討対象。既存記事資産を守りつつ、編集時のUXをじわっと改善できます。CIでの静的検査やE2Eチェックを入れておくと、更新時の事故も防ぎやすいです。

ショートコード開発を外注する場合のポイント

「短期で仕上げたい」「セキュリティが不安」「将来的にブロック化したい」場合は、最初から外注してしまうのが近道です。費用と流れ、準備物を整理します。

項目	ポイント
費用の目安	・シンプルな表示（属性最小） … 20,000円～50,000円・複数属性／テンプレート分離 … 50,000円～120,000円・Gutenbergブロック化や一覧管理 … 120,000円～ ※緊急対応／要件変更／既存テーマの複雑さで変動
依頼の流れ	1. 要件共有（用途・出力イメージ・属性・使用範囲） 2. 見積～合意（工数・納期・検証項目・引き渡し物） 3. 実装・検証（ステージングで表示確認／権限テスト） 4. 納品（利用マニュアル・一覧ドキュメント・撤去手順） 5. 初期サポート（軽微修正・属性追加の相談窓口）
準備しておくと便利	・出力イメージのラフ（参考ページやスクショでもOK）・利用予定の投稿リンク数本（本番と同じパターンを提示）・既存のCSSクラス名・ユーティリティ（例：wpg-btn, wpg-note）・編集者ごとの運用ルール（誤入力されやすい点の共有）・将来の拡張予定（多言語・属性追加・ブロック化など）