広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【WordPress】Code Block Proのおま環問題。一行表示になりインデントも反映されない!→解決済み

WordPress

「Code Block Pro」WordPressプラグインのアイコン画像

この記事では、WordPressプラグイン「Code Block Pro」を使い始めたのはいいものの、使っているテーマ「Luxeritasルクセリタス」との相性が悪いのかいくつか問題が発生した件について書きます。

全て解決済みで現在は快適に利用できています。

【WordPress】Code Block Proのおま環問題。一行表示になりインデントも反映されない!→解決済み

ナポリタン寿司は2024年12月8日に、これまで使っていたWordPressテーマ「Luxeritas」に内蔵されていたシンタックスハイライターブロックから「Code Block Pro」プラグインに移行しました。移行経緯は以下記事参照です。

Visual Studio Code」風コード画面で綺麗です。設定項目も豊富で挿入方法も他のブロックと変わらないので、こりゃ移行対象決定か!と嬉しかったんですが、いくつか問題点が発生しました。

「Code Block Pro」WordPressプラグインの画像

以下の3点です。

本記事を書いている時点でもう全て解決したので、一番最初に解決策、それ以降に発生していた問題点を書いていきます。結果おま環であったものの、場合によっては他の人も全然対象になりうる問題だなと思いました。

【解決方法】テーマのHTML圧縮率(最適化設定)を変更する

僕が使っているWordPress無料テーマ「Luxeritas」のHTML圧縮機能が原因でした。HTMLを圧縮してしまっていたせいで、記事編集画面では正常な表示なのに実際のブログ記事を見たら表示が崩れていました。

僕はテーマ内蔵の圧縮機能でしたが、人によってはそういったWordPressプラグインを入れている可能性もあります。その場合はプラグインの圧縮レベルを弱める、あるいは圧縮しないように設定します。

「Luxeritas」テーマの場合、WordPress管理画面を開いて左側サイドバーの「Luxeritas」→「カスタマイズ」→「圧縮・最適化」をクリックします。

「Code Block Pro」を正常に使うため「Luxeritas」テーマの「HTMLの圧縮率」を変更する手順画像1

「HTMLの圧縮(率)」という項目があります。僕は無知でバカでアホなため、「CSSとかHTMLを圧縮したらいい具合にページ表示速度とか改善されるのかな?よく分からないけど圧縮しちゃえー」で一番効果が大きい「圧縮率・高」にしてしまっていました。

「Code Block Pro」を正常に使うため「Luxeritas」テーマの「HTMLの圧縮率」を変更する手順画像2

「分からないならそもそもいじらない」といういにしえから伝わっているであろう基礎中の基礎をおこたっていました。分かった気でいて「パッと見変化ないからこのままでいいか」となっていました。

CSSは圧縮したままでいいですが、HTMLの圧縮率は「圧縮しない」にします。後でそれぞれの比較画像を貼りますが「低」でもダメでした。

「Code Block Pro」を正常に使うため「Luxeritas」テーマの「HTMLの圧縮率」を変更する手順画像3

変更できたら下部の「保存」ボタンを押します。

反映後、これまでの苦労はなんだったのか…となるくらいあっさり正常な表示になりました。「Luxeritas」で用意されていた圧縮率・高、圧縮率・低、圧縮しないの3つを試した比較画像を貼っておきます。見にくい場合クリックで拡大すると思います。

「Luxeritas」テーマの「HTMLの圧縮率」を変更して「Code Block Pro」ブロックを表示した比較画像

「圧縮率・高」は論外で複数行のコードにしても一行表示になっています。「圧縮率・低」はパッと見いい感じですがよく見るとインデントがおかしいです。

「圧縮しない」のみ編集画面そのままの表示でした。

これにて解決です。「Luxeritas」で問題なく「Code Block Pro」を使えます。フォントサイズが小さい場合は「Code Block Pro」の→Font Styling→「Clamp Font Sizes」にチェックを入れます。

3つの問題点

何をどうしても一行表示になる

ブロックエディターの記事編集画面を開いて、ブロックの追加で「Code Pro」を追加します。スタイル(言語やテーマ)を整えて記事のプレビューを確認してみます。

「Luxeritas」で「Code Block Pro」を挿入する手順画像

記事編集画面では思った通りの見た目だったのに、なぜか一行で表示されてしまいました。水平スクロールバーが表示されて横にめっちゃ長くなっています。

「Luxeritas」で「Code Block Pro」を挿入して実際の記事を確認したら一行表示になってしまっている画像

インデントが正しく設定されていない。左に詰められる

一行で表示された時、「もしかして使っているLuxeritasテーマに組み込まれているcodeタグ関連のCSSが干渉している?」と思い色々CSSを適用していると、折り返すCSSを「pre」内の「code」に適用することで複数行になってくれました。

「Luxeritas」で「Code Block Pro」が一行にならないよう無理やり折り返しCSSを適用した画像

最初は自分でCSSを作成しましたが、適用するためのセレクタ(div.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code)で検索した時、開発者様がCSSを公開していたのでありがたく使わせていただきました。

なんでデフォルトで一行表示になるのかは不明で気持ち悪さは残りましたが、まぁこれにて対処できたし一件落着か…と思いきや、よくよく編集画面と実際のブログ記事を見比べてみるとインデント(Tabキーで挿入する余白)がおかしいことに気づきました。

「Code Block Pro」の折り返しCSSを適用した後インデントの表示が崩れている比較画像

僕がCSSを書く時、適用する場所(セレクタ)を指定した後、実際にどんなカスタマイズをするかプロパティ・値を設定しますが、プロパティは見やすいようにセレクタよりも一段階下で書くようにしています。

インデント、字下げ、段落下げとかっていうんですかね。正式名称は知りません。

正確には僕が調整しているわけではなく「Visual Studio Code」で書いて自動整形したのをコピペしているだけですけどね。

「Visual Studio Code」上、及び貼り付けた記事編集画面では正しく整形されているのに、実際の記事を確認してみるとインデントされていないことになっていてセレクタとプロパティが同じ列から開始されてしまっています。

一部「&」で始まっている行はインデントされていますが、やっぱり全体的にはぐちゃぐちゃです。

これが、無理やり一行表示を複数行で表示するように折り返し関連のCSSを適用したせいなのか、はたまたもっと別の原因があるのかはこの時点では分かりませんでした。分からなかったからこそ意味のない試行錯誤を沢山してしまいました。

フォントサイズ

インデントが正しく反映されないとしても「Luxeritas」のシンタックスハイライターはおま環問題があるし、デザインや使い勝手がいいからこそ、ひとまずスルーして使うか…と思っていましたが、もう一点気になることがありました。

文字サイズが小さすぎる点です。「Code Block Pro」ブロックを挿入して右側サイドバーの設定→「Font Styling」→「Font Size」で用意されているS、M、L、XLのうちXLを選択してもまだ当サイトで設定しているpタグの文字サイズより小さいと感じました。

「Code Block Pro」のフォントサイズが小さい画像

以下、実際XLを指定しているブロックを貼っておきます。小さいです。

CSS
/*WordPress編集画面のパーマリンク内の「さらに詳しく。」のリンクだけ無効化*/
.editor-post-url div>a.components-external-link[href$="/#permalink"] {
    pointer-events: none !important;
    color: inherit !important;

    /*下線削除*/
    &>span {
        text-decoration: none !important;
    }

    /*右にある矢印アイコン非表示*/
    &>span[aria-label="(新しいタブで開く)"] {
        display: none !important;
    }
}

XLではなく、右上の調整ボタンから具体的にカスタムサイズも指定できたのでまぁそこまで重大ではなかったです。

さらにサイズ選択のすぐ下にあった「Clamp Font Sizes」オプションの説明を読んですぐに解決しました。

<!--原文-->
Check this if your font sizes are unusually large or tiny.

<!--翻訳-->
フォントサイズが異常に大きかったり小さかったりする場合は、これをチェックしてください。
「Code Block Pro」のフォントが小さかった時にチェックを入れる「Clamp Font Sizes」設定画像

問題は一行表示の気持ち悪さとインデントがぐちゃぐちゃの大きく2点です。

試したこと

まだ解決策が分かっていなかった時にやったことなので、全く意味ない試行錯誤も含まれています。

WordPressバージョンをアップデート

僕はこれまで「WP Downgrade Specific Core Version」プラグインを導入してWordPressの自動更新をストップさせていました。過去に何かしら自動更新に苦い思い出があったんだと思います。もう内容は忘れましたけど。

WordPressプラグイン「WP Downgrade Specific Core Version」ページ画像

「そういや結構新しいバージョンでているだろうな。最新版にしたらなおるかも」と思い記事執筆時点で最新版だった6.7.1(2024年11月24日)にアップデートしました。

アップデート後はブラウザのキャッシュやCookieなどの影響で不具合が発生する可能性が高いので、Ctrl+Shift+Deleteでブラウザデータを全削除です。

結果、確かに記事編集画面(ブロックエディター)は結構変化がありましたが、インデント問題はなおりませんでした。

PHPのバージョンを7.4から8.1にアップデート

「そういえばWordPressってバージョンと使っているテーマだけじゃなくてPHPっていうやつのバージョンもあるな」と思い確認してみました。

WordPress管理画面→左側サイドバーの「ツール」→サイトヘルス→情報から確認できます。

WordPressのサイトヘルスページからPHPバージョンを確認する手順画像1

「サーバー」をクリックして展開します。色々書かれていて「PHPバージョン」項目に現在のバージョンが書かれています。僕が確認した時は7.4でした。

WordPressのサイトヘルスページからPHPバージョンを確認する手順画像2

WordPressを動作させるための情報が記載されている必須要件ページを確認してみると、PHPは7.4以上とあったのでぴったりいちおクリアはしているなぁと思いました。

まぁでももう8系がでていたのでどーせなら…でアップデートしました。

僕の場合、契約しているレンタルサーバー「ConoHa WING」の管理画面を開いて、上部の「WING」→左側サイドバーの「サイト管理」→サイト設定→応用設定→「PHP設定」をクリックします。

「ConoHa WING」でPHPバージョンを変更する手順画像1

右端の鉛筆アイコン(編集)をクリック→現在のバージョンをクリックしてドロップダウンリストを開きます。変えたいバージョンをクリックして「保存」をクリックします。

「ConoHa WING」でPHPバージョンを変更する手順画像2

変更時点では8.3が最新版でしたが、いきなり最新版にするのもなと思い8.1を選択しました。わんちゃん何かしらブログに悪影響でたらどうしよう…とドキドキしましたが、特に何もなかったです。逆に言えば解決もしませんでした。

使っていないテーマの削除

PHPのバージョンを確認する時に開いたこれまで全く見ていなかったサイトヘルスステータスを見たところ、「停止中のテーマを削除してください」と検出されていました。

WordPressのサイトヘルスページにある「停止中のテーマを削除してください」画像

使っていないテーマを見たところWordPressデフォルトでインストールされている「Twenty Twenty-Five」があったのでサクッと削除しました。管理画面左側の「外観」→テーマ→テーマの詳細→「削除」で消せます。

WordPressにデフォルトでインストールされている「Twenty Twenty-Five」を削除しようとしている画像

削除した後に再度サイトヘルスステータスを見たら今度は「デフォルトテーマを利用可能にしましょう」と表示されていました(笑)

振り返ってみると最初からデフォルトテーマと今使っているテーマは削除しないで~と書かれていました。よく説明見ずに削除するからこうなる…。

WordPressのサイトヘルスページにある「デフォルトテーマを利用可能にしましょう」画像

結局「Twenty Twenty-Five」を有効化はしないけど再インストールし、「Luxeritas Update」テーマを削除しました。これは「Luxeritas」をアップデートしている間、サイトをメンテナンス中と表示してくれる一時的なテーマでアップデートしない時は不要です。

消したらサイトヘルスステータスから項目が消えました。ただ案の定使っていないテーマを削除した程度で変化はないです。

ConoHaのWEXALをオンにする

多分今回の試行錯誤の中で「使っていないテーマを削除する」にぐ無関係設定だったと思います。まぁこういう機会がないと中々見直さないので良い勉強です。

僕が使っているレンタルサーバー「ConoHa WING」は2022年4月23日(土)から「WEXAL」という高速化オプションを開始しています。開始日から有効にしていましたが、どこかのタイミングで何を思ったのかオフにしていました。

この度やっぱりオンに戻しました。ConoHaのダッシュボード→サイト管理→高速化→WEXAL→「ON」にします。デフォルトから無効になっている「LazyLoad(画像)」などのオプションは弄らずオフのままです。

「ConoHa WING」の「WEXAL」をオンにする手順画像

「Visual Studio Code」のインデント設定

僕は直接「Code Block Pro」のブロックにCSSなどのコードをタイピングしているわけではなく、Windows11にインストールしている「Visual Studio Code」に書き込んで、自動整形後ブログにコピペしています。

「Visual Studio Code」のインデント画像

この流れからふと「わんちゃんブログのせいじゃなくて大元おおもとのVisual Studio Codeがおかしいとか?ソフト上では正常に見えるスペース(インデント)でもシステム上うまく表示できない方法を採用しちゃってるとか?」と思いました。

実際は全く関係なかったんですが、インデント関連で調べてみると挿入する余白をTabキーにするか実際のスペースにするかの設定があったので変更してみました。以下の記事を参考にさせていただきました。

設定ページを開いて検索ボックスに「insert spaces」と書き込んででてきた候補のチェックを外します。

「Visual Studio Code」の「insert spaces」設定を変更する手順画像

結果、字下げ部分がTabだろうがスペースだろうが、貼り付けて実際の記事を見たらみな等しくダメでした。

というかこの時からうっすら気づいていたんですが、実際出力される記事を開発者ツールの検証で調べてみると、そもそもスペースが存在していないかのような表示になっていました。

このことからコード→編集画面の過程は問題なくクリアしていて、問題なのが編集画面→実際の記事の工程なんじゃないかと思い始めました。

まぁ分かったところでそれってWordPressとかテーマの記事表示という根本のシステムっぽい気がして、僕にはどうしようもねぇのかな…と思っていました。

「Code Block Pro」の設定をあちこち変えてみる

「Code Block Pro」を挿入し、以下のような設定を変えてみました。

  • フォントを色々変えてみる
  • 言語を色々変えてみる
  • テーマを色々変えてみる
  • 書き込むコードを色々変えてみる(日本語などの特定文字が含まれていたらダメになるんじゃないか?という予想から)
  • 「Extra Settings」の「EDITOR TAB SIZE」を変えてみる
  • 「Font Styling」の「Clamp Font Sizes」チェックオンオフ

もしかしたら僕が使っている言語やテーマによってダメなパターンがあるのかなと思い、炙り出すために何十個とブロックをコピーして、一つずつAは言語をCSS、Bはテーマを…と設定を逐一変えてみました。

結果、僕が試した限り日本語が入っていようが英語だけだろうが、どんな言語やテーマにしていようが、問題が発生することが分かりました。

「Code Block Pro」開発者様に質問

時間にして約1日。もうこれ以上は僕の力だけじゃ無理だ…と諦めて、申し訳ない気持ちでいっぱいでしたが翻訳ツールを使って、開発者様のGitHubにて質問スレ(Discussions)を立てました。

「Code Block Pro」プラグインのGitHubに質問しているスクリーンショット

2024年12月9日に投稿し、10日の深夜に返信をいただきました。正直返信なし、あるいはきても数週間単位…を覚悟していたのでたった1日でしかも開発者様本人から返信貰えるなんて夢にも思っていませんでした。

くっそ余談ですが、夜遅くまで自分なりに試行錯誤していてPCの電源をきって歯磨きもしてもう寝る!って直前にちらっとスマホのメール通知で返信がきていたことを知りました。

「き、気になる!だ、だけど今これ見たら絶対寝れなくなる!ね、寝るぞ!明日の朝一番に見るぞ!」と思い寝ました。結局内容が気になりすぎて眠りがくっそ浅かったです。

Xiaomi Smart Band 9 Pro」をつけて寝ているので睡眠データが丸わかりです。貼っておきます。

2024年12月10~11日に計測した「Xiaomi Smart Band 9 Pro」の睡眠データ画像

普段8時間~10時間の同世代からしたらありえないくらい寝ている僕なので、6時間台はめちゃくちゃ珍しいです。それだけ気になって眠りに集中できませんでした。

結局返信内容から解決に至りました。本当にその道のプロってすごいなぁ…と尊敬しました。

WordPressプラグインをオンオフ

開発者様の返信内容は「HTMLの最適化(圧縮)が原因なんじゃね?プラグインオンオフしてみた」というものでした。

「うわ!プラグインのオンオフっていう初歩の初歩の初歩的作業やってないじゃん…」と自己嫌悪におちいりました。

質問する際にインストールしているプラグインを一覧で出力したので見てはいたんですが、見た限りそういった影響しそうなプラグインをインストールしていなかったのでオンオフ作業まではしていませんでした。

原因が分からないからこそ1%でも可能性があるなら作業すべきって分かっていたつもりだったんですが、やはり僕は永遠の初心者でした。

結局僕がインストールしていたプラグインは「Code Block Pro」以外全てオフにしても変わらなかったので関係なかったです。

しかし、解決策に書いたように「プラグインじゃなくてテーマ固有の設定でそういう圧縮・最適化的なのそういえばあったよな…?」と気づき見事解決に繋がりました。

感想

以上、「Luxeritasルクセリタス」テーマを使っている僕のWordPressに「Code Block Pro」プラグインを入れたら色々と問題があったけど開発者様の助言により解決した話でした。

今回の教訓はずばり「分かってないなら弄るな」ですね。HTML圧縮のリスクを考えずに圧縮するようにしていた僕が10000%悪いです。おま環の問題で英語も翻訳ツールを使って汚かったでしょうけど、ピンポイントで助言していただきちょー助かりました。

「Code Block Pro」を何の不満もなく利用できています。最高です。

2024年12月11日WordPress

Posted by ナポリタン寿司