WordPress5.3, フィールドガイド（英語）の翻訳&解説

WordPress5.3の公式フィールドガイド（アップデート内容をまとめたもの）を翻訳し、分かりやすい解説に再編集しました。ポイントだけをピックアップしてます。

さすがメジャーアップデート。それでもボリューム大です。

個人的にはREST-APIのパフォーマンス向上がありがたい。投稿編集の余計なストレスが減るから。

アクセシビリティ

アクセシビリティは『ちゃんと使える、見える』こと。ユーザビリティと似ていますが少しちがいます。

アクセシビリティは50の改善があります。

管理画面のCSS変更

WordPress5でGutenbergを採用してから、管理画面のスタイル修正の必要性を感じていたようです。

しかしここで問題がありました。Gutenbergの部分（投稿編集画面）とそれ以外のスタイルがちがったからです。

（たしかに。同じシステムに見えないほどだった。）

そこで、Gutenbergのスタイル修正と同時に管理画面全体のスタイルを見直しました。

それが今回の修正の目的です。

くわしくはこちらで。

メディアコンポーネントの改善

メディア（画像）の管理画面のHTMLフォームの<label>の使い方がおかしかったようです。

formのHTMLがメチャクチャだったんですね？

それを改善しました。

英語サイトで『特に』とあったのでそのまま書いてますが、大したことないです。気にすることはありません。

（へぇー、そうだったんだ。で十分。）

ここに、アクセシビリティのためのコーディング標準が示されていたので、これを参考にするといいでしょう。

ウィジェットにaria-current = "page"を追加

ウィジェットのナビゲーション（パンくずリストなど）で『現在のページ』のHTMLにaria-current = "page"を自動的に追加します。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

音声読み上げとかで使う属性ですね？

ぐらいです。

a[aria-current] {
    // ここにスタイルを書く。
}

ナビゲーション関数にパラメータ（aria-label）追加

ナビゲーション関連の関数にパラメータを追加しました。

the_post_navigation( array(
    'prev_text'          => __( 'previous: %title', 'text-domain' ),
    'next_text'          => __( 'next: %title', 'text-domain' ),
    'taxonomy'           => 'chapters',
    'aria_label'         => __( 'Chapters', 'text-domain' ),
) );

HTMLにaria-label属性を追加します。これも音声読み上げで使うものです。

たとえば、サイトのページ内に『続きを読む』のリンクやボタンがいくつもあったとき、『何の続きを読むの？』ってなりますよね？

aria-label属性はそれを、『〇〇の続きを読む』に置き換えます。これらの関数でオリジナルの文言を追加するためのパラメータです。

ブロックエディター

Gutenbergのバージョン6.5をバンドルしました。これで、Gutenbergの対象範囲のバージョンは5.4～6.5になります。

さらに、独自のバグ修正と、バージョン6.6, 6.7のパフォーマンス改善の一部を含みます。

編集画面を開いたときの読み込み速度が改善しました。

サーバー側のブロックスタイルAPI

Gutenbergのブロックスタイルの登録と解除をかんたんにしました。

これまでは、JavaScriptファイルに書いて、それをキューに登録していましたが、PHPでもできるようにしました。

PHPはヘルパーで、JavaScriptから置き換わったわけではありません。JavaScriptの方法でもできます。

テーマ関連のブロックエディタ

ブロックの変更でいちばん大事なところかもしれません。ここのアップデートでブロックの使い勝手が相当良くなっています。

ブロックのグループ化

ここに書いてあるのでここでは割愛。

ブロックスタイルの特異性の低減

編集画面（管理画面）のはなしです。管理画面のブロックは、HTML5から採用されたカスタムデータ属性が追加されています。(data-block)

編集画面で表示されているブロックは、どんな種類でも<div data-block="xxx"></div>で囲われています。

ブロックのマージンのスタイルをこのカスタムデータ属性に当てました。

[data-block] {
    margin-top: 0;
    margin-bottom: 0;
}

カスタムデータ属性（data-block）は、編集画面だけのことで公開ページにはつきません。

『その変更に何の意味が？』と思いたくなるほどのことです。気にしなくていいでしょう。

