WordPressでHTMLを直書きするなら、基本は「カスタムHTMLブロック」を使うのが安全です。
WordPressでは、通常の段落や画像ブロックだけでなく、自分でHTMLコードを書いて表示を調整することもできます。
たとえば、独自のボックス、ボタン、アコーディオン、埋め込みコード、外部サービスのタグなどを入れたい時に、HTMLを直接書きたくなる場面があります。
ただし、WordPressにHTMLを直書きする方法を間違えると、ブロックエラーが出たり、表示が崩れたり、スマホで見にくくなったりすることがあります。
結論として、記事本文や固定ページにHTMLを入れるなら「カスタムHTMLブロック」、サイト全体に関わるコードはテーマファイルやプラグイン側で管理すると考えるのがおすすめです。
この記事では、WordPressでHTMLを直書きする方法、カスタムHTMLブロックの使い方、コードエディターとの違い、HTMLを入れる時の注意点、表示崩れした時の確認方法をまとめます。
この記事は、「WordPressでHTMLを直接書きたい」「カスタムHTMLブロックの使い方を知りたい」「HTMLを入れたらブロックエラーになった」という方向けの内容です。
この記事で分かること
- WordPressでHTMLを直書きできる場所
- カスタムHTMLブロックの使い方
- HTML編集とコードエディターの違い
- CSSやJavaScriptを入れる時の注意点
- HTMLを直書きして表示崩れする原因
- ブロックエラーが出た時の直し方
- 初心者が触らない方がよい場所
WordPressでHTMLを直書きできる場所
WordPressでHTMLを直書きできる場所はいくつかありますが、初心者が使いやすいのはカスタムHTMLブロックです。
WordPressでは、投稿や固定ページの本文、ウィジェット、テーマファイル、カスタムHTML用のブロックなど、複数の場所でHTMLを扱えます。
ただし、どこに書くかによって影響範囲が変わります。記事内だけに表示したいHTMLならカスタムHTMLブロックで問題ありませんが、ヘッダーやフッター、サイト全体のレイアウトを変更したい場合は、テーマやプラグイン側の管理が必要になることがあります。
| HTMLを書く場所 | 向いている用途 | 初心者向け |
|---|---|---|
| カスタムHTMLブロック | 投稿・固定ページ内にHTMLを入れる | おすすめ |
| ブロックの「HTMLとして編集」 | 既存ブロックのHTMLを一時的に確認・修正する | やや注意 |
| コードエディター | 投稿全体のHTML構造を確認する | 注意 |
| ウィジェット・カスタムHTML | サイドバーやフッターにHTMLを入れる | テーマによる |
| テーマファイル | ヘッダー、フッター、テンプレートを直接編集する | 非推奨 |
| プラグイン設定欄 | 計測タグ、広告タグ、外部サービスのコードを入れる | 用途による |
カスタムHTMLブロックでHTMLを直書きする方法
記事や固定ページにHTMLを入れるなら、カスタムHTMLブロックを使います。
カスタムHTMLブロックは、WordPressのブロックエディターで使える標準ブロックのひとつです。通常の段落ブロックとは違い、HTMLコードをそのまま入力できます。
外部サービスの埋め込みコード、独自のボックス、簡単なボタン、HTMLタグを使った装飾などを入れたい時に使います。
カスタムHTMLブロックの使い方
- 投稿または固定ページの編集画面を開く
- ブロック追加ボタンをクリックする
- 検索欄に「カスタムHTML」と入力する
- 「カスタムHTML」ブロックを追加する
- 表示したいHTMLコードを入力する
- プレビューで表示を確認する
- 問題がなければ更新または公開する
カスタムHTMLブロックでは、入力したコードをプレビューで確認できます。公開前に必ず表示を確認し、パソコンだけでなくスマホ表示もチェックしましょう。
カスタムHTMLブロックに書けるHTMLの例
カスタムHTMLブロックには、通常のHTMLタグを書けます。
たとえば、独自のボックスやリンクボタン、外部サービスの埋め込みコードなどを入れることができます。
ただし、テーマやセキュリティ設定によっては、一部のタグやスクリプトが保存時に削除されることがあります。特にJavaScriptやiframeを入れる場合は注意が必要です。
簡単なHTML例
ここに説明文を入れます。
詳しく見る上のようなコードを入れると、独自のHTML構造を記事内に追加できます。ただし、見た目を整えるにはCSSが必要になることがあります。
CSSやJavaScriptはどこに書くべき？
CSSやJavaScriptは、HTMLと同じ場所に無理にまとめない方が安全です。
カスタムHTMLブロックにHTML、CSS、JavaScriptをまとめて書くこともできますが、WordPressでは保存時にコードが変わったり、テーマやブロックの仕様とぶつかったりすることがあります。
特にCSSは、テーマの「追加CSS」や、プラグインのCSS入力欄、子テーマのCSSファイルなどで管理する方が安定しやすいです。JavaScriptも、記事本文に直接入れるより、専用プラグインやテーマ側で管理する方が安全です。
コードの置き場所の目安
| コード | おすすめの場所 | 注意点 |
|---|---|---|
| HTML | カスタムHTMLブロック | 記事や固定ページ内に入れる場合に使いやすい |
| CSS | 追加CSS、テーマのCSS欄、子テーマ | <style>タグごと入れる場所と、CSSだけ入れる場所を間違えない |
| JavaScript | 専用プラグイン、テーマ設定、子テーマ | 本文内に直接入れると保存時に消えることがある |
| 計測タグ | タグ管理プラグイン、Googleタグマネージャー、テーマ設定 | 全ページに入れるタグは記事本文に入れない |
特に注意したいのは、CSS入力欄に<style>タグまで入れてしまうケースです。CSS専用の入力欄では、基本的にCSSだけを書きます。すでにテーマ側が<style>タグで囲んで出力する場所に、さらに<style>を入れると、ブロックエラーや表示崩れの原因になることがあります。
「HTMLとして編集」とカスタムHTMLブロックの違い
「HTMLとして編集」は既存ブロックの中身を確認・修正する機能で、カスタムHTMLブロックとは役割が違います。
WordPressのブロックには、メニューから「HTMLとして編集」を選べるものがあります。これは、そのブロックのHTMLを一時的に表示して編集する機能です。
一方で、カスタムHTMLブロックは、最初からHTMLコードを書くためのブロックです。外部コードや自作のHTMLを入れたい場合は、カスタムHTMLブロックを使う方が分かりやすいです。
| 機能 | 役割 | 使う場面 |
|---|---|---|
| HTMLとして編集 | 既存ブロックのHTMLを編集する | 段落や見出しなどのHTMLを確認したい時 |
| カスタムHTMLブロック | HTMLコードを直接入れる | 外部コードや自作HTMLを入れたい時 |
| コードエディター | 投稿全体のコードを見る | 全体構造を確認したい時 |
コードエディターでHTMLを直書きしてもいい？
初心者がコードエディターで投稿全体を直接編集するのは、あまりおすすめしません。
コードエディターでは、投稿や固定ページ全体のHTML構造を確認できます。WordPressのブロックコメントも表示されるため、どのブロックがどのHTMLで構成されているかを見ることができます。
ただし、コードエディターでブロックの開始タグや終了タグ、コメント部分を壊してしまうと、ブロックエラーが出ることがあります。
コードエディターを使う場合は、編集前に必ず内容をコピーして保存しておきましょう。万が一ブロックが壊れても、元のコードに戻せる状態にしておくと安心です。
HTMLを直書きしてブロックエラーが出る原因
HTMLを直書きしてブロックエラーが出る場合は、WordPressが想定するブロック構造と実際のHTMLがずれている可能性があります。
WordPressのブロックエディターは、ただHTMLを表示しているだけではありません。ブロックごとに、開始コメント、終了コメント、属性、HTML構造を管理しています。
そのため、コードエディターでブロックコメントを消したり、閉じタグを間違えたり、ブロック内に想定外のHTMLを入れたりすると、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されることがあります。
ブロックエラーが出やすい原因
- 閉じタグが足りない
- ブロックコメントを削除している
- WordPressが自動整形したHTMLと差分が出ている
- 段落ブロックに複雑なHTMLを入れている
- カスタムHTMLではなく通常ブロックにコードを書いている
- CSS入力欄に<style>タグを重ねて入れている
- テーマ独自ブロックのHTML構造を壊している
- JavaScriptやiframeが保存時に削除されている
HTMLを直書きする時の注意点
HTMLを直書きする時は、表示確認とバックアップを必ず行いましょう。
HTMLは少しの記述ミスでも表示崩れにつながります。パソコンでは問題なく見えていても、スマホで横にはみ出したり、ボタンが押しにくくなったり、余白が崩れたりすることがあります。
また、記事内に入れるHTMLなら影響範囲は限定的ですが、テーマファイルやテンプレートを直接編集するとサイト全体に影響します。事業用サイトでは、問い合わせ導線やフォーム表示が崩れると機会損失につながります。
HTML直書き前のチェックリスト
- カスタムHTMLブロックを使っているか
- 閉じタグが正しいか
- CSSやJavaScriptを入れる場所は適切か
- パソコン表示で崩れていないか
- スマホ表示で崩れていないか
- リンク先が正しいか
- ボタンが押しやすいか
- 問い合わせフォームやCTAに影響していないか
- 編集前のコードをバックアップしているか
初心者が触らない方がよいHTML編集
初心者は、テーマファイルを直接編集するHTML修正は避けた方が安全です。
WordPressでは、テーマファイルエディターからPHPやHTMLを編集できる場合があります。しかし、ここを誤って変更すると、サイト全体が真っ白になったり、ヘッダーやフッターが崩れたり、管理画面に入れなくなったりすることがあります。
特に、header.php、footer.php、single.php、page.php、functions.phpなどは影響範囲が大きいファイルです。HTMLのつもりで触っていても、実際にはPHPが含まれていることが多く、少しの記述ミスでエラーになることがあります。
初心者が直接触らない方がよい場所
- テーマファイルエディター
- functions.php
- header.php
- footer.php
- single.php
- page.php
- テンプレートファイル
- プラグインファイル
サイト全体に関わるHTML修正をしたい場合は、子テーマ、専用プラグイン、バックアップ、テスト環境を用意した上で進める必要があります。不安がある場合は、無理に直接編集せず、専門の人に相談した方が安全です。
ブロックエラーが出た時の直し方
ブロックエラーが出た時は、まず「復旧を試みる」を押す前に、元のコードを保存しておきましょう。
WordPressのブロックエラーでは、「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示されることがあります。この時に「復旧を試みる」を押すと、WordPressが自動で修正しようとします。
ただし、自動復旧によって、せっかく入れたHTMLやテーマ独自のコードが削除されることがあります。特にカスタムHTMLやテーマ独自ブロックを使っている場合は、先にコードをコピーしておくのが安全です。
ブロックエラー時の確認手順
- エラーが出ているブロックのコードをコピーする
- 閉じタグが不足していないか確認する
- ブロックコメントを削除していないか確認する
- 通常ブロックに複雑なHTMLを入れていないか確認する
- CSSやJavaScriptの入れ場所を確認する
- 原因が分からない場合は、カスタムHTMLブロックに分けて入れ直す
- 修正後にプレビューとスマホ表示を確認する
HTMLを直書きするよりブロックを使った方がよいケース
見出し、段落、画像、ボタン、表などは、できるだけ標準ブロックやテーマのブロックを使う方が安全です。
HTMLを直書きすると自由度は上がりますが、あとから編集しにくくなることがあります。特に、記事を更新する人が複数いる場合や、HTMLに慣れていない人が触る場合は、ブロックで作った方が管理しやすいです。
また、テーマに用意されているボックス、ボタン、吹き出し、ランキング、FAQ、アコーディオンなどのブロックを使えば、デザインを統一しやすくなります。
HTML直書きしなくてもよいもの
- 通常の見出し
- 段落テキスト
- 画像
- 表
- ボタン
- 引用
- 吹き出し
- FAQやアコーディオン
- 簡単なレイアウト調整
よくある質問
書けます。投稿や固定ページ内に入れる場合は、カスタムHTMLブロックを使うのが基本です。テーマファイルを直接編集する方法もありますが、初心者にはおすすめしません。
書くこと自体はできますが、CSSは追加CSSやテーマのCSS欄で管理する方が安全です。特にCSS専用欄に<style>タグを重ねて入れると、表示崩れやブロックエラーの原因になることがあります。
まずはエラーが出ているブロックのコードをコピーして保存しましょう。その上で、閉じタグ不足、ブロックコメントの削除、通常ブロックへの複雑なHTML挿入、CSSやJavaScriptの入れ場所を確認します。原因が分からない場合は、カスタムHTMLブロックに分けて入れ直すと改善することがあります。
知識がある場合は可能ですが、初心者にはおすすめしません。テーマファイルにはPHPが含まれていることが多く、少しのミスでサイト全体が崩れたり、エラーで表示されなくなったりすることがあります。
見出し、段落、画像、ボタン、表、FAQなどは、基本的にWordPressのブロックを使う方が安全です。HTML直書きは、外部コードや特殊なレイアウトなど、ブロックだけでは対応しにくい場合に使いましょう。
まとめ：WordPressでHTMLを直書きするならカスタムHTMLブロックが基本
WordPressでHTMLを直書きするなら、まずはカスタムHTMLブロックを使いましょう。
投稿や固定ページ内に独自のHTMLを入れたい場合は、カスタムHTMLブロックがもっとも扱いやすく、影響範囲も限定しやすいです。
一方で、テーマファイルやコードエディターを直接編集すると、ブロックエラーや表示崩れ、サイト全体の不具合につながることがあります。初心者は、まず記事内のカスタムHTMLブロックから使うのが安全です。
HTML、CSS、JavaScriptを無理に同じ場所へまとめず、それぞれ適切な場所で管理すると、WordPressの表示崩れやブロックエラーを防ぎやすくなります。
