こんにちは、一番好きな季節は冬！はしづめです。
今回はFont Awesomeのアイコンを使うとWordPressの表示がめっちゃくちゃに崩れる問題について書きたいと思います。
Font Awesomeで表示が崩れる？
まずは実際にご覧ください
どういう流れで表示崩れが起こるのかをキャプチャ画像でご説明しますね。
エディタはGutenberg（ブロックエディタ）のみを使用、クラシックエディタ他エディタ系のプラグイン等は一切入れていない環境です。
この表示崩れは使用テーマに関係なく起こります
キャプチャ画像ではテーマ「Lightning Pro」を使用していますが、他のテーマでも同様の表示崩れが起こります。Lightningの問題ではないので誤解なきようお願いいたします。
Font Awesomeのサイトで使いたいアイコンを探してタグをコピーしてきました。
今回はこの爆弾がぴったりだなと思ったので爆弾を選びましたが、別に爆弾だから表示が爆発するわけではないです。どのアイコンを使っても同じように崩れます。
段落ブロックをHTMLとして編集して、Font Awesomeアイコンのタグを挿入します。
それからビジュアル編集に戻します。
正常に表示されていますね。
この通りプレビュー画面でも問題ありません。
では一旦プレビュー画面は閉じて、編集画面に戻ります。先ほどFont Awesomeのタグを挿入したブロックに、ビジュアル編集モードで編集を加えましょう。
画像の通り、二行目に文章を追加してみました。
特になんの問題もなく追加出来ています。が、ここでプレビューしてみると……。
こうなります。
コンテンツ部分を通り越してサイドバーまで崩れています。映ってないですがフッターも見るも無残な状態になります。
最初にめっちゃくちゃに崩れるって蛍光マーカーまで引いて言った理由がおわかりいただけますでしょうか。
どうして崩れてしまうのか
ビジュアル編集モードで編集すると崩れる
ド派手に崩れた後に改めてHTML編集モードでブロックの中を見てみると、</i>が消されているのがわかります。<i>タグが閉じていないため、その後に続く諸々を巻き込んで表示が崩れてしまうみたいです。
Font Awesomeのタグを挿入したあとで一切そのブロックに編集を加えなければ表示が崩れることはありません。
また、HTML編集モードに切り替えて追加編集を行った場合も大丈夫でした。
<i>や<span>の空タグが入ったブロックをビジュアル編集モードで編集すると崩れる、ということみたいですね。
最終的にブロックは壊れる
最終的には下の画像のようにブロックが壊れてしまいます。
ブロックのリカバリーを試行しても、派手な表示崩れが普通の表示崩れレベルに治まるだけで根本的な解決にはなりません。
こうなってしまったらさっさとブロックを削除して作り直しましょう。
余談：原因は自動整形機能（wpautop)……ではない？
現エディタであるGutenberg（ブロックエディタ）より前のエディタではクラシックとビジュアルが行き来出来て、ビジュアルの方に備えられた勝手に<p>タグや<br>タグなどを入れてくれる自動整形機能のせいでややこしいことになっていたようななっていなかったような……もうよく覚えてませんが、とにかくそんな機能がありました。
空の<span>タグや空の<i>タグを勝手に消しちゃう的な機能もあった気がします。よく覚えてませんが。
今回もどうせその自動整形機能のせいだろうと思って空タグをいじらないように制御しようとコードをいじくってて気付いたんですけど、そもそもGutenbergってwpautopが効いてないっぽい……？？
私がなんか間違ってるのかも知れないんですが、wpautopを全停止させてもブロックの挙動が一切変わらないんですよね……。これは後日時間がある時にちゃんと検証しようと思います。
対処法は？
カスタムHTMLブロックを使う
ビジュアル編集モードを使わなければいいわけなので、使わないで対処する方法です。
普通に段落ブロックをHTMLとして編集した後に一切触らないようにする……でもよいのですが、これは忘れた頃にうっかり触っちゃってあ゛ーーーーーーってなりがちなのであんまりおすすめしません。
その点、カスタムHTMLブロックは最初からHTML編集モードでビジュアル編集モードにならないので、うっかり触っちゃうことがなくなります。
<i>タグに空白を入れて使う
空タグだから目をつけられるわけなので、空タグに見えないようにする方法です。
<i class="fas fa-bomb"> </i>こんな感じで<i>タグの中に空白を入れましょう。半角スペースで大丈夫です。
スペースではなく を入れても大丈夫だったので、お好みに合わせてどうぞ！
これならビジュアル編集モードで編集しても</i>が勝手に消されないので表示が崩れることもありません。
どうしてもカスタムHTMLブロックは嫌だ！という場合はこの方法がおすすめです。
ってなに？？
半角スペースを空けるためのものだと思ってたんですが、何気なく調べたところ正しくは改行禁止の空白を開けるためのものらしいです。
たとえばGUさんやUNIQLOさんでお馴染みの日本企業ファーストリテイリングさんは、英語だとFAST RETAILINGと表記されます。普通の半角スペースだとFASTとRETAILINGの間で改行されてしまいますが、FAST RETAILINGのように表記することで単語間の空白は保持したまま改行を禁止できるため、FAST RETAILINGがひとつながりの言葉であることがわかりやすくなります。英語圏特有の機能ですね！
ちなみに読み方はno-break space（のーぶれーくすぺーす）です。
検証中：PHPでなんとかなんない？
いちいち空白入れたりするのもめんどいので自動整形機能を制御してなんとかならないかなーと小一時間コードをごちゃごちゃしてたんですけど、なんかそもそも自動整形機能のせいじゃないかも説が浮上してきたところで眠気が限界に達したので……時間がある時にまた挑戦してみます。
Gutenbergちゃん、最初出会った時から私は手に馴染んで大好きなんですけど中身覗いてみたら超ミステリアスでしたね！そこもかわいい！
……現実逃避してないでがんばって攻略します……。
わたしが書きました
ほかにも書きました
Life2022/08/29人生初！マルチに勧誘されてみたよ
Tips2021/12/20エンドユーザー3人に訊いた、VK Blocks Pro「投稿リスト」の推しポイント！
Tips2021/01/29Vitaのスティックを交換修理するよ！
Tips2021/01/16Lightningの前の記事・次の記事をとことんカスタマイズする！その1
こんにちは。1週間調べてようやくこちらのサイトにたどり着きました！とても参考になりました。ありがとうございます。解決した問題→wpバージョン5.8.4まではLightningでh1タグにFont Awesomeのタグをそのまま挿入してもクラシックエディタ、ブロックエディタの両方で編集画面が使えていましたが、wp5.9以降では、クラシックエディタは使えるのですが、ブロックエディタは編集画面が真っ白になり編集不可の状態。自分なりに色々な方法を試し、h1タグからFont Awesomeを削除するとwp5.0以降でも問題なく両方のエディタで編集することが可能になったのはいいのですが、どうしてもh1タグを装飾したくて調べていました。そしてこちらのサイトにたどり着きました。そこでh1タグも同様に半角スペースを使い挿入してみると、wp6.0.1でも問題なく両方のエディタで編集が可能になりましたーーー！ありごとうございました。
こんにちは！
結構前に書いた記事ですがお役に立てて良かったです！
WordPressの方で根本的になんとかならないものかと思いますが、たぶん2バイト言語特有の問題っぽいのでしばらくはユーザー側でなんとかするしかなさそうですね…。
WPバージョン別に検証することはなかなか出来ないので、有益な情報をいただけてこちらも勉強になりました！ありがとうございます！