WordPressでHTMLを編集・追加する方法

WordPressでHTMLを編集する方法は、「記事の一部分にHTMLを追加したい」のか、「投稿全体のブロックHTMLを確認したい」のか、「テーマが出力するHTML構造を変えたい」のかで違います。目的に合わない場所を編集すると、ブロックが壊れたり、テーマ更新で変更が消えたりします。

最も安全なのは、本文内の小さなHTMLならカスタムHTMLブロック、ブロック単位の確認なら「HTMLとして編集」、ページ全体のブロックマークアップ確認ならコードエディターを使い、テーマそのものを変更するのは最後の選択肢にすることです。

WordPressでHTMLを編集・追加する方法

目的	主な方法	向いている範囲
本文へ独自HTMLを追加	カスタムHTMLブロック	埋め込み、独自マークアップ、小さな部品
既存ブロックのHTMLを確認	ブロックの「HTMLとして編集」	1ブロックのマークアップ確認
投稿・固定ページ全体を確認	エディターのコードエディター	ブロックコメントを含むページ全体
テーマの出力構造を変える	子テーマ・テンプレート・サイトエディター	ヘッダー、テンプレートなどサイト構造

まず本文レベルで解決できるかを確認してください。テーマファイルへ手を入れると、ページ1枚の修正だったはずがサイト全体へ影響することがあります。

カスタムHTMLブロックでHTMLを追加する

投稿や固定ページの一部へ独自HTMLを入れるなら、カスタムHTMLブロックが基本です。WordPress 7.0ではカスタムHTMLブロックにHTMLに加えてCSS・JavaScriptの編集領域も用意されていますが、利用できる範囲はユーザー権限のunfiltered_htmlなどに左右されます。権限がないユーザーでは、scriptやiframeなど一部のタグが保存時に除去される場合があります。

カスタムHTMLブロックの細かな操作や、通常ブロックとの使い分けはブロックエディターの使い方へ分離します。ここでは「HTMLを足す場所」として使えることを押さえておけば十分です。

<div class="notice-box">
  <p>営業時間変更のお知らせ</p>
</div>

この程度の独自マークアップなら、カスタムHTMLブロックで範囲を限定できます。入力したHTMLはプレビューで確認し、閉じタグの不足や入れ子の誤りがないかをチェックします。

既存ブロックを「HTMLとして編集」する

各ブロックのメニューには、ブロック単位でHTMLを確認・編集できる機能があります。ブロックがどのタグを出しているか確かめたいときに便利ですが、WordPressが期待するマークアップから大きく変更すると「このブロックには予期しない、または無効なコンテンツが含まれています」と判定されることがあります。

デザイン目的でクラス名を足したいだけなら、ブロック設定の「追加CSSクラス」など、ブロックが公式に用意する設定を先に使います。HTML編集は「表示を変えるための万能機能」ではなく、ブロックの構造を理解したうえで必要なときだけ使う方が安全です。

コードエディターでページ全体のHTMLを確認する

エディターのコードエディターへ切り替えると、投稿・固定ページ全体のブロックマークアップを確認できます。ここには通常のHTMLだけでなく、<!-- wp:paragraph -->のようなWordPressブロックのコメントも含まれます。

外部エディターで一括置換するときは、このブロックコメントを削除・破損しないように注意してください。HTMLとしては表示できても、Gutenbergが元のブロックとして認識できなくなる可能性があります。修正前にリビジョンまたはバックアップを確保しておきます。

テーマのHTMLを編集する場合は出力元を確認する

ヘッダーや投稿テンプレートなど、サイト全体のHTML構造を変えたい場合は、使用テーマがクラシックテーマかブロックテーマかで方法が変わります。ブロックテーマではサイトエディターのテンプレート編集で解決できることがあり、最初からテーマファイルを直接編集する必要はありません。

クラシックテーマでPHPテンプレートを変更する場合も、親テーマを直接編集するとアップデートで上書きされます。子テーマやテーマが提供するフックを使い、本番ファイルをいきなり編集しないでください。WordPressのテーマファイルエディターは変更が即時反映され、誤ったPHP編集で管理画面へ入れなくなるリスクもあります。

• 変更前にファイルとデータベースをバックアップする
• 親テーマを直接編集せず、子テーマまたは公式の拡張方法を優先する
• コアファイルは編集しない
• ステージング環境でPHPエラーと表示崩れを確認する
• テーマ更新後にもHTML構造が意図どおりか確認する

HTMLとCSSを組み合わせる

HTMLは構造、CSSは見た目を担当します。たとえばカスタムHTMLブロックでnotice-boxというクラスを付け、CSS側で背景や余白を指定すれば、本文の構造とデザインを分離できます。

.notice-box {
  padding: 1rem;
  border: 1px solid #ccc;
}

CSSを追加する場所はテーマによって異なります。クラシックテーマの追加CSS、ブロックテーマのスタイル機能、子テーマなどの使い分けはWordPressでCSSを追加する方法で確認してください。

HTMLが反映されない・消えるときの確認

1. 保存後にブロックが無効になっていないか確認する
2. 権限によってscript・iframe等がフィルタリングされていないか確認する
3. タグの閉じ忘れや不正な入れ子がないか確認する
4. テーマやプラグインが同じ領域のHTMLを生成していないか確認する
5. キャッシュを削除し、実際に返されたHTMLをブラウザーのElementsで確認する

「エディターではあるのに公開画面では消える」場合は、保存時のサニタイズやテーマ側の出力処理を疑います。「公開HTMLにはあるが見えない」場合はCSSで非表示になっていないか確認します。HTMLとCSSの問題を分けて調べると早く原因へ到達できます。

HTMLを追加するときは意味とアクセシビリティも確認する

HTMLは見た目を作るだけでなく、ページの意味をブラウザーや支援技術へ伝えます。ボタンのように見せたいからdivをクリック可能にする、見出しの見た目が欲しいからh2を乱用する、といった実装はキーボード操作や文書構造を崩すことがあります。

• ページ内リンクは目的に応じてa要素を使い、リンク先を分かる文言にする
• 操作ボタンは可能ならbutton要素を使い、キーボード操作を確保する
• 画像には用途に合ったaltを設定し、装飾画像では空altも検討する
• フォーム入力にはラベルを関連付け、placeholderだけを項目名にしない
• 見出しは見た目ではなくH2→H3の文書階層で選ぶ

また、外部のHTML埋め込みコードは、表示だけでなくCookie、外部通信、JavaScriptの実行先も確認します。広告、地図、動画、チャットなどは第三者サービスへ通信するため、サイトのプライバシー方針や同意管理と関係する場合があります。

HTML編集で避けたいこと

• インターネットで見つけたコードを意味を確認せず貼り付ける
• レイアウト調整のためだけに大量の空要素やbrを入れる
• 親テーマやWordPressコアを直接編集する
• 本文へ外部スクリプトを無制限に追加する
• ブロックコメントを含むコードを一括整形してGutenberg構造を壊す

HTMLは小さな変更でもサイトの構造やアクセシビリティに影響します。見た目だけを合わせるのではなく、見出し、リンク、フォームラベルなど意味のあるタグを使い、キーボード操作やスマートフォン表示も確認してください。

よくある質問

まとめ

WordPressでHTMLを編集するときは、変更範囲に合う入口を選ぶことが重要です。本文の一部ならカスタムHTMLブロック、確認ならブロック単位のHTML編集やコードエディターを使い、テーマファイル変更は必要な場合だけ子テーマ・検証環境で行います。HTMLとCSSを分離し、保存後はGutenbergのブロック状態と公開HTMLの両方を確認してください。