こんにちは。和雨(@waublg)です。
この前記事を書いていて、はじめて気が付きました。
それは、、
コードブロックが改行されてない!!
見てくださいこれ。

Gutenbergの編集画面です。ここはちゃんとしてます。
それなのにですよ、

改行されないんですよ!!
「改行されないなんてそんな訳あらへんやろ~」って再度試したのですが、「ほんまや」という結果にしかならず。。(エセ関西弁ごめんなさい)
WordPressの仕様?テーマの仕様?それとも設定ミスってる?
色々考え調べた結果を、今日は共有したいと思います!
まず原因を結論から言うと、
原因:THE THORのHTML圧縮処理によって改行コードが消されている
これです。
とりあえずどういう事か解説と、その解決方法を提案します!
THE THORのHTML圧縮が原因
ということで、原因となっているHTML圧縮について簡単に説明しましょう。
これはTHE THORの有力な機能の一つで、HTMLを必要最低限のサイズにし、ページ表示速度を上げられる機能です。
これ自体はすごく優秀で、THE THORの魅力である速度やSEOにおいて貢献している機能の一つと言えます。
ですが、このHTML圧縮の処理中でコード内の改行コードが消されてしまいます。
この機能のせいでコードが改行されなくなるのは一種のバグと言えるかと思いますが、現時点で修正はされていません。
ですので、対処は私達ユーザ側でする必要があります。
以降ではその解決策を紹介します!
コードに改行を取り戻す方法
さて、ではさくさく解決させちゃいましょう!
とは言っても、提案できる解決策は両極端です。笑
HTML圧縮を無効化する
解決策を調べるうえで色んな記事を見ていたのですが、ほとんどの記事でこれを紹介していました。
やり方はテーマの設定画面で、[SEO設定] > [HTML圧縮設定] を選択すると[HTMLを圧縮する]というチェックボックスがあるので、こちらのチェックを外せばOKです。
これでHTML圧縮が無効化され、コードブロックも改行が残ったそのままの状態で表示されるようになります。
やはり原因になる元を断てばいいわけです。シンプルですね!
でも、私は別の方法を取りました。
それは、改行が圧縮で消される処理を削除すること。
そりゃあね、テーマのプログラムをいじるなんてリスキーなこと普通はしませんよ?
でもです!私はどうしても「コードブロック一つのために、全体のパフォーマンス落とすの?」っていう気持ちがぬぐえなかったんです!!
だって折角のTHE THORの魅力が欠けるなんて嫌だったんだよー…。
とりあえずどのようにやったかは共有しますが、無理にやる必要ないですからね!
THE THORのプログラムを書き換える
では書き換えをしましょう!
無責任なことは言えないので、もしあなたがやるときは、いつでも戻せるように準備しておいてくださいね!
私が実際に試して環境壊れるようなことが無いのは確認済みですが、念のためバックアップを取っておくのを推奨します。
さて、具体的な方法ですが、まずはサーバ上のファイルを書き換えられるようにしておきましょう。
レンタルサーバの画面からだったり、(詳しい人は)FTPソフトを使って接続することができます。
実際に手を加えるファイルは、themes > the-thor > footer.php です。
つまりTHE THORの親テーマのfooter.phpということですね。

実際に変更する箇所はこの箇所で、私の使っているバージョンでは261行目にありました。
この行の先頭を、画像のようにスラッシュを2つ並べてコメントアウトします。
※コメントアウトとは指定範囲の処理を実行させないことを言います
これで完了です!あとは保存して画面を更新すれば改行は直っているかと思います!
やること自体は簡単だったので、拍子抜けでしょうか?笑
でも、テーマを書き換えるのはそれなりにリスクだということは覚えておいてくださいね!
また、ここで修正したのは親テーマなので、テーマアップデートで修正が消えてしまうリスクがあります。
そのときはもう一度修正する必要があるので、覚えておいてくださいね。
その前にテーマ元がこの問題を修正してくれることを祈りましょう……。笑
最後に
一つのブロックのためにてんやわんやするのってすごく悔しいですよね……。
私もこの問題の調査をしていて、「この時間あったら記事書けるのに~!」って泣いてました。
実はこの記事、SEO的にはそこまで価値がないと思ってます。
同じ悩みにぶつかって時間がムダになる人を減らす助けになるためというのが主な目的なのです!
せっかく同じテーマを使っている同士ですから、協力してどんどん改善していきたいですよね!
Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。[…]