ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5.3, メジャーアップデートの注意点と対応

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

2019年11月12日、WordPress バージョン5のメジャーアップデートが出ました。(5.3, Kirk)

半年ぶりのメジャーアップデートです。その内容と注意点を分かりやすく解説します。

いろいろあるんですが、特大画像に対応したのとPHPバージョンとの互換性の変更があります。

もう半年以上もすぎてしまいました。いまさらですが、WordPress5.3のアップデート内容です。

しばらく別のことばっかりして、WordPressのアップデート情報を追っかけてませんでした。

5.3をすっ飛ばして5.4のことを書こうとも思いましたが、欠番が気持ち悪いので頑張って書きます。

(モチベーションは低いが...)

ざっくりとした変更点

メジャーアップデートなので、新機能の追加が多いです。ブロックエディターの機能追加・改善だけで150を超えると言っていますが、操作感ではそこまで感じません。

細かいことは置いといて、おおまかな変更点から。

ブロックエディターの改善

デザイン柔軟性の拡張

新しい標準テーマ

その他

開発者向け

ひとつずつ見ていきましょう。

(あまりに細かいものは省略します。)

今回の内容はWordPress.orgのリリースガイドの翻訳・解説です。

ブロックエディタの改善

新たな機能と改善で150を超える強化が行なわれました。

『何が大きく変わったの?』と思いがちですが、そのほとんどがユーザビリティでしょう。つまり、使い勝手の良さを改善したんですね?

そして、多くのアクセシビリティも改善しました。直感的に使いやすくしたということです。

ユーザビリティとアクセシビリティは似てますが

アクセシビリティちゃんと使えること。見えること。
ユーザーが欲しい機能が備わっていること。
ユーザビリティアクセシビリティがあったうえで、さらに使いやすいこと。見やすいこと。
アクセシビリティ(accessibility)

アクセスのしやすさ。目的を確実に達成できるか?

情報を発信するなら、その情報が確実に伝わるか? の尺度。

可用性(かようせい)という。

アクセシビリティ意味
高い目的の機能が提供されている。
低い目的を達成する機能を提供できてない。

同じような言葉にユーザビリティがある。

ユーザビリティ(usability)

使いやすさ。だれでも同じように使えることを目指す尺度。

高齢や低年齢者、障害をもった人たちに対しても、同じようにできることを指すことが多い。

使用性(しようせい)という。

直感的に使えるかどうか。教えないと使えないものはユーザビリティが低い。

ユーザビリティ意味
高いだれでも使える。
学習は不要。
低い特定の人しか使えない。
学習が必要。

アクセシビリティとユーザビリティの違い

アクセシビリティとユーザビリティはカブってる部分が多い。

ユーザビリティは、そもそも使えることが前提なのでアクセシビリティが含まれる。

アクセシビリティ: 低い
ユーザビリティ: 高い
ありえない。
ユーザビリティはアクセシビリティがあることが前提。
アクセシビリティ: 高
ユーザビリティ: 低
ありえる。
使いづらい。学習しないと使えない。
アクセシビリティ: 低
ユーザビリティ: 低
ありえる。

アクセシビリティが低いとそれに引っ張られてユーザビリティも下がる。

逆にユーザビリティが上がると、やりたいことができるのでアクセシビリティも上がる。

たとえば、使いやすさを向上する(ユーザビリティ)ために新たな機能を追加(アクセシビリティを上げる)といった使い方をする。

という少しのちがいがあります。

WordPress5になってから、Gutenbergになってからの管理画面の編集画面の変わり方は尋常じゃありません。

書いても書いても追いつかないほどです。

便利なブロックが増えていたり、オプションに便利な設定ができていたり。

また、使っているプラグインがGutenbergに対応していることもあります。ブロックでかんたんに追加・設定できたりして。

バージョン5以降を使っている人は、ブロックリストをさらっと見てみたり、使ってないオプションを見るように心がけることをおすすめします。

新しい発見がありますよ?

特大サイズ画像のサポート

これまでのWordPressでは、サイトのパフォーマンスに影響するので、スマホやデジカメの最高画質の画像を、最適化なしにアップロードすることができないことがありました。

(最適化は圧縮してファイルサイズを小さくすること。もちろん、画質は元より悪くなる。)

その制限を上げて特大画像サイズに対応しました。

管理画面のデザイン変更・統一

管理画面全体が見やすいようになっています。とくに、ボタンやテキストボックスなど、目にやさしい色味になり、テキストボックスの入力も視覚的な負担が小さくなりました。

また、編集画面のほかの画面との統一が始まりました。

WordPress5でGutenbergを採用したことで、編集画面になると急に管理画面がちがうものに見えていたのが気になっていたようです。

くわしくはこちらにまとめました。

ブロックナビゲーション

これまで、投稿編集画面・メニューの『コンテンツ構造』からタイトルやヘッダにジャンプできました。

ブロックナビゲーションはこれのブロック版です。コンテンツのブロックでジャンプできます。

ブロックの名称がズラーッと並ぶので、どこにジャンプしていいのか分からないです。

ブロックの概要くらいは出してほしいな。これからの改善に期待します。

デザイン柔軟性の拡張

コンテンツのカスタマイズ機能を進化させました。

  • 新しいグループブロックで、ページをカラフルなセクションに簡単に分類できます
  • カラムブロックで固定カラム幅がサポートされます
  • 新しい定義済みレイアウトでコンテンツを先進的デザインに手軽にアレンジ
  • 見出しブロックは、テキストの色指定ができるように
  • スタイルオプション追加機能をサポートするブロックにお好みのスタイルを指定できます

