ブロックエディターでは、挿入位置の「＋」を押し、「ショートコード」ブロックを選んで文字列を貼ります。 段落ブロックやカスタムHTMLではなく専用ブロックを使うと、通常文章と混ざりにくく、移動や削除も一つの単位で行えます。
ショートコードブロックを追加する
- 管理画面で「固定ページ」または「投稿」を開く
- 対象タイトルの「編集」を押す
- 表示したい見出しの直後へカーソルを置く
- 表示された「ブロックを追加」の「＋」を押す
- 検索欄へ「ショートコード」と入力する
- ウィジェット分類の「ショートコード」を選ぶ
- 枠内へ発行済みの文字列を貼る
WordPress公式ドキュメントでは、ブロック追加ボタンのほか、空の段落で
/shortcode
と入力して選ぶ方法も案内されています。慣れないうちは「＋」と検索を使うと、選んだブロック名を目で確認できます。
段落・カスタムHTMLとの違い
| ブロック | 主な用途 | ショートコード利用 |
|---|---|---|
| ショートコード | 角括弧で囲まれた登録済み機能 | 初心者の第一候補 |
| 段落 | 通常の文章 | 混在を避けるため使い分ける |
| カスタムHTML | HTMLタグを直接記述 | 製品が指定した場合だけ |
ショートコードだけの白い枠ができたので、文章と別の部品だと分かりました。難しいコードを書く画面ではなく、受け取った一行を置く箱なんですね。
そう見えたなら十分だよ。箱が分かれていると、あとで場所を動かすときも文章を巻き込みにくいんだ。
貼った枠の中では、まだフォームにならず文字のままです。ここで表示されないと、選ぶブロックを間違えたようで少し落ち着きません。
編集画面では文字のままのことがあるよ。保存前のプレビューを開き、実際の表示へ変わるかを別の画面で確かめよう。
公開前にプレビューする
- 右上の「プレビュー」を押す
- 「新しいタブでプレビュー」を選ぶ
- 挿入した位置に目的の内容があるか見る
- フォームやボタンを一度操作する
- スマートフォン表示へ切り替え、横にはみ出さないか見る
- 問題がなければ編集タブへ戻り「更新」または「公開」を押す
プレビューで角括弧が残る場合は、公開せずに戻ります。ブロックを入れ直す前に、文字列のコピー元と発行元プラグインの有効状態を確認します。
位置を動かす・削除する
対象ブロックを選び、ブロックツールバーの上矢印・下矢印で一段ずつ移動します。大きく移動するときは「リスト表示」を開き、ショートコードブロックを目的の見出しの下へ移動します。削除は対象ブロックだけを選び、三点メニューの「削除」を使います。
フォームが見出しの上へ入ってしまい、文章の順番が変になりました。ドラッグすると遠くへ飛びそうなので、できれば小さく動かしたいです。
一つ下へ移すだけなら、ブロックを選んで下向き矢印を一回押そう。長いページで場所を見失ったときだけ、リスト表示を使えばいいよ。
やり直すときにブロックを削除しても、プラグインで作ったフォーム本体までは消えませんか。せっかく設定した宛先まで消えたら困ります。
本文のブロック削除と、プラグイン側のフォーム削除は別だよ。まずページを更新せずに位置を直し、迷ったら編集画面を閉じて保存前へ戻れるよ。
公開後の確認
- 狙った見出しの直後に表示される
- 前後の文章と重ならない
- PCとスマートフォンで横幅に収まる
- ログアウト状態でも見える
- フォーム送信やボタン操作が完了する
これからWordPressを始める場合の比較候補
ブロック操作はどの一般的なWordPress環境でも行えます。既存サイトは移転不要です。新しく独自ドメインのサイトを作る場合だけ、管理画面の分かりやすさと費用を比べてください。
エックスサーバー
WordPressの開設後も公式手順を確認しながら運営したい人向けです。
向いている人： 長期運営とサポート情報を重視する初心者
利点： 導入から運営までWordPress向け案内を追いやすい
注意点： プラグイン固有の設定は各製品の公式資料も必要です。
料金： 契約期間・キャンペーンで変動
エックスサーバーのWordPress開始条件を見る
ConoHa WING
申込画面からWordPress設定までまとめて進めたい人の比較候補です。
向いている人： 管理画面を見ながら新規サイトを作りたい人
利点： WordPress開設の操作を一つの流れで進めやすい
注意点： 料金タイプと更新時の条件を申込前に確認してください。
料金： 料金タイプ・期間・キャンペーンで変動
ConoHa WINGの最新条件を見る広告・PRを含みます。すでにWordPressを運営中なら、ショートコードのためだけにサーバーを乗り換える必要はありません。新しくサイトを始める人だけ、公式ページで最新料金と条件を確認してください。
よくある質問
ショートコードブロックに設定欄がありません
公式ドキュメントでも、ショートコードブロックには固有のツールバー設定やサイドバー設定がないと案内されています。表示調整は発行元の設定を確認します。
再利用できるように複製してよいですか？
同じ機能を同じページへ複数置くとID衝突や二重送信につながる製品があります。製品が複数配置へ対応する場合だけ複製します。
編集画面で結果を見られますか？
製品により異なります。最終判断はプレビューまたは公開ページで行います。
文章を消さずに、見出しの下へフォームの箱だけ置けました。編集画面で文字のままでも、プレビューではちゃんとフォームになっていて安心しました。
追加する場所と確認する画面を分けられたね。矢印で一段ずつ直したから、文章の順番も守れたよ。
次は似た名前のカスタムHTMLを勢いで選ばず、ブロック名を見ます。送信テストを忘れそうなので、公開前の確認に残しておきたいです。
専用ブロック、プレビュー、実操作の三段階で見れば大丈夫だよ。急いで公開せず、読者と同じ画面で最後まで試そう。
挿入位置を間違えないための準備
編集画面を開いたら、先にショートコードを表示したい見出しを探します。フォームなら「お問い合わせ」、予約表なら「空き状況」など、読者が機能を期待する場所です。長い記事では、画面左上のリスト表示を開くと見出しとブロックの並びを確認できます。
本文の途中をクリックしただけでは、段落内へカーソルが入ることがあります。段落と段落の間に表示される「＋」から新しいブロックを追加し、独立したショートコードブロックを作ります。
ブロック追加を画面どおり進める
- 対象ページで「編集」を押す
- 表示したい見出しの直後をクリックする
- ブロック追加の「＋」を押す
- 検索欄へ「ショートコード」と入力する
- ウィジェット分類の「ショートコード」を選ぶ
- 発行元からコピーした文字列を貼る
- 右上の「下書き保存」を押す
検索結果に「コード」「カスタムHTML」「ショートコード」が並ぶ場合があります。角括弧の文字列を実行する目的では「ショートコード」を選びます。カスタムHTMLへ貼ると製品により動くこともありますが、用途が分かりにくくなります。
移動・複製・削除の操作
位置を一段だけ動かす
ショートコードブロックを選択し、ツールバーの上矢印・下矢印を使います。ドラッグは長い記事で別の場所へ落としやすいため、初心者は矢印で一段ずつ動かします。移動後は前後の見出しと説明文を読み、機能の意味がつながるか確認します。
複製する前に対応状況を見る
同じフォームを上下へ二つ置くと、HTMLのID重複や二重送信の原因になる製品があります。製品が同一ページの複数配置へ対応すると明記している場合だけ複製します。別ページで使う場合も、同じ対象を表示してよいか確認します。
削除して戻す
ブロックメニューの「削除」で表示箇所を消せます。誤って消した直後は、上部の「元に戻す」を一度押します。ページを閉じた後ならリビジョンを確認しますが、ほかの編集まで戻る可能性があるため、対象時刻と変更内容を見比べます。
編集画面とプレビューの違い
ショートコードブロックの中では、貼った角括弧がそのまま表示される場合があります。これは入力を編集する画面であり、最終結果とは限りません。右上の「プレビュー」から新しいタブを開き、フォームや一覧へ変換された結果を見ます。
| 画面 | 確認すること |
|---|---|
| 編集画面 | 文字列、挿入位置、ブロックの独立 |
| プレビュー | 変換結果、前後の余白、操作 |
| 公開ページ | ログアウト状態、キャッシュ、端末幅 |
プレビューで角括弧が残るなら、公開しません。ブロックを何度も作り直す前に、文字列と発行元プラグインを確認します。
クラシックエディターの場合
クラシックエディターではショートコード専用ブロックがありません。ビジュアルまたはテキスト編集画面の独立した行へ、発行元からコピーした文字列を貼ります。文章の途中へ入れず、前後に改行を置くと位置を見分けやすくなります。
ブロックエディターの記事を見ながら、存在しない「＋」を探し続けないでください。編集画面の種類が違う場合は、利用中のエディターに合う公式手順を使います。
公開後に確認する操作
- 角括弧が読者画面へ残っていない
- 見出しの直下など意図した位置にある
- フォームの入力と送信が完了する
- リンクやボタンの移動先が正しい
- スマートフォンで入力欄や表がはみ出さない
- ページ更新後も同じ結果になる
- ログアウト状態でも必要な人が利用できる
見た目だけを確認して終わると、送信先、権限、リンク先の間違いを見逃します。読者がその機能で行う最後の操作まで再現してください。
まとめ
ブロックエディターでは、挿入位置の「＋」からショートコードブロックを追加し、発行済み文字列を貼ります。編集画面の文字表示だけで失敗と決めず、プレビューで変換結果、位置、スマホ幅、実操作を確認してから公開してください。