WordPressで記事を作成するとき、ビジュアルエディタだけでなく「テキストエディタ」や「コードエディタ」を活用したい場面があります。HTMLタグを直接編集したい、レイアウトを細かく調整したい、外部のコードを埋め込みたいなど、用途はさまざまです。しかし、WordPressのバージョンやエディタの種類によって呼び方や操作方法が異なるため、初心者の方は混乱しやすいポイントでもあります。この記事では、WordPressのテキストエディタとコードエディタの違いから、具体的な切り替え方法や実践的な使い方まで、わかりやすく解説します。
- WordPressのテキストエディタとコードエディタの違い
テキストエディタはクラシックエディタ用、コードエディタはブロックエディタ用のHTML編集機能です。どちらもHTMLを直接操作できますが、対応するエディタ環境が異なります。
- テキストエディタやコードエディタへの切り替え方法
クラシックエディタでは画面右上のタブ切り替え、ブロックエディタではオプションメニューからコードエディタへ切り替えられます。
- コードエディタを安全に使うための注意点
HTMLタグの閉じ忘れやブロック構造の破損を防ぐため、編集前にはバックアップを取り、少しずつ変更を確認することが大切です。
テキストエディタとは
クラシックエディタでの役割
テキストエディタは、クラシックエディタの「ビジュアル」タブと対になる「テキスト」タブから利用できるHTML編集モードです。記事の投稿画面の右上に表示される「ビジュアル」「テキスト」の2つのタブを切り替えるだけで使用できます。
テキストエディタ上では、段落タグやリンクタグ、画像タグなどのHTMLソースコードがそのまま表示されます。ビジュアルエディタだけでは実現しにくい細かなレイアウト調整やカスタムHTMLの挿入に適しています。
テキストエディタの基本機能
テキストエディタ画面には、よく使うHTMLタグをワンクリックで挿入できるクイックタグボタンが用意されています。たとえば「b」ボタンで太字タグ、「link」ボタンでリンクタグを簡単に挿入できます。
クイックタグボタンを活用すれば、HTMLの知識が浅い方でもテキストエディタ上で効率的にコードを編集できます。以下の表に、主なクイックタグボタンとその機能をまとめました。
| ボタン名 | 挿入されるタグ | 用途 |
|---|---|---|
| b | <strong> | 太字（強調） |
| i | <em> | 斜体（強調） |
| link | <a href=””> | リンクの挿入 |
| b-quote | <blockquote> | 引用の挿入 |
| ul / ol | <ul> / <ol> | 箇条書き・番号付きリスト |
| code | <code> | コードの表記 |
このように、テキストエディタは完全な手動入力だけでなく、補助機能を備えた実用的なHTML編集環境です。
テキストエディタが向いている場面
テキストエディタは、アフィリエイト広告コードの貼り付けやiframeの埋め込み、ビジュアルエディタで崩れてしまうレイアウトの修正などに向いています。特に外部から提供されたHTMLスニペットをそのまま記事に挿入したい場合に重宝します。
また、ビジュアルエディタが自動で付与する不要なタグを削除し、ソースコードを整理する目的にも使えます。クラシックエディタを使い続けている方にとっては、テキストエディタは欠かせない編集ツールと言えるでしょう。
クラシックエディタのテキストエディタは、クイックタグボタンが便利なので、HTML初心者でも取り組みやすいでしょう。
コードエディタの特徴
ブロックエディタとの関係
ブロックエディタは、WordPress 5.0以降で標準となった編集環境です。段落・見出し・画像などをブロックとして管理し、直感的にレイアウトを組み立てられます。コードエディタは、このブロックエディタの裏側にあるHTMLソースを確認・編集するためのモードです。
コードエディタを開くと、ブロックの区切りを示すHTMLコメントタグを含む投稿全体のソースコードが表示されます。ブロックエディタに戻したとき、このコメントタグの構造が壊れているとブロックエラーが発生するため注意が必要です。
コードエディタで表示される内容
コードエディタでは、通常のHTMLタグに加えて「<!– wp:paragraph –>」のようなWordPress独自のブロックコメントが表示されます。これらのコメントタグは、各ブロックの種類や設定情報を保持する役割を持っています。
以下の表で、コードエディタ上に表示される代表的なブロックコメントの例を確認しておきましょう。
| ブロックコメント例 | 対応するブロック |
|---|---|
| <!– wp:paragraph –> | 段落ブロック |
| <!– wp:heading –> | 見出しブロック |
| <!– wp:image –> | 画像ブロック |
| <!– wp:list –> | リストブロック |
| <!– wp:html –> | カスタムHTMLブロック |
ブロックコメントを誤って削除・改変すると、ブロックエディタに戻った際にエラーが発生するため、編集には慎重さが求められます。
テキストエディタとの主な違い
テキストエディタとコードエディタは、どちらもHTMLソースを編集できる機能ですが、利用する環境やソースコードの構造が異なります。以下の比較表で両者の違いを整理しました。
| 比較項目 | テキストエディタ | コードエディタ |
|---|---|---|
| 対応エディタ | クラシックエディタ | ブロックエディタ |
| 切り替え方法 | 画面右上のタブ切り替え | オプションメニューから選択 |
| 表示内容 | 純粋なHTMLソース | ブロックコメント付きHTML |
| クイックタグボタン | あり | なし |
| ブロック構造の影響 | なし | あり（コメントタグに注意） |
自分が使用しているエディタ環境に応じて、適切なHTML編集モードを選ぶことが大切です。
コードエディタはブロックコメントの扱いがポイントです。構造を壊さないよう、編集範囲を意識して操作しましょう。
バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！
エディタの切り替え方法
クラシックエディタでの切り替え手順
クラシックエディタを使用している場合、投稿の編集画面右上に「ビジュアル」と「テキスト」の2つのタブが表示されています。「テキスト」タブをクリックするだけで、テキストエディタに切り替わります。
ビジュアルタブとテキストタブはワンクリックで何度でも切り替えられるため、見た目の確認とソースコードの編集を交互に行えます。ただし、切り替え時にビジュアルエディタが自動的にHTMLを整形する場合があるため、意図しないタグの追加・削除に注意しましょう。
クラシックエディタでテキストエディタに切り替える際のチェックポイント
- 画面右上の「テキスト」タブをクリックする
- 切り替え前に下書き保存しておく
- ビジュアルに戻した際にタグが変わっていないか確認する
ブロックエディタでの切り替え手順
ブロックエディタ（Gutenberg）でコードエディタに切り替えるには、投稿編集画面の右上にある縦三点リーダー（オプションメニュー）をクリックし、表示されたメニューから「コードエディター」を選択します。
キーボードショートカット「Ctrl + Shift + Alt + M」（Macの場合は「Cmd + Shift + Alt + M」）でもコードエディタとビジュアルエディタを素早く切り替えられます。頻繁にHTMLを確認する方は、ショートカットを覚えておくと作業効率が上がります。
カスタムHTMLブロックの活用
ブロックエディタでは、投稿全体をコードエディタに切り替えなくても、部分的にHTMLを挿入できる「カスタムHTML」ブロックが用意されています。ブロック追加メニューから「カスタムHTML」を選ぶと、そのブロック内だけでHTMLコードを自由に記述できます。
アフィリエイトコードの埋め込みや外部ウィジェットの挿入など、特定の箇所だけHTMLを使いたい場合に便利です。投稿全体のブロック構造を壊すリスクが少ないため、コードエディタよりも安全に利用できるでしょう。
ブロックエディタでHTMLを編集するときのチェックポイント
- 部分的なHTML挿入にはカスタムHTMLブロックを使う
- 投稿全体を編集するときだけコードエディタに切り替える
- ブロックコメントタグは原則として削除・変更しない
- 編集前に必ず下書き保存またはリビジョンを確認する
ショートカットキーやカスタムHTMLブロックを覚えておくと、エディタの切り替えがぐっと楽になりますよ。
バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！
バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
サービス導入事例
株式会社ヤマダデンキ 様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る
コードエディタの実践的な使い方
外部コードの埋め込み方
広告タグやSNSの埋め込みコード、Googleフォームなどの外部サービスが提供するHTMLコードを記事に挿入するケースは多くあります。ブロックエディタを使用している場合は、カスタムHTMLブロックを追加してコードを貼り付けるのが安全な方法です。
外部コードを貼り付ける際は、コードの前後に余計なスペースや改行が入っていないか確認し、プレビューで表示崩れがないかチェックしましょう。クラシックエディタの場合はテキストエディタに切り替えてから、該当箇所にコードを直接貼り付けます。
HTMLタグの手動修正
ビジュアルエディタやブロックエディタの操作だけでは、意図通りのHTML構造にならないことがあります。たとえば、特定の要素にCSSクラスを追加したい場合や、不要な空タグを削除したい場合には、コードエディタでの手動修正が必要です。
手動修正を行う場合は、一度に大幅な変更を加えず、少しずつ編集してはプレビューで確認するのが安全な進め方です。
トラブル時のソース確認
記事のレイアウトが崩れたり、保存後に表示がおかしくなった場合は、コードエディタでHTMLソースを確認するのが効果的です。閉じタグの不足やタグのネスト（入れ子構造）の誤りが原因であることが多いため、ソースコードを直接見ることで問題の特定がしやすくなります。
ブロックエディタでブロックエラーが表示された場合も、コードエディタに切り替えてブロックコメントの構造を確認し、修正できます。修正が難しい場合は、該当ブロックを一度削除して作り直すことも選択肢の一つです。
編集時のバックアップ方法
コードエディタやテキストエディタでHTMLを直接編集する前には、必ずバックアップを取っておくことが重要です。WordPressには投稿のリビジョン（変更履歴）機能が標準で備わっており、編集前の状態に戻すことができます。
リビジョンを利用するには、投稿編集画面のサイドバーにある「リビジョン」の項目をクリックし、過去のバージョンを選択して復元します。大幅なコード編集を行う前には、投稿のHTMLソース全体をテキストファイルにコピーしておく方法も有効です。
コードエディタで編集する前に確認すべきこと
- 下書き保存またはリビジョンが残っているか確認する
- HTMLソース全体をテキストファイルにバックアップする
- 編集後はプレビューで表示を確認してから公開する
実際に編集する前のバックアップ習慣が、万が一のトラブルからサイトを守ってくれるはずです！
コードエディタ利用時の注意点
ブロック構造を壊さない方法
ブロックエディタのコードエディタで編集する場合、最も注意すべきなのがブロックコメントの構造を壊さないことです。「<!– wp:paragraph –>」と「<!– /wp:paragraph –>」のようなコメントタグのペアは、ブロックの開始と終了を示しています。
ブロックコメントタグを誤って削除すると、ビジュアルエディタに戻した際に「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが表示されることがあります。このエラーが出た場合は、「HTMLに変換」や「ブロックのリカバリーを試行」の選択肢が表示されるので、状況に応じて対処してください。
自動整形による影響
クラシックエディタのテキストエディタでは、ビジュアルタブに切り替えた際にWordPressが自動的にHTMLを整形することがあります。たとえば、空の段落タグが追加されたり、改行コードが変更されたりするケースが報告されています。
この自動整形はwpautop関数によって行われるもので、テキストエディタで緻密にHTMLを組んだ場合に意図しない変更が生じることがあります。対策としては、不必要なビジュアルタブへの切り替えを避けるか、テーマやプラグインの設定でwpautopを無効化する方法があります。
セキュリティ面での配慮
コードエディタやテキストエディタでは、JavaScriptやiframeなど、セキュリティ上注意が必要なコードも入力できます。WordPressには投稿者の権限に応じて特定のHTMLタグをフィルタリングする「KSES」という仕組みがありますが、管理者権限であれば多くのタグが使用可能です。
信頼できないソースからコピーしたコードをそのまま貼り付けると、不正なスクリプトが混入するリスクがあるため、コードの内容を必ず確認してから挿入しましょう。
コードエディタを安全に使うためのチェックリスト
- ブロックコメントタグのペアが正しいか確認する
- 外部からコピーしたコードに不審なスクリプトが含まれていないか確認する
- HTMLタグの開始タグと閉じタグが対応しているか確認する
- 編集後は必ずプレビューで表示を確認する
安全にコードを編集するために、チェックリストの項目を毎回確認する習慣を身につけてみましょう。
よくある質問
WordPressのテキストエディタやコードエディタに関して、多くの方が疑問に感じるポイントをまとめました。
- WordPressのテキストエディタとコードエディタは同じものですか？
-
厳密には異なります。テキストエディタはクラシックエディタに搭載されたHTML編集モードで、コードエディタはブロックエディタ（Gutenberg）に搭載されたHTML編集モードです。どちらもHTMLソースコードを直接編集できますが、対応するエディタ環境や表示されるコードの構造が違います。
- ブロックエディタでコードエディタに切り替えるとエラーが出るのはなぜですか？
-
コードエディタでブロックコメントタグ（例：<!– wp:paragraph –>）を誤って削除・変更した場合にエラーが発生することがあります。ブロックエディタはコメントタグで各ブロックの情報を管理しているため、これらを保持したまま編集することが大切です。エラーが出た場合は「ブロックのリカバリーを試行」で復元を試みてください。
- クラシックエディタのテキストエディタは今後も使えますか？
-
クラシックエディタは「Classic Editor」プラグインをインストールすることで引き続き使用できます。ただし、WordPress公式は今後ブロックエディタの利用を推奨しており、Classic Editorプラグインのサポート期間にも注意が必要です。将来的にはブロックエディタのコードエディタやカスタムHTMLブロックへの移行を検討されることをおすすめします。※プラグインのサポート方針は変更される場合があります。
まとめ
WordPressのテキストエディタはクラシックエディタ向けのHTML編集機能、コードエディタはブロックエディタ向けのHTML編集機能です。それぞれ対応するエディタ環境や操作方法が異なるため、自分の使用環境に合わせた使い分けが重要です。
コードエディタを活用すれば、外部コードの埋め込みやレイアウトの細かな調整が可能になります。ただし、ブロックコメントの構造を壊さないことや、編集前のバックアップなど、安全に作業するための基本を守ることが大切です。
まずは簡単なHTMLの修正からコードエディタを試してみて、少しずつ操作に慣れていくことで、WordPressでの記事作成の幅が広がるでしょう。
