2025.02.15 2025.02.16

【中上級レベル】ブロックエディターで作ったHTMLをクラシックエディターに貼り付けると、なぜバグるのか？

ヤギハシ

ショーガック（正覚）

こんにちは！ヤギハシワードプレス講座の八木橋ショーガック（正覚）です。

今日は「ブロックエディターで作ったHTMLをクラシックエディターに貼り付けると、なぜバグるのか？」について解説するよ。

WordPressを使っていると、ブロックエディター（Gutenberg）とクラシックエディター（Classic Editor）の違いに戸惑うことがあるよね。

特に、ブロックエディターで作成したコンテンツをHTMLに変換してクラシックエディターに貼ると、レイアウトが崩れたり、思った通りに表示されなかったりすることがある。

これには、いくつかの理由があるんだ。

1. GutenbergのHTML構造とクラシックエディターの違い

ブロックエディターは、**「ブロックごとにHTMLを管理」**しているのが特徴。

たとえば、wp-block というクラス名が付いていたり、
 のような特殊なコメントが含まれていたりする。

これをクラシックエディターに貼ると、クラシックエディターはこれらのコードを理解できず、余計な空白ができたり、文字が勝手に大きくなったりするんだ。

クラシックエディターには、HTMLを自動で整形する機能がある。具体的には、

などが行われる。Gutenberg用に作られたHTMLが、クラシックエディターの仕様によって崩れてしまうわけだ。

WordPressのテーマやプラグインによっては、GutenbergとクラシックエディターのCSSの適用が異なる場合がある。

そのため、同じHTMLを使っても、デザインが崩れたり、特定の要素が適用されなかったりすることがある。

じゃあ、どうすればこの問題を防げるのか？

GutenbergのHTMLをそのまま貼る前に、

こうすることで、クラシックエディターでもスムーズに表示できる。

クラシックエディターには、「ビジュアル」と「テキスト」の2つのモードがあるよね。 「テキスト」モードで貼り付けると、HTMLの崩れが抑えられることがある。

ただし、「ビジュアルモード」に切り替えると、また整形されるので注意！

もし、特定のレイアウトを崩したくないなら、 ショートコードを作成して管理するのもおすすめ。

例:

function my_custom_shortcode() {

return ‘<div class=”custom-box”>Hello, World!</div>’;

}

add_shortcode(‘custom_box’, ‘my_custom_shortcode’);

この[custom_box]をクラシックエディターに貼ると、Gutenbergの影響を受けずに表示できる。

このプラグインを使うと、クラシックエディターの自動整形を抑えられるので、HTMLの崩れを防げる可能性がある。

WordPressを使う上で、エディターの違いを理解しておくと、余計なトラブルを防げるよ！

ABOUT ME