HTMLをWordPressのカスタムHTMLブロックで使う方法

カスタムHTMLブロックを使うと、任意のHTMLコードをそのままWordPressの記事に貼り付けて表示できます。追加はブロック挿入ツールから「カスタムHTML」を選ぶだけです。

カスタムHTMLブロックで使う方法

ブロックエディタで「+」からカスタムHTMLブロックを追加し、入力欄にHTMLコードを貼り付ければ使えます。

カスタムHTMLとは、HTMLコードを直接書き込むための専用ブロックのことです。地図の埋め込みコードなど、標準ブロックで作れないパーツの配置に使います。

カスタムHTMLブロックはどこ - 追加の手順

カスタムHTMLブロックは、編集画面左上の「+」(ブロック挿入ツール)の中にあります。手順は以下の通りです。

1. 投稿や固定ページの編集画面を開く
2. 左上の「+」をクリック
3. 検索欄に「HTML」と入力
4. 「カスタムHTML」を選択
5. 入力欄にHTMLコードを貼り付ける

本文中で「/html」と入力しても、同じブロックを呼び出せます。

HTMLコードを貼り付けてプレビューする

たとえば次のコードを貼り付けると、枠線付きのお知らせボックスを表示できます。

<div style="border: 2px solid #1a73e8; border-radius: 8px; padding: 16px;">
  <p style="margin: 0;">キャンペーンは<strong>今週末まで</strong>です。</p>
</div>

ブロックのツールバーで「HTML」と「プレビュー」を切り替えると、公開前に表示結果を確認できます。

使うときの注意点

貼り付けたHTMLはテーマのCSSの影響を受けるため、実際の表示がプレビューと変わることがあります。公開後のページでも確認してください。

また、投稿者などの権限では<script>タグが保存時に除去される場合があります。仕様はWordPress公式ドキュメントで確認できます。