WordPressでショートコードを自作すれば、よく使うHTMLやコードに名前を付けて登録し、投稿の好きな場所で呼び出せるようになります。
この記事でわかること：
- Shortcoderプラグインでオリジナルのショートコードを作成する手順
- 作成したショートコードを複数の投稿で呼び出す方法
- 反映されないときの注意点・トラブル対処
この記事では、はじめての方でも迷わないように順を追って解説します。functions.phpを編集せず、管理画面だけで完結できる方法なので安心して進めてください。
目次
ショートコードとは？自作するとできること
ショートコードとは、決まった処理やHTMLを短い「合言葉」で呼び出せるWordPressの仕組みです。角括弧で囲まれたキーワードを投稿に書くだけで、登録しておいた内容がそこに展開されます。
たとえばShortcoderで「お知らせ」という名前のショートコードを作れば、投稿本文には次のように書くだけで、登録済みのお知らせHTMLが表示されます。
［sc name="お知らせ"］［/sc］この1行を書くだけで、毎回同じHTMLをコピペする必要がなくなります。よく使うCTAボタン・注意書き・お知らせバナーなどを、名前で呼び出せるのが自作ショートコードの最大の魅力です。
自己完結型ショートコードと囲み型ショートコードの違い
ショートコードには大きく2種類あります。「自己完結型」と「囲み型」です。
自己完結型は、タグ単体で完結するタイプです。決まった内容をその場所に差し込む用途に向いています。
囲み型は、開始タグと終了タグでコンテンツを挟むタイプです。挟んだテキストを装飾したり加工したりする用途で使います。SANGOテーマの ［box］...［/box］ のように、間の文章を枠で囲むイメージです。
Shortcoderが生成するショートコードは ［sc name="お知らせ"］［/sc］ のように、開始タグと終了タグをセットで書く形式でした。ただし2つのタグの間には何も書きません。表示される内容は管理画面にあらかじめ登録したコードなので、実質的には自己完結型と同じ感覚でそのまま貼り付けて使えます。
Shortcoderで自作するメリット・デメリット
Shortcoderを使う前に、どんな利点と制約があるのかを整理しておきましょう。
メリット：コードを1箇所で管理でき、修正がすべての投稿に反映される
最大のメリットは、コードを1箇所にまとめて管理できることです。ショートコードを呼び出している投稿すべてに、編集内容が自動で反映されます。
たとえば、同じお知らせHTMLを50記事に直接貼り付けていたとします。この場合、文言を1文字変えるだけでも50記事を1つずつ手で修正しなければなりません。これは大変な手間ですし、修正漏れも起きやすくなります。
一方Shortcoderなら、登録したショートコード1箇所を編集するだけで、呼び出している50記事すべてに一括で反映されます。管理する場所が1つになるため、更新作業が劇的に楽になります。
コードをコピペで量産すると修正漏れが起きがちですが、ショートコード化しておけば「直し忘れ」の心配がなくなります。
デメリット：使える形式に制限がある
デメリットは、登録できるコードの形式に制限がある点です。具体的には、PHPコードは扱えないなどの制約があります。詳しくは後述の「ショートコードを自作するときの注意点」で解説します。
STEP1：Shortcoderをインストール・有効化する
まずはShortcoder（WordPress.org公式）プラグインをインストールします。管理画面の左メニューから「プラグイン」→「新規プラグインを追加」を開き、「Shortcoder」で検索して「今すぐインストール」→「有効化」をクリックすれば準備完了です。
STEP2：オリジナルのショートコードを作成する
プラグインを有効化したら、さっそくオリジナルのショートコードを作成していきます。作業はすべて管理画面上で完結し、テーマファイルを触る必要はありません。
1. 管理画面から「Shortcoder」を開く
左メニューの「Shortcoder」をクリックします。ここが作成したショートコードの一覧画面になっており、新しいショートコードを追加するボタンから作成画面に進みます。
2. ショートコードの名前を決める（使える文字：英数字・ハイフン・アンダースコアのみ）
作成画面が開いたら、まずショートコードの名前を入力します。この名前が、あとで投稿から呼び出すときのキーワードになります。
名前に使える文字は、英数字・ハイフン（-）・アンダースコア（_）のみです。日本語やスペース、記号は使えません。oshirase・cta-button・notice_2026のような、半角英数字を中心とした名前を付けましょう。
3. HTML・JavaScript・CSSのコードを貼り付けて保存する
名前を決めたら、コード入力欄に表示させたい内容を貼り付けます。HTML・JavaScript・CSSに対応しています。
試しに、次のようなシンプルなCTAボタンのHTMLを貼り付けてみましょう。そのままコピーして使えます。
<div style="text-align:center; margin:20px 0;">
<a href="https://example.com/" style="display:inline-block; padding:12px 32px; background:#0073aa; color:#fff; border-radius:6px; text-decoration:none;">
詳しくはこちら
</a>
</div>入力が終わったら保存のボタンをクリックします。保存すると一覧画面に戻り、作成したショートコードが追加されているはずです。一覧の「ショートコード」列には、投稿に貼り付けるための呼び出しコード ［sc name="..."］［/sc］ と、クリップボードアイコンの「コピー」ボタンが表示されます。
STEP3：作成したショートコードを投稿で使い回す
ショートコードを作成したら、あとは投稿や固定ページで呼び出すだけです。書き方はシンプルです。
1. ショートコード［sc name=”…”］［/sc］を直接貼り付ける
投稿本文に呼び出しコードを直接書く方法です。STEP2の一覧画面に表示されていたコードを、そのまま貼り付けます。
［sc name="oshirase"］［/sc］この1行を、表示させたい場所に書くだけです。プレビューや公開後の画面では、登録したHTMLがきちんと展開されて表示されます。
2. 一覧画面の「コピー」ボタンからコピーする
複数のショートコードを作成していると、名前を正確に覚えておくのは大変です。そんなときはSTEP2の一覧画面を開いてください。各ショートコードの横に呼び出しコードと、クリップボードのアイコンが付いた「コピー」ボタンが並んでいます。
「ショートコード」列に表示されているこのコピーボタンをクリックしてコピーし、投稿の貼り付けたい場所にそのまま貼り付ければ、名前を手入力するよりも確実です。
応用編：パラメータ（引数）で内容を切り替える
Shortcoderには、呼び出すたびに一部の内容を差し替えられる「パラメータ（引数）」機能があります。これを使うと、1つのショートコードを複数の場面で少しずつ内容を変えて使い回せます。
たとえば、バナー画像を表示するショートコードを作り、画像URLだけをパラメータで切り替える例を考えてみましょう。まずコード内に、パラメータを受け取る目印を埋め込みます。
<img src="%%url%%" alt="バナー" style="max-width:100%;">この %%url%% の部分が、呼び出し時に指定した値へ置き換わります。投稿側では、次のようにパラメータを付けて呼び出します。
［sc name="banner" url="https://example.com/campaign.png"］［/sc］こうすると、同じbannerショートコードを使いながら、記事ごとに違うバナー画像を表示できます。レイアウトは共通のまま、中身だけを差し替えたいときに便利です。
ショートコードを自作するときの注意点
便利なShortcoderですが、いくつか知っておきたい制約や、つまずきやすいポイントがあります。あらかじめ押さえておきましょう。
PHPコードは挿入できない（対応はHTML・JavaScript・CSSのみ）
Shortcoderのショートコードには、PHPコードを直接書くことはできません。対応しているのはHTML・JavaScript・CSSのみです。
そのため、PHPで動的な処理を行いたい場合は、Shortcoderだけでは実現できません。どうしてもPHPが必要な処理は、functions.phpやプラグイン開発など、別の方法を検討する必要があります。
ショートコード名に使える文字
STEP2でも触れたとおり、名前に使えるのは英数字・ハイフン・アンダースコアのみです。
たとえば「お知らせ」のような日本語の名前や、「cta button」のようにスペースを含む名前、「cta!」のような記号を含む名前は使えません。こうした名前を付けようとすると保存できなかったり、投稿で呼び出しても正しく展開されなかったりします。名前は必ず半角英数字を中心に付けましょう。
反映されない・そのまま文字が表示されるときの確認ポイント
投稿に ［sc name="..."］［/sc］ がそのまま文字として表示されてしまう場合、次の点を確認してください。
- ショートコード名にタイプミスがないか（登録名と完全に一致しているか）
- プラグインが有効化されているか
- 同じ名前のショートコードを重複して登録していないか
- ショートコードが動作しない場所（一部のウィジェットやテーマ領域など、ショートコードを解釈しない場所）に貼っていないか
多くの場合、名前の打ち間違いが原因です。心配なときは、STEP3で紹介した「コピー」ボタンからコピーする方法を使うと確実です。
→ 月額330円〜で利用可能、10日間無料お試しあり。
よくある質問
Shortcoderの無料版とPRO版の違いは？
無料版でも、HTML・JavaScript・CSSを使ったショートコードの作成、パラメータ機能、ブロックエディタ（Gutenberg）対応など、基本的な機能はひととおり使えます。多くの用途は無料版で十分にカバーできます。
PRO版では、コードのビジュアル編集、WPMLによる多言語翻訳、リビジョン（変更履歴）、ショートコードの使用箇所検索といった機能が追加されます。
functions.phpにコードを書く方法と何が違うの？
functions.phpにショートコードを登録する方法は、テーマファイルへ直接コードを書く必要があります。記述をミスするとサイト全体が表示されなくなるリスクがあり、テーマを更新すると記述が消える場合もあります。
一方Shortcoderは、すべての作業が管理画面上で完結します。コードエディタを開かずに済むため、初心者でも安全に使い回せるショートコードを作れます。
ショートコードが反映されない・そのまま文字が表示されるときは？
主な原因は、ショートコード名の誤字、同じ名前の重複登録、ショートコードを解釈しない場所への貼り付けです。まずは登録名と投稿に書いた名前が完全に一致しているかを確認してください。詳しい確認ポイントは「ショートコードを自作するときの注意点」で解説しています。
ブロックエディタ（Gutenberg）でも使えますか？
はい、使えます。公式ドキュメントによると、専用のShortcoderブロックを追加して作成済みのショートコードを選ぶ方法が用意されています。もちろん、通常の段落ブロックに ［sc name="..."］［/sc］ を直接書いても動作します。
ショートコードにPHPコードを入れられますか？
いいえ、入れられません。Shortcoderが対応しているのはHTML・JavaScript・CSSのみで、PHPコードは扱えない仕様です。理由と対処法は「ショートコードを自作するときの注意点」で詳しく解説しています。
Shortcoder以外におすすめのショートコード作成プラグインはありますか？
用途によっては「Shortcodes Ultimate」も選択肢になります（有効インストール数400,000以上）。ただしこちらは、ボタン・タブ・アコーディオンといった既製のUI部品をショートコードで呼び出すためのプラグインです。自分でHTMLを登録して使い回すShortcoderとは役割が異なります。
オリジナルのコードを名前を付けて管理したいならShortcoder、装飾パーツをすぐ使いたいならShortcodes Ultimate、と考えると選びやすいです。
作成したショートコードの一覧はどこで確認できますか？
管理画面の左メニュー「Shortcoder」を開くと、作成済みのショートコードが一覧で表示されます。各ショートコードの呼び出しコードもここで確認できるので、投稿に貼り付けたいときはこの画面からコピーすると確実です。
投稿一覧をショートコードで表示することはできますか？
投稿一覧の自動表示は、Shortcoderのスコープ外です。Shortcoderは登録したHTML・JavaScript・CSSを呼び出すためのプラグインで、投稿データを条件で抽出して一覧化する機能は備えていません。投稿一覧を表示したい場合は、その用途に特化した別のプラグインを検討してください。
まとめ
Shortcoderを使えば、functions.phpを編集することなく、管理画面だけでオリジナルのショートコードを自作できます。よく使うHTMLに名前を付けて登録すれば、複数の投稿で名前を呼び出すだけで使い回せます。
ポイントを振り返ります。
- ショートコードは1箇所で管理でき、編集すれば呼び出し先すべてに反映される
- 名前に使えるのは英数字・ハイフン・アンダースコアのみ
- 対応形式はHTML・JavaScript・CSSで、PHPは扱えない
- パラメータを使えば、1つのショートコードで内容を切り替えられる
同じコードを何度もコピペしていた作業から解放され、記事の更新やメンテナンスがぐっと楽になります。まずは1つ、よく使うHTMLをショートコード化することから始めてみてください。