テキスト配置をクラス名に変更

以前までは、テキスト配置のCSSをHTMLのstyle属性に直書きでした。これをclass属性に変更しています。

（cssファイルでコントロール。）

過去のデータの修正はいりません。更新するときに自動で修正されます。

カラムブロックのクラス名削除

カラム（列）ブロックで固定幅が指定できるようになって、いらないCSSクラスを削除しました。（has-x-columns）

has-x-columnsでCSSをカスタマイズしていたものは修正が必要です。

区切りブロックの色サポート

区切りブロックの色が変えられるようになりました。

ボクの環境は区切りをカスタマイズしたのでできません。同じように標準の区切りを変更した人は確認しましょう。

（ボクはいらないので放置）

テーブルブロックのHTML変更

テーブルブロックのHTMLが変更されています。

<table class="wp-block-table">
  <!-- カラム・ローなどいろいろ -->
</table>

<figure class="wp-block-table"><table>
  <!-- カラム・ローなどいろいろ -->
</table></figure>

<table>を<figure>でラップしています。

これまで、水平スクロールするために、PHPプログラムでテーブルのラッパーを追加していた人もいたでしょう。

これをCSSでかんたんにできるようにしました。

自分で水平スクロールを作っている人は修正が必要です。また、.wp-block-tableでCSSをカスタマイズしているものも修正が必要です。

（クラスがtableからfigureに変更されたので。）

画像ブロックのHTML変更

画像ブロック（<img>）も<figure>でラップしました。<figcaption>で画像にキャプションが付けられるようになっています。

メディア

メディアに関して42のアップデートを行いました。

大きいサイズの画像を扱う

これまでWordPressは、スマホで撮影した写真など、大きいサイズの画像に対応していませんでした。

（スマホで撮影した写真は5Mbyteくらいある。）

5.3ではこれに対応しています。

具体的にどうしてる？

画像や写真をアップロードすると、設定されたしきい値（閾値）を超えるものは、CSSのmax-width、または max-heightで縮小します。

しきい値のフィルター（big_image_size_threshold）

大サイズの画像のしきい値は2560pxで変更できません。また、png画像は未対応です。

（ソースコードで確認済み。）

スマホやデジカメで撮影した写真を想定しているのでしょう。いま、4K, 8Kとか言われているので軽くしきい値は超えますが、Webサイトではこれが限界です。

サイトの表示速度に影響するので。

このフィルターを使って、今までどおり大きいサイズの画像を無効にすることもできます。

add_filter( 'big_image_size_threshold', '__return_false' );

オリジナル画像も保存されている

オリジナル画像も保存されていて、取得する関数も用意されています。

$image = wp_get_original_image_path( $attachment_id );

画像データの保存方法の変更

WordPressでは、画像をアップロードするとひとつのファイルに対して4つの画像を保存します。

そして、ぜんぶの画像を作成してから画像の情報（メタデータ）をデータベースに保存してました。メタデータはひとつです。

しかしこれでは、処理の途中でエラーが発生すると、データベースにメタデータが保存されていない画像が発生して、使うことのない画像が大量にたまることがあります。

そこでバージョン5.3では、それぞれのサイズのメタデータをデータベースに保存するようにしました。

メタデータと実際に保存されている画像ファイルの齟齬を無くしたんですね？

これで、画像アップロードに失敗しても、処理の途中で生成された画像ファイルからアップロードをリカバリできます。

イメージエディタクラスのメソッド追加

オリジナル画像から中間サイズ画像（小・中・大）を作成するメソッドが、イメージエディタクラスに追加されました。

WP_Image_Editor_GD::make_subsize( $size_data );

WP_Image_Editor_Imagick::make_subsize( $size_data );

WP_Image_Editor_GD, WP_Image_Editor_ImagickはどちらもWP_Image_Editorクラスの子クラスで、WordPressの画像処理を担当するクラスです。

これをカスタマイズで使うことはまずないでしょう。

（相当なレベルが必要です。）

画像処理のリカバリ処理のやり方

画像処理のリカバリには、イメージエディタクラスを使わずに、追加されたカスタマイズ用の関数を使います。

