ショーガック（正覚）
こんにちは！ヤギハシワードプレス講座の八木橋ショーガック（正覚）です。
今日は「 ブロックエディターで作ったHTMLをクラシックエディターに貼り付けると、なぜバグるのか？」について解説するよ。
WordPressを使っていると、ブロックエディター（Gutenberg）とクラシックエディター（Classic Editor）の違いに戸惑うことがあるよね。
特に、ブロックエディターで作成したコンテンツをHTMLに変換してクラシックエディターに貼ると、レイアウトが崩れたり、思った通りに表示されなかったりすることがある。
これには、いくつかの理由があるんだ。
1. GutenbergのHTML構造とクラシックエディターの違い
ブロックエディターは、**「ブロックごとにHTMLを管理」**しているのが特徴。
たとえば、wp-block というクラス名が付いていたり、
<!-- wp:paragraph --> のような特殊なコメントが含まれていたりする。
これをクラシックエディターに貼ると、クラシックエディターはこれらのコードを理解できず、余計な空白ができたり、文字が勝手に大きくなったりするんだ。
2. クラシックエディターの自動整形機能が影響する
クラシックエディターには、HTMLを自動で整形する機能がある。具体的には、
-
<p>タグや<br>の追加・削除 -
divやspanの勝手な変更 -
wp-blockクラスの削除
などが行われる。Gutenberg用に作られたHTMLが、クラシックエディターの仕様によって崩れてしまうわけだ。
3. 使用するテーマやプラグインによって表示が異なる
WordPressのテーマやプラグインによっては、GutenbergとクラシックエディターのCSSの適用が異なる場合がある。
そのため、同じHTMLを使っても、デザインが崩れたり、特定の要素が適用されなかったりすることがある。
解決策
じゃあ、どうすればこの問題を防げるのか？
方法①: HTMLの余分なコードを削除する
GutenbergのHTMLをそのまま貼る前に、
-
<!-- wp:xxx -->のようなコメントを削除 -
wp-block-xxxのクラスを削除、または適用するCSSを変更
こうすることで、クラシックエディターでもスムーズに表示できる。
方法②: “テキストモード” で貼り付ける
クラシックエディターには、「ビジュアル」と「テキスト」の2つのモードがあるよね。 「テキスト」モードで貼り付けると、HTMLの崩れが抑えられることがある。
ただし、「ビジュアルモード」に切り替えると、また整形されるので注意！
方法③: ショートコードを活用する
もし、特定のレイアウトを崩したくないなら、 ショートコードを作成して管理するのもおすすめ。
例:
function my_custom_shortcode() {
return ‘<div class=”custom-box”>Hello, World!</div>’;
}
add_shortcode(‘custom_box’, ‘my_custom_shortcode’);
この
[custom_box]をクラシックエディターに貼ると、Gutenbergの影響を受けずに表示できる。方法④: Advanced Editor Tools（旧TinyMCE Advanced）を導入する
このプラグインを使うと、クラシックエディターの自動整形を抑えられるので、HTMLの崩れを防げる可能性がある。
結論
-
GutenbergのHTMLは独自構造を持っているので、そのままクラシックエディターに貼るとバグる。
-
クラシックエディターはHTMLを自動整形するので、意図しない変更が加わる。
-
テーマやプラグインによっては、Gutenberg用とクラシックエディター用でCSSの適用が異なる。
-
「テキストモードで貼る」「余分なコードを削除する」「ショートコードを使う」などの対策で崩れを防げる。
WordPressを使う上で、エディターの違いを理解しておくと、余計なトラブルを防げるよ！