ブロックのグループ化

Gutenbergの複数のブロックをグループ化できるようになりました。

複数のブロックを<div>で囲んでグループ化します。グループ全体の背景色をつけたり、cssクラスを追加できます。

HTMLアンカー(HTMLタグのid属性)も追加できます。

カラムの固定幅

カラム(列)ブロック、知りませんでした。CSSのフレックスボックス(flex)ですね?

(flex用のGutenbergのブロックを自分で作っちゃってたよ。)

これを使いこなすだけで、けっこうなサイトデザインができるんじゃないでしょうか?

CSSでflexを覚えるのは慣れないときついですからね。

サンプル - 広告貼り付けなど

テストカラム1

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

テストカラム2

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

サンプル - ブログカード

サンプル - 商品紹介

book image

商品説明 商品説明 商品説明

ただし、細かい詰めが甘いです。その部分はCSSのカスタマイズで補いましょう。

カラム全体、各カラム、それぞれにCSSスタイルが設定できるので、flexの設定は網羅できます。

固定幅は%指定です。

たとえば、画像サイズはピクセル指定で、テキストは可変にしたいなど、ちょっと高度なことをしたければ、ブロックの『高度な設定 -> 追加CSSクラス』でCSSスタイルを指定します。

見出しブロックのテキストカラー指定

WordPress5になってからの不満点の改善です。Gutenbergになってから見出しのテキストカラーの指定ができなくなっていました。

ただこれは、TinyMCE Advancedプラグインがあれば対応できていたので、とくに気になりません。

その他

  • 新しい定義済みレイアウトでコンテンツを先進的デザインに手軽にアレンジ
  • スタイルオプション追加機能をサポートするブロックにお好みのスタイルを指定できます

細かい修正で、ブロックのカスタマイズがしやすくなったのでしょう。

すべての標準ブロックの設定を確認したわけではないので、右メニューにいろいろな設定が追加されたのかもしれません。

ここで注目すべきは、あらかじめスタイルを用意して選択できるブロック・スタイル機能をPHPで実装できるようになったところくらいかな。

新しい標準テーマ

標準テーマが新しくなりました。(Twenty Twenty)

最近注目されているバリアブルフォントを採用しています。

標準テーマから子テーマを作っている人は試す価値あり。それ以外は特にないです。

その他

そのほか触っていて気づいたところです。

画像にキャプションが付けられる。

前からメディアの管理画面ではキャプションがありましたが、編集画面のブロックで独自のキャプションが付けられるようになりました。

画像のキャプション

挿入している画像だけにつけるキャプションなのでメディア自身のキャプションは変更しません。

画像を丸くできる

画像のキャプション

オプションのブロックスタイルで『丸形マスク』を選ぶと画像を丸くすることができます。

CSSで変更しているので元画像はそのまま。

追加CSSクラスにis-style-circle-maskを追加してもできます。

アップデートにssh2追加。

WordPress本体やプラグインなどのアップデートでssh2接続が追加されました。セキュリティの向上ですね?

ただし、サーバーのsshコネクション設定が必要なので、運用管理者におまかせしましょう。

みんなのための改善

画像の自動回転

正直、意味がよく分かりません。和訳を書いておきます。

Your images will be correctly rotated upon upload according to the embedded orientation data. This feature was first proposed nine years ago and made possible through the perserverance of many dedicated contributors.

本文

アップロード時に埋め込まれた方向データに従って画像が正しく回転します。この機能は9年前に初めて提案され、多くの献身的な貢献者の永続的な努力によって実現しました。

和訳

『正しく回転』のところが分かりません。画像の方向がおかしいと思ったことがないので。

サイトヘルスチェック

問題点の確認、WordPressの状態が見やすくなりました。

『何が?』と言われると眠たい話がダラダラと続くので『百聞は一見にしかず』です。

『メニュー』『ツール』『サイトヘルス』で見てみましょう。

管理者のEメールの検証

管理者として管理画面にログインすると、Eメールアドレスが最新のものであるか(正しいか)、定期的に確認するように求められるようになりました。

メールアドレスを変更した後、それを忘れてしまって不都合が起きていた人がいたのでしょう。

(ボクはそんなことないので、あーそうですか?ぐらいにしか思わない。)

開発者向け

ここからは開発者向けの話です。プラグインを入れて、テーマをちょこちょこイジる程度の人には関係ありません。

日付/時刻コンポーネントの修正

WordPressの日付・時刻まわりの関数などが大きく変更されました。

くわしくはこちらをどうぞ。

PHP 7.4 との互換性

WordPress5.3からPHP7.4に対応しました。と同時に、サポートするPHPの最小バージョンも変わりました。

個人的には今回のバージョンアップでいちばん大事なところだと思います。

くわしくはこちらをどうぞ。


さすがメジャーアップデート。まだまだたくさんの開発者向け注意点があります。

ボクの心のガソリンが切れてしまったので今回はここで終わりますが、フィールドガイドの和訳&解説を書いているので、くわしくはそちらをどうぞ。


メジャーアップデートは変更点が多いので注意が必要です。しかも今回はサポートするPHPのバージョンが変わりました。

きちんとテスト環境で確認してからアップデートしましょう。

前の投稿
WordPress5.2.Xのマイナーアップデートがどんどん来るのに備える。(今度こそ?)
WordPress5.3, フィールドガイド(英語)の翻訳&解説
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*