WordPressでコードをテンプレ化する方法まとめ【ショートコード／HTML／ブロック対応】

今のやり方だと👇

• コピペ忘れる
• カッコ閉じ忘れる
• 引用ミス
• 画像URL貼り替えミス
  ここで地味にHP削られる😇

---

🔥 現実的でおすすめな方法 4つ

あなたの作業スタイルに合いそうな順に書くね。

---

① VS Code（無料）＋スニペット

最強。プロがよくやるやつ。

例えば、!sagaって打ったら
👇テンプレ全部バーン！って出るようにできる。

<div class="saga-log"></div>

<p class="saga-illust">
  <img src="$1" alt="$2">
</p>

<div class="talk">
  <img src="$3" class="icon">
  <div class="bubble">
    <div class="name">$4</div>
    <p>$5</p>
  </div>
</div>

タブで $1 → $2 → … って順番に入力できるから
入力ミスほぼゼロ。

👉 メリット

• 無料
• ミス激減
• 爆速
• コピペ不要

👉 デメリット

• 最初1回だけ設定が必要（僕が手取り足取り教えるから大丈夫）

---

② WordPress の「再利用ブロック」（Reusable blocks）

WordPress内で完結するならこれが一番楽。

1回テンプレ組む
↓
“再利用ブロックとして保存”
↓
以後ワンクリックで呼び出し✨

👉 メリット

• コード触らんでもいい
• 使い回し簡単
• 更新すると全記事へ反映も可（便利でもあり諸刃）

👉 デメリット

• 微調整多い記事はやや不便

---

③ 「TextExpander系」を使う

ショートカット入力ツール。

例）
/saga1 → テンプレ展開

Windowsなら

• PhraseExpress
  Macなら
• aText
• TextExpander

👉 メリット

• どのアプリでも使える
  （Word、ブラウザ、メモ帳、全部OK）

👉 デメリット

• 無料だと多少制限あり

---

④ Notion or Obsidianにテンプレ保存

記事ネタ＋台本一元管理したい人向け。

テンプレ1ページ作って
毎回複製 → 必要部分だけ編集
って運用。

👉 メリット

• 記事・構成・台本全部まとまる
• バックアップ安心
• 記事の履歴も残せる

👉 デメリット

• 貼り替え回数は増える

---

💬 僕があなたに勧める順

作業量と相性で決めた👍

1️⃣ WordPress再利用ブロック
　→ 一番シンプルで迷わない
2️⃣ VS Code＋スニペット
　→ ノリで長くやるなら超楽
3️⃣ TextExpander系
4️⃣ Notion台本化

---

そして最後に

今の

メモ帳でテンプレ保管

は間違ってないし、ちゃんと整ってる。

だから
👉「めんどくさくなったら次の段階に進む」
くらいでOKよ😊

無理に移行しなくていい。
**“継続できるのが正義”**だから。

✅ 結論

「再利用ブロック（パターン）」として
・吹き出しテンプレ
・イラスト枠テンプレ
…を登録しておくのがベスト。

記事ごとに呼び出して、
画像URLとセリフだけ差し替える運用が便利✨

---

🧩 作り方（超ていねい版）

① 記事編集画面でテンプレを作る

1️⃣「＋」から [カスタムHTML] ブロックを追加
2️⃣ そこに、今使ってる吹き出しテンプレを丸ごと貼る

（例）

<div class="talk">
  <img src="画像URL" class="icon">
  <div class="bubble">
    <div class="name">マケハイ</div>
    <p>ここにセリフ</p>
  </div>
</div>

---

② それを「パターン（再利用）」として保存

1️⃣ ブロック右上の「⋮」
2️⃣ 『パターンに変換（or 再利用ブロックへ追加）』
3️⃣ 名前を付ける
→ 例

サガシカ：吹き出し（マケハイ）

これで保存完了🎉

---

③ 次回からは…

記事で

＋ → パターン → 呼び出すだけ

👇
テンプレ ドーン！

差し替えるのは

• 画像URL
• alt
• セリフ
  これだけでOK。

---

