クラシック→ブロックエディター移行時の表示崩れやタグが消えるのを解消する方法

2021/06/262021/06/27

結論から言うと「カスタムHTML」機能で崩れを最小限に抑えられます。ページ下部に方法を書いてます！

そろそろクラシックエディタからグーテンベルクへ乗り換えたいと思っている方もいるのではないでしょうか。

かくいう私も、サポート終了が近づいてきて勉強し始めた人間の一人です。

グーテンベルク、表示崩れしがちだから敬遠してたのよね…

「投稿はお知らせ機能、固定ページは会社概要やアクセスなどのコンテンツ」のような企業サイトってよくありますよね。いつも私は固定ページはビジュアル機能を使わずhtml直書きしてるのですが、ブロックエディタに変更すると表示崩れが起きてしまうので、プラグインをつかってクラシックエディタのまま使っていました。

サポート終了の声がなければ、クラシックを使い続けていたと思います。

今回はクラシックエディタ→グーテンベルクブロックエディタ移行時にWordPressの自動整形機能で苦戦した内容と対処方法をまとめました。

がんばった

☆今回はこのコードを使って試します。

<section class="sec">
  <div class="container">
    <h2 class="h2-main">もぐもぐでざいん</h2>
    <p>もぐもぐ！</p>
    <p class="orange">もぐ？</p>
    <table>
      <tr>
        <th>テーブル</th>
        <th>テーブル</th>
      </tr>
      <tr>
        <th>テーブル</th>
        <th>テーブル</th>
      </tr>
      <img src="img/image.jpg" alt="">
    </table>
  </div>
</section>

※後から気づきましたがtableの直下にimgタグが入ってました…(T_T)スルーしてください。

何もしないままクラシック→ブロックエディタにしたら…

まずはそのままブロックエディタに戻してみます。

なんだか見たことあるような…？

これはブロックエディタの機能「クラシック」が適用されている状態です。

ブロックエディタに切り替えた際は、全ての記事がこうなっているはずです。

ビジュアル機能を使うなら、このままでも良いかもしれません。

ただ、今回はHTMLを直接編集したいので、「HTMLとして編集」を選択します。

すると…

imgタグがpタグで囲まれちゃってる

よく見たらテーブルの最後にも空のpタグが追加されてます。

しかもインデントも消えちゃってます。。

これまでもpタグは勝手に入ってましたが…

wordpressには「wpautop」というタグの自動変換機能があります。

クラシックの時代にも「pタグが入ってしまう」ことがありましたが、以下の呪文をfunction.phpに書けば余計なタグは入りませんでした。

// wpautopの無効化
remouve_filter('the_title', 'wpautop');  // タイトル
remove_filter('the_content', 'wpautop');  // 本文
remove_filter('comment_text', 'wpautop');  // コメント
remove_filter('the_excerpt', 'wpautop');  // 抜粋

ですが、グーテンベルクではpタグは消えません。wpautopの無効化が効かないようです。。

2018年の記事ですが、wpautopが効かないというトピックの記事を見つけました。この頃から解消していないのかも？