wp_get_missing_image_subsizes( $attachment_id );

wp_update_image_subsizes( $attachment_id );

wp_create_image_subsizes( $file, $attachment_id );

これで、画像アップロード中のHTTPエラーのリカバリができます。ただ、リカバリ機能をもったプラグインが出てくると思うので、自分で作ることもないでしょう。

（作りたい人は自分で開発するのもありです。）

マルチサイト

15の更新を行いました。データベースの変更が含まれます。マルチサイトのデータベースを参照するようなカスタムをしている場合は注意が必要でしょう。

データベース・テーブルの変更

blogmetaテーブルが追加されました。各サイトのデータベースのバージョンと更新日時を保存します。

function get_site_versions() {
    global $wpdb;
    $query = $wpdb->prepare( "SELECT blog_id, meta_value FROM $wpdb->blogmeta WHERE meta_key = 'db_version' ORDER BY blog_id DESC");
    return $wpdb->get_results( $query );
}

where句にblog_idを指定すると、特定のサイトのdbバージョンも取得できます。

これまでblog_versionsテーブルが使われてましたが、コア機能から削除されました。

blog_versionsテーブルを参照しているものはblogmetaテーブルの参照に変更しましょう。

WP_MS_Sites_List_Tableクラスの変更

マルチサイトのサイトネットワーク管理メニューの『サイト』の一覧がらみのクラス・WP_MS_Sites_List_Tableの機能を強化しました。

記事の投稿一覧と同じようなことができます。

サンプルコードはWordPressのコア機能を参照してください。

PHP7.4とコードの近代化

PHPのバージョン7.4に対応しました。それにともなってコードの修正を行っています。

また、PHPの最小バージョンが5.2.6 -> 5.6.20に上がりました。

これだけのPHPバージョンを外したので、コードを5.6以上に適応させる修正も行っています。（コードの近代化）

内容はこちらにまとめました。

REST API

33の更新を行い、REST APIのパフォーマンスが30～40%向上しました。

今のWordPressの投稿編集はREST-APIを多用して、通信トラフィックが大きいです。これで編集の余計なストレスが減るのがありがたい。

配列とオブジェクトのメタ登録

メタ登録の関数で、show_in_restに配列を指定して、メタデータにJSONの配列とオブジェクトが登録できるようになりました。

REST APIのフィルタリングのネスト

WordPress4.9.8は、REST APIのリクエストで_fieldsクエリを指定して、応答データを特定の項目に制限できるようにしました。

WordPress5.3では、フィルタリングの条件をネストで指定できるようにしています。

{
  id:"xxx",
  title:"yyy",
  meta: {
    meta_1:"aaa",
    meta_2:"bbb",
  }
}

下書きを「フローティング日付」ステータスに戻す

いまいちよく分からないので、英語の本文と訳を載せておきます。

Once a date has been set for a draft, it was previously impossible to set the post back to showing “publish immediately” (also referred to as a “floating date,” where the post will be dated whenever it is published). As of 5.3, passing null for a date value will unset the draft date and restore this floating state.

本文

下書きの日付が設定されると、以前は投稿に「すぐに公開」を表示するように戻せませんでした（「フローティング日」とも呼ばれ、公開されるたびに日付が付けられます）。 5.3以降、日付にnullを渡すとドラフト日付が設定解除されフローティング状態を復元します。

和訳

その他

スキーマオブジェクト生成をキャッシュ化しました。大きなREST APIクエリでは、パフォーマンスが30～40%向上しています。

そのほか、細かい修正が行われています。ここでは割愛します。

（公式ガイドの『Additional Changes of Note』を参照。）

サイトヘルス

31の更新が行われました。ぱっと見は分からない細かい修正から、管理画面に新画面追加など見ても分かるものまであります。

また、新たにカスタマイズできるようなアクション・フィルターのフックも用意されました。

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

その他の開発者向けアップデート

もうすでに1万字を超えてしまいました。こんな長い文章モチベーションがもちません。

それでもまだまだアップデートがあります。別出ししたのでそれぞれのリンクを見てください。

そのほか、文章にするまでもないものがあります。リンクだけ貼っときます。