ショートコードは、角括弧で囲んだ短い文字列を、フォームやギャラリーなどの完成した表示へ置き換えるWordPressの仕組みです。 初心者はコードを暗記せず、プラグインや公式資料が示した文字列をそのまま「ショートコード」ブロックへ貼り、プレビューで結果を確かめれば使えます。
たとえば
[gallery ids="12,34"]
は、投稿本文に長いHTMLを書く代わりに画像IDを指定する書き方です。ショートコードはWordPress本体または有効なプラグイン・テーマが登録して初めて動きます。知らない文字列を推測して作るものではありません。
ショートコードは「入力」と「表示結果」が違う
編集画面で見える短い文字列が入力、公開ページで展開されたフォームや一覧が表示結果です。入力文字列そのものが公開ページに残った場合は、正常に変換されていません。
編集画面へ入力する例
[gallery ids="12,34" columns="2"]
PCはコードを選択してCtrl+C、スマートフォンはコードを長押ししてコピーしてください。
公開ページで期待する結果
上の結果は仕組みを見分けるための実物大の見本です。自分のサイトでは指定した画像が並びます。WordPress公式のShortcode APIでも、登録済みのタグを本文から探し、処理結果へ置き換える仕組みと説明されています。
コピーして試せるショートコード例
次の灰色のコード欄は、行の先頭から末尾まで選択してコピーできます。これはWordPress本体が備えるギャラリーの例です。先にメディア画面で使いたい画像の添付ファイルIDを確認し、
12
と
34
だけを自分の画像IDへ置き換えてください。
2枚を2列で表示するコピー用ソース
[gallery ids="12,34" columns="2"]
PCはコードを選択してCtrl+C、スマートフォンはコードを長押ししてコピーしてください。
3枚を3列で表示するコピー用ソース
[gallery ids="12,34,56" columns="3"]
PCはコードを選択してCtrl+C、スマートフォンはコードを長押ししてコピーしてください。
中サイズを指定するコピー用ソース
[gallery ids="12,34" columns="2" size="medium"]
PCはコードを選択してCtrl+C、スマートフォンはコードを長押ししてコピーしてください。
コピー後に変更するのは、画像ID、列数、公式に用意されたサイズ名だけです。
gallery
、
ids
、
columns
、角括弧、半角イコール、引用符は消しません。自分の画像IDが分からないまま公開すると、画像が出ないか別の画像を指すため、まず下書きページで試します。
画像IDを確認する手順
- 管理画面の「メディア」→「ライブラリ」を開く
- 使いたい画像を一枚選ぶ
-
ブラウザのURLに含まれる
item=数字または編集画面のURLに含まれるpost=数字を確認する -
その数字をコード例の
12と置き換える - 二枚目以降も同じように確認し、半角カンマで区切る
画面構成によってURLの表記が異なる場合があります。その場合は推測で番号を入れず、ギャラリーブロックを使うか、利用中の管理画面の公式手順を確認してください。
貼る前に発行元を確認する
- プラグインの設定画面や公式手順からショートコードをコピーする
- 先頭と末尾の角括弧を含めてコピーできたか確認する
- 表示したい固定ページまたは投稿を開く
- 公開前にプレビューを開く
入力した文字が、そのまま飾られるのではないんですね。長いフォームの部品が一行の札に畳まれているみたいで、少しだけ親しみが湧きました。
その感じで合っているよ。札を受け取るプラグインが動いていれば、表示の組み立てはWordPress側がしてくれるんだ。
自分で英語を考えなくてよいのはほっとしました。でも、古い記事から拾った文字でも使えるのかは、まだ少し心配です。
そこに気づけたのは大切だね。いま使っているプラグインの管理画面で発行されたものを優先して、古い見本は形を知るためだけに見よう。
ブロックエディターへ貼る手順
- 管理画面の「固定ページ」または「投稿」から対象を編集する
- 本文の挿入位置で「＋」を押す
- 検索欄へ「ショートコード」と入力する
- 「ショートコード」ブロックを選ぶ
- 角括弧を含む全文を貼り付ける
- 右上の「プレビュー」で新しいタブを開く
- 目的のフォームや一覧が見えたら「更新」または「公開」を押す
ショートコードブロックには、通常の段落ブロックのような文字装飾設定がありません。色や余白を変えたいときは、まずプラグイン側のデザイン設定を探します。
「カスタムHTML」と「ショートコード」が並んでいて、見た目が似ていました。HTMLのほうが何でも入りそうで、そちらを押しかけました。
今回は「ショートコード」を選ぼう。カスタムHTMLはHTMLタグを書くための場所だから、プラグインが案内した角括弧の文字には専用ブロックが分かりやすいよ。
貼った直後の編集画面では、まだ角括弧のまま見えています。この状態で失敗だと思って消さずに、先にプレビューを開けばいいですか。
そうだよ。編集画面の見た目だけで決めず、プレビューで結果を見るんだ。表示がおかしければ更新せずに戻れるから、落ち着いて試せるよ。
成功したかを3点で確認する
- 公開ページに角括弧の文字が残っていない
- フォーム、一覧、ギャラリーなど期待した内容が表示される
- 送信やボタンなど、必要な操作を自分で一度試せる
見た目だけでなく操作まで確かめます。問い合わせフォームならテスト送信し、完了表示と受信先を確認します。動かないときは、文字を何度も書き換えず、発行元とプラグインの有効状態を確認してください。
新しくWordPressを始める人のサーバー選び
ショートコードは一般的なWordPress環境で使えます。すでにサイトがある人には追加契約は不要です。これから独自ドメインで始める人だけ、管理画面の案内や始めやすさを比較してください。
エックスサーバー
WordPressの導入から管理まで公式手順を見ながら進めたい人向けの候補です。
向いている人： サポート情報を確認しながら長く運営したい初心者
利点： WordPress向けの設定案内を一か所で追いやすい
注意点： ショートコードの動作は利用するプラグインにも左右されます。契約だけで動作が保証されるわけではありません。
料金： 契約期間やキャンペーンで変動。公式ページで最新条件を確認
エックスサーバーの開始条件を見る
ロリポップ
小さなサイトを低価格帯から始めたい人が比較しやすい候補です。
向いている人： まず一つのWordPressで操作を覚えたい人
利点： ライト以上でWordPressを始められ、費用を抑えやすい
注意点： 最安プランではWordPress条件が異なります。ライト以上を確認してください。
料金： 月額99円〜。WordPress用途はライト以上が目安
ロリポップのWordPress対応プランを見る広告・PRを含みます。すでにWordPressを運営中なら、ショートコードのためだけにサーバーを乗り換える必要はありません。新しくサイトを始める人だけ、公式ページで最新料金と条件を確認してください。
ショートコードはどこから取得するのか
ショートコードは、インターネット上の例を適当にコピーするのではなく、実際に利用している機能の管理画面から取得します。フォームならフォーム作成画面、予約機能なら予約カレンダーの設定画面、目次やランキングならそのプラグインの設定画面を開きます。「埋め込み」「ショートコード」「このコードをコピー」などの表示を探してください。
- WordPress管理画面で、表示したい機能を作成する
- 作成したフォームや一覧を一度保存する
- 保存後に表示されたショートコードを全文コピーする
- コピー元の機能名と対象ページをメモする
- 記事編集画面を別タブで開いて貼り付ける
保存前にはショートコードが発行されない製品があります。また、同じプラグインでもフォームごとにIDが違います。別フォームのコードを流用すると、表示自体は成功しても内容が違うため、「角括弧が消えたから成功」とは判断できません。
コピー元が正しいか確認する3点
| 確認するもの | 見る場所 | 間違えた場合 |
|---|---|---|
| 機能名 | フォーム・ギャラリーなどの編集画面 | 別の内容が表示される |
| ID | ショートコード内の数字と管理画面 | 空白または別データになる |
| 発行元 | プラグイン名・公式マニュアル | 停止後に文字列のまま残る |
発行元が分からない文字列は、公開ページへ貼らないでください。タグ名を検索する前に、現在有効なプラグインの一覧と、機能を作った管理画面を確認するほうが確実です。
コピーしてから公開するまでの完全手順
1. 貼るページを下書きで開く
管理画面の「固定ページ」または「投稿」から対象ページを開きます。すでに公開中なら、いきなり本文を置き換えず、変更前の位置と内容を確認します。フォームを追加する場合は、読者が何を入力する場所なのか分かる見出しや説明文を先に用意します。
2. ショートコードブロックを追加する
表示したい位置の「＋」を押し、検索欄へ「ショートコード」と入力します。「カスタムHTML」や「コード」ではなく、ウィジェット分類にある「ショートコード」を選びます。専用ブロックを使うと、普通の文章と命令文字列を分けて管理できます。
3. 発行元からコピーした全文を貼る
ブロック内を一度クリックし、コピーした文字列を貼ります。先頭の角括弧から末尾の角括弧までが一組です。貼り付け後に余分な見出し、説明文、「コピーしました」という通知まで入っていないか確認します。引用符が曲がった記号へ変わっていた場合は、手入力で直し続けず元画面から再コピーします。
4. プレビューで表示と位置を確認する
右上の「プレビュー」から新しいタブを開きます。目的の内容へ変換されたか、見出しの直下にあるか、前後の文章と重なっていないかを確認します。フォームなら入力欄の名前、必須表示、送信ボタンまで見ます。ギャラリーなら画像の順番、列数、画像の切れを確認します。
5. 実際の操作を最後まで試す
表示されただけでは完了ではありません。フォームはテスト送信して受信を確認し、ボタンはリンク先を開き、絞り込みや検索欄は結果が変わるところまで操作します。ログイン中だけ表示される機能もあるため、公開後はログアウト状態または別ブラウザでも同じ操作を試します。
6. スマートフォン表示を確認して公開する
長い入力欄、表、画像一覧が画面幅からはみ出していないか確認します。ショートコードの表示は発行元プラグインのCSSに左右されるため、PCで正常でもスマートフォンでは横にはみ出すことがあります。問題があれば公開せず、製品のレスポンシブ対応設定や列数を確認します。
用途別に見るショートコードの読み方
| 用途 | よく含まれる指定 | 公開前に試すこと |
|---|---|---|
| お問い合わせフォーム | フォームID・タイトル | 入力、エラー表示、送信、受信 |
| 予約カレンダー | カレンダーID・対象サービス | 日付選択、空き状況、予約完了 |
| ギャラリー | 画像ID・列数・サイズ | 画像順、拡大、スマホの列数 |
| 記事一覧 | カテゴリー・件数・並び順 | 対象記事、件数、次ページ |
| 会員向け表示 | 権限・ログイン状態 | ログイン前後の見え方 |
表中の指定名は製品により異なります。たとえば同じフォームIDでも、
id
、
form_id
、数字だけなど書式が違います。他製品の説明を混ぜず、自分が使う製品の発行画面を基準にしてください。
ギャラリー例を自分の画像へ置き換える
この記事のコピー用ソースは、WordPress本体のギャラリーを例にしています。
ids="12,34"
は画像12番と34番を使うという意味で、
columns="2"
は2列表示の指定です。数字をそのまま使っても、あなたのサイトに同じIDの画像があるとは限りません。
- メディアライブラリで1枚目を開き、画像IDを確認する
- 2枚目も開き、別の画像IDを確認する
-
12,34を自分の2つのIDへ置き換える - 画像を3枚使うなら、3つ目のIDを半角カンマで続ける
-
列数を変えるなら、画像IDではなく
columnsの値だけ変える
たとえば画像IDが81と96なら、
[gallery ids="81,96" columns="2"]
とします。画像が表示されない場合は、列数を何度も変更せず、まず81と96の画像がメディアライブラリに存在するか確認します。
貼り付け後に起きやすい5つの失敗
角括弧の文字がそのまま出る
タグを処理する機能が見つかっていません。文字列の欠け、プラグイン停止、非対応の表示場所を確認します。CSSで文字を隠しても機能は動かないため、見た目だけを消す修正は行いません。
何も表示されず空白になる
ショートコードは呼び出されたものの、指定したIDのデータがない、公開条件を満たしていない、権限がない可能性があります。管理者としてログイン中の画面だけで判断せず、対象データの公開状態を確認します。
別のフォームや画像が表示される
IDの取り違えが中心です。見た目を調整する前に、ショートコードを取得した管理画面へ戻り、対象名とIDを照合します。コピー用ソースの数字を残したままにしていないかも確認してください。
編集画面では文字のまま見える
ショートコードブロック内では、変換前の文字列が表示される場合があります。編集画面だけで失敗と決めず、プレビューを開きます。ただし公開プレビューでも角括弧が残るなら正常ではありません。
スマートフォンだけ崩れる
列数や横幅が狭い画面に合っていない可能性があります。まずプラグインのレスポンシブ設定を確認し、ギャラリーなら列数を減らして再プレビューします。原因を確認せずサイト全体のCSSを上書きしないでください。
ショートコードを消す前に確認すること
本文からショートコードを削除すると、その位置の表示は消えますが、フォーム設定や画像そのものまで消えるとは限りません。逆に、プラグインを先に削除すると、本文へ古いショートコードだけが残ることがあります。機能をやめるときは、使用ページを検索し、代わりの表示へ置き換え、公開ページで確認してから古い文字列を削除します。
ショートコードを別ページへ移す場合も、先に新しい位置で動作を確認します。元ページから消してから移動先で失敗すると、読者が機能を使えない時間が生まれます。「新しい場所へ追加→動作確認→古い場所から削除」の順に進めてください。
ショートコードと通常ブロックはどう使い分けるか
画像、ボタン、見出しなど、WordPressの標準ブロックだけで同じ内容を作れる場合は、通常ブロックを使うほうが編集画面で結果を確認しやすくなります。一方、問い合わせフォーム、予約システム、会員情報のように、管理画面で作った機能を呼び出す場合はショートコードが適しています。
| 判断 | 通常ブロックが向く | ショートコードが向く |
|---|---|---|
| 編集画面 | その場で内容を直接編集したい | 別の管理画面で内容を一元管理したい |
| 再利用 | ページごとに異なる内容 | 複数ページで同じ機能を呼び出す |
| 操作 | 画像や文章を並べる | 送信・予約・検索などの処理がある |
| 停止時 | WordPress標準機能として残りやすい | 発行元を停止すると動かないことがある |
ショートコードを使えるからという理由だけで、すべての画像や文章を置き換える必要はありません。読者が見る内容と、運営者が今後どこで編集するかを考え、管理しやすい方法を選びます。
知らないショートコードを貼ってよいか判断する
SNS、質問サイト、古いブログ記事から見つけたショートコードは、そのまま貼らないでください。現在のWordPressで登録されていないタグなら文字列として残り、同名の別プラグインがある場合は意図しない処理を呼ぶ可能性があります。まず利用中のプラグイン公式サイトまたは管理画面で、同じタグ名と属性が案内されているか確認します。
PHPコード、テーマのfunctions.php編集、出所不明のプラグイン導入まで必要と書かれている例は、単純な貼り付け手順とは別物です。この記事で行うのは、WordPress本体または信頼できる導入済み製品がすでに発行したショートコードを配置する作業です。機能そのものを新しく開発する操作と混同しないでください。
公開前に使える最終チェック
- ショートコードを公式画面から全文コピーした
- 対象のフォーム名・画像・一覧とIDが一致している
- ショートコードブロックへ単独で貼った
- プレビューで角括弧が目的の表示へ変わった
- 前後の見出しと説明文が自然につながっている
- フォームやボタンを最後まで操作できた
- ログアウト状態でも必要な内容が見える
- スマートフォンで横スクロールが出ない
- 失敗時に戻せる元の文字列を保存した
九つすべてを確認できたら公開します。一つでも不明なら、公開ボタンを急がず、コピー元とプレビューへ戻ります。ショートコードは短い文字列ですが、読者にとってはフォームや予約画面そのものです。文字列ではなく、読者が最後まで使えるかを完成条件にしてください。
関連する確認
貼る場所だけを詳しく確認するなら、続編の「ブロックエディターでショートコードを入れる方法」を参照してください。角括弧が公開ページへ残った場合は「ショートコードがそのまま表示される原因」、値を変更したい場合は「ショートコードの属性とは」、プラグイン停止後なら「残ったショートコードの直し方」へ進めます。
よくある質問
ショートコードは自分で作る必要がありますか？
通常の利用者は作りません。プラグインやWordPress本体が用意したものを、公式手順どおりコピーします。
段落ブロックへ貼っても動きますか？
動く場合もありますが、初心者は専用のショートコードブロックを使うと、通常文章との混同を防げます。
削除するとデータも消えますか？
本文から文字列を削除しても、プラグイン側のフォーム設定などは通常別に残ります。ただし製品ごとに異なるため、削除前に発行元を確認してください。
最初は謎の暗号に見えていましたが、発行元から受け取った札だと思うと落ち着けました。編集画面で角括弧のままでも、すぐ失敗だと決めなくていいんですね。
貼る前の出どころと、貼った後のプレビューを分けて考えられたね。それができれば、知らない記号を勢いで直す失敗はかなり減らせるよ。
次に属性らしい数字が付いていたら、勝手に消さず説明を探します。まだ一人だと慎重になりそうですが、確認する順番は見失わなそうです。
慎重なくらいでちょうどいいよ。発行元、専用ブロック、プレビューの三つを確かめてから公開しよう。
まとめ
ショートコードは、登録済みの機能を短い文字列で呼び出す仕組みです。公式画面から全文をコピーし、ショートコードブロックへ貼り、プレビューで変換結果と操作を確認します。文字列が残る、結果が違う、操作できない場合は公開を止め、発行元と有効状態から確認してください。