WordPressのメジャーアップデートでは、何かしらの不具合が出たり、表示やレイアウトが崩れることはありますが、WordPress6.9にアップデートしたら古い自作クラシックテーマがけっこう派手に崩れたので、備忘録としてメモをします。
WordPressの表示が崩れた理由
front-page.phpなどのタグ打ちで作成しているページは表示崩れは発生しなかったのですが、CSSでレイアウトを組んで、その中でWordPressのカラムブロックを使用していると、システム本体とのCSSが競合して、表示が崩れてしまいました。
他には、画像ブロックの左寄せ、中央寄せ、右寄せが効かずに、全て左寄せになっていたりなど。
テーマごとに不具合が違うと思うので、あくまで今回の場合はこれで対応したという例で、参考程度にご覧ください。
カラムブロックが縦に落ちた時の対処。
- /* 1. カラムブロックの修正 (横並びを強制) */
- .wp-block-columns {
- display: flex !important;
- flex-wrap: wrap !important;
- }
- .wp-block-column {
- box-sizing: border-box !important;
- }
画像ブロックが左寄せ、中央寄せ、右寄せを押しても効かなかったのを強制。
- /* 2. 画像ブロックの配置と回り込みの強制 */
- .aligncenter {
- float: none !important;
- margin: 0 auto !important;
- text-align: center !important;
- display: block !important;
- }
- .alignleft {
- float: left !important;
- margin: 0 1.5rem 1.5rem 0 !important;
- display: block !important;
- }
- .alignright {
- float: right !important;
- margin: 0 0 1.5rem 1.5rem !important;
- display: block !important;
- }
上記の画像寄せを指定した時に、下の見出しや段落、リストのコンテンツが回り込むのを解除。
- /* 3. 回り込み解除の強制 (Clearfix) */
- /* 以下の「.midashi」を自分のテーマの投稿記事を囲むクラス名に変更する。 */
- .midashi h1, .midashi h2, .midashi h3,
- .midashi h4, .midashi h5, .midashi h6,
- .midashi p, .midashi ul, .midashi ol,
- .midashi blockquote {
- display: block !important;
- clear: both !important;
- }
カラムブロックは、flexboxで制作しているテーマは比較的修正がすぐできたのですが、古いfloatで組んでいるテーマは煩雑でした。
長期的に考えると、将来的には全てブロックテーマに移行するのが良いと思うのですが、リニューアルは大掛かりになることが多いので、ひとまず修正して対応することにしました。