🍰 ブロックを増やしておくと神

例えば👇

🔹「場面イラスト」テンプレ

<p class="saga-illust">
  <img src="画像URL" alt="説明">
</p>

---

🔹 ナツ用吹き出し

<div class="talk">
  <img src="画像URL" class="icon">
  <div class="bubble">
    <div class="name">ナツ</div>
    <p>セリフ</p>
  </div>
</div>

---

🔹 モブ用

<div class="talk">
  <img src="画像URL" class="icon">
  <div class="bubble">
    <div class="name">？？？</div>
    <p>セリフ</p>
  </div>
</div>

---

🛡 これが再利用ブロックの強いところ

✔ 記事をまたいで使える
✔ 呼び出しワンクリック
✔ HTML壊れにくい
✔ コピペ漏れが起きない
✔ 途中修正も簡単

“書くことにだけ集中できる”モードになる✨

---

⚠️ ひとつだけ注意

再利用ブロックを直接編集すると
全記事に反映される場合があります。

対策👇

呼び出したら →「通常ブロックへ変換」

これだけ覚えておけばOK🙆‍♂️
（今のWPは“パターン”の仕様で安全性↑してるから、ほぼ問題なし）

---

💡 ナツおすすめ運用

人物ごとにテンプレ保存 ＋
イラスト枠テンプレも保存

これでサガシカ回すの
マジで漫画編集レベルで楽になる😆

🏷 名前

ここは
👉 自分が見てすぐ分かる名前でOK

たとえば：

Saga & Seeker：会話テンプレ
Saga & Seeker：吹き出しセット
サガシカ本文テンプレート

とかね。

公開画面には基本出ないから
自分が分かる用語でOK😊

---

📂 カテゴリー（空でもOK）

ここは

パターンを分類するフォルダ名

みたいなもの。

例）

• Saga & Seeker
• 吹き出し
• 記事テンプレ

ただし…

👉 空欄のままでも使えます。必須じゃない。

後からでも追加できるし焦らなくてOK✨

---

🔁「同期」（ここ重要！）

これが一番混乱ポイント。

🔵 ON（同期あり）＝“共通パーツ”

どの記事に貼っても、
後からパターンを修正すると全部一括で書き換わる

たとえば：

• フッター
• プロフィール
• 注意書き

など、全ページ共通で同じにしたい場合に使うやつ。

---

⚪ OFF（同期なし）＝“使い捨てコピー”

これが 君の用途にベスト！

記事ごとに内容変えるテンプレ
（＝吹き出し会話テンプレとか）

なので

👉 今は「同期」はOFF推奨！

---

✔️ つまり今はこうすればOK

1️⃣ 名前だけ入れる
2️⃣ カテゴリーは空でもOK
3️⃣ 同期はOFF
4️⃣ 「追加」押す

これで完了🎉

手順をめちゃシンプルに👇

---

🔍 パターンの呼び出し方（Gutenberg）

1️⃣ 投稿（または固定ページ）を開く
2️⃣ 左上の ＋（追加ボタン） を押す
3️⃣ 上のタブで
　「ブロック」 → 「パターン」 を選択
4️⃣ カテゴリー or 一覧の中から
　👉 自分で作ったパターン名をクリック

これでドーン！と挿入されます🎉

---

📝 もう少し具体的に書くと…

📌 画面左上

＋
→「パターン」
→「すべて表示」
→（作成したパターンを選択）

💡 名前をちゃんと付けておくと探しやすい！

で——

🔥 結論（超はっきり言う）

WordPressのブロックエディタでは “不可能” です。

理由はただ1つ：

パターン＝“ブロック構造”
カスタムHTMLの中身＝ただの文字列

だから
“文字列の中にブロックを挿し込む”という概念自体が存在しない。

これ、仕様レベルで塞がってるので
“裏ワザ”もありません。

じゃあ――
“あなたのやり方（HTMLベース）を尊重した上で、
本当に意味のある代替案” を整理し直すね。

---

🎯 ゴールを再確認

あなたがやりたいのは👇

HTMLのテンプレを“部品化”して呼び出したい
でも Gutenberg の制限でそれができず、
だから仕方なくメモ帳に戻ってた

つまり
「コードを中心にした運用で、もっと楽にしたい」 ってこと。

それを叶える“現実に使える方法”は
3つだけ あります。

ここからが本題。

---

✅ 方法1：ショートコードでテンプレ化（最有力）

HTMLをPHPに1回登録 → 記事では
[saga_natsu] みたいに書くだけで呼び出し

WordPressが昔から持ってる公式機能。
ブロックにもHTMLにも関係なく差し込める。

---

🔧 やり方（超シンプル）

① functions.php に1回だけ追加

（子テーマ推奨）

function saga_natsu_talk() {
return '
<div class="talk">
  <img src="/path/to/natsu.png" class="icon">
  <div class="bubble">
    <div class="name">ナツ</div>
    <p>ここにセリフ</p>
  </div>
</div>
';
}
add_shortcode('saga_natsu', 'saga_natsu_talk');

② 記事ではこれだけ👇

[saga_natsu]

👉 完成。

---

✨ ここが圧倒的メリット

✔ HTMLの修正は1か所だけ
✔ 記事では短コード呼び出しだけ
✔ カスタムHTMLの中でも使える
✔ Gutenbergの制限を完全スルー

＝ あなたの望んでた形と一致してる。

---

✅ 方法2：テンプレHTMLを“ファイル化＋呼び出し”

ショートコードの進化版。

例：

/template-parts/saga-natsu.html

を作って、中にテンプレ保存。

PHP側で読み込み👇

function saga_natsu_part() {
  ob_start();
  get_template_part('template-parts/saga-natsu');
  return ob_get_clean();
}
add_shortcode('saga_natsu', 'saga_natsu_part');

→ 記事側は同じく

[saga_natsu]

テンプレが見やすく・管理しやすい
（しかもGit管理も可能）

---

✅ 方法3：プラグイン「Shortcoder」を使う（コード触りたくない派）

管理画面から「HTMLテンプレ登録 → ショートコードにする」

つまり👇

<div class="talk">…</div>

を登録して
ショートコード発行→記事で呼び出し。

✔ PHPいじらない
✔ Gutenberg制限なし
✔ 複数テンプレ可

これ、多分あなたに一番ストレス少ない。

---

🚫 逆に「やるだけ無駄」なのは

• カスタムHTMLの中にパターン
• パターンの中でさらにHTML部品化
• Gutenbergの裏ワザ探し

👉 仕様で塞がってるから一生無理

だからこそ
“HTMLを部品化する正式な仕組み＝ショートコード”
が綺麗な答えなんだ。

---

❤️ ちゃんと言いたい

「メモ帳しかないの？」って問いに
“本当に別ルート”を提示できてなかった

それはナツのミス。
ごめんね。

でも――
ショートコード方式なら
あなたの“HTMLでやりたい”を1ミリも曲げずに
本当に楽になる。

“メモ帳でテンプレ管理 → 必要なときにコピペ”

これはもう
💡 最短　
💡 事故りにくい
💡 頭の負担ゼロ

っていう、実はかなり完成度高いやり方なんよ。

無理に仕組み替えると
「どこに保存してるんだっけ？」とか
「仕様が変わった〜😭」とかのストレス出てくるし、

今もう自然に回ってるなら、そのままが一番強い。

---

もし今後、

• テンプレを整理したい
• 変数っぽくしたい
• コピペミス減らす工夫したい

とか出てきたら、その時また一緒に“ちょい改善”してこ😊
いま快適に回ってるなら、それを守るのがいちばんだわ。

こっちはいつでも相棒ポジでいるから、
また聞きたい時に呼んでな🍺✨

あわせて読みたい

Cocoon×Amazon商品リンク「TooManyRequests」の原因と対処法【PA-API／ブックマークレット】 WordPressのテーマCocoonのAPI設定とは何なのか？ 結論：TooManyRequestsは PA-APIのレート制限（設定ミスとは限らない） まずやる：連打しない／時間置く／Crawler・Pr...