遂に、Wordpressのメジャーバージョンアップである5.00がリリースされました。
WordPressのメジャーバージョンアップ（4.x⇒5.x）なのでしばらく様子見してから移行するのが鉄則です。しかし、悲しいことに利用しているWebサーバー（siteground）は、自動的にWordpressのアップデートが行われる仕様です。
ある日管理画面にログインしたらWordpressが5.01になっていて、お！ついに来たなと思いました。
WordPress 5.0の大きな違いは？
WordPress 5.0の大きな違いはブロックエディタの導入です。
Classic Editorとして従来のエディタは残りますが、ブロックエディタ導入のインパクトは、使用しているWordpressテーマに少なからずあるはずなので、Wordpressテーマの更新も必要になってきます。
WordPress 5.0にアップデートして起きたこと
Luxeritasをアップデート
WordPress本体のバージョンアップに合わせて、このサイトで使用しているWordpressテーマ(Luxeritas)もバージョンアップされました。追従した方が良かろうということで、果敢にもLuxeritas 3.5.6へバージョンアップしました。
テーマアップデートでヘッダーの見た目が崩れた
自分の場合は、テーマのバージョンアップをしたら、ヘッダーの見た目が変わってしまいました。バージョンアップ前は、TopページでCSSを調整すると他のページでも同じ結果になったのですが、Topページとカテゴリページでヘッダの崩れ方が違う状態になりました。
- Topページ
- Topページ以外（カテゴリーページ、投稿ページ）
結構大きく崩れたのでビビりましたが、CSSを調整してバージョンアップ前と見た目を同じに直しました。
他の方のサイトを見てもヘッダーのデザインが崩れていないので自分だけの現象なのかもしれません。
見た目が崩れた原因
TopページだとサイトタイトルがH1タグになっていて、Topページ意外だと、サイトタイトルがpタグになっています。H1タグとpタグのフォントサイズ指定が違うので、Topページとそれ以外のページで見た目が変わってしまうようでした。
自分の場合はミドルメニューを追加するカスタマイズを行うためheader.phpを子テーマにコピーして使っていました。今回header.phpが更新されているのに子テーマで使用しているheader.phpが古いままであったことで不整合が起きた様でした。具体的には従来.sitenameだったセレクタが#sitenameに置き換えられているため、CSSカスタマイズが有効になりません。
対策１（子テーマのheader.phpを更新しない場合）
サイトタイトルのpタグの文字サイズと余白をCSSで明示的にTopページと同じに指定してあげれば、Topページとそれ以外のページのヘッダーは同じ見た目になります。
p.sitename{
font-size: 36px;
margin: 0 0 0px;
}対策２（子テーマのheader.phpを更新する場合）
最新のheader.phpを子テーマにコピーしてカスタマイズした後で、子テーマの追加CSSに.sitenameがあれば #sitenameに変更します。
デザインが崩れるようであれば調整します。
引用のデザインが崩れた
blockquateタグに当てていたデザインが崩れました。Fontawesomeでダブルクォーテーションを引用の先頭に浮かせてはみ出すように表示していたのですが、はみ出した部分が表示されなくなりました。
引用のデザインは以下の記事を参考に設定していました。
Luxeritas 3.5.5バージョンからそのままコピペしても表示が崩れると思います。
デザイン変更
- blockquote タグのデザインを bootstrap のデフォルトデザインからガッツリ変えてみた。
見た目が崩れた原因
どうも、テーマのblockquoteのCSSに変更があったようで、overflow属性がhiddenになっているせいで、はみ出した部分が表示され無いようでした。
blockquote:afterについてもopacityが0.04になっていたので、疑似要素がほとんど見えなくなっていました。
対策
以下のようにhiddenからvisibleに変更したらはみ出した部分が表示されるようになりました。
また、afterについてもopacityが0.04から0.4に変更しました。
blockquote {
overflow:visible;
}
blockquote:after{
opacity: .4;
}WordPress 5.0に対応していないプラグインが勝手に無効になった
WordPressが5.0にアップデートされたあと、管理画面の見た目がなんか寂しい感じがしました。よくよく見ると、プラグインのほとんどが無効化されていました。
この現象は、使用しているテーマとは関係なくWordpressの仕様だと思われます。
おそらく、多くのプラグインはWordpress5.0でテストされていないという理由からひとまず無効化され、後は自己責任で有効化しなさいということだと思います。
無効化されているプラグインを有効化しても特に問題が起きなかったので、自分の場合はそのまま有効化しました。
まとめ
無料のテーマを利用して自分でカスタマイズをしている場合、Wordpressやテーマのバージョンアップで今までのカスタマイズが無効になったり、デザインが崩れることが多いのではないかと思います。
今回、Wordpressのメジャーバージョンアップに巻き込まれて仕方なく、諸々更新しましたが、操作感や使用感は現時点では従来のものの方が良い気がします。本来であれば、Wordpress5.0が5.1になるぐらいまで様子見するのが正しいと思います。
