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

WordPress5.3 フィールドガイドの翻訳&解説

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

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

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

アクセシビリティ

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

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

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

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

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

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

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

ユーザビリティ(usability)

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

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

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

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

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

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

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

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

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

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

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

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

アクセシビリティは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>

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

ウェブコンテンツ・アクセシビリティ・ガイドライン 2.0に合わせる。

共通のスタイルが当てられる。

ぐらいです。

a[aria-current] {
    // ここにスタイルを書く。
}
最近の投稿
ナビゲーション・メニュー
固定ページ
カテゴリ
アーカイブ
属性を追加するウィジェット

Core Widgets: new aria-current attribute in WordPress 5.3

ウェブコンテンツ・アクセシビリティ・ガイドライン 2.0

2.4.4: Link Purpose (Level A)

2.4.8 Location (Level AAA)

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

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

_navigation_markup()
※ wpコアが使うためのもので非公開関数。
get_the_post_navigation()
get_the_posts_navigation()
get_the_posts_pagination()
get_the_comments_navigation()
get_the_comments_pagination()
the_post_navigation()
the_posts_navigation()
the_posts_pagination()
the_comments_navigation()
the_comments_pagination()
function
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属性
CSS
[data-block] {
    margin-top: 0;
    margin-bottom: 0;
}

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

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

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

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

(cssファイルでコントロール。)

Heading(見出し)
Paragraph(段落)
Quote(引用)
Verse(詩)
対象ブロック
has-text-align-right右揃え
has-text-align-center中央揃え
has-text-align-left左揃え
class属性

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

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

カラム(列)ブロックで固定幅が指定できるようになって、いらない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>で画像にキャプションが付けられるようになっています。

テーブルブロックではキャプションが付けられません。ついでにテーブルにも付けられればいいのに。

ちなみに5.3になっても、<table>の<caption>はテーブルブロックではつけられません。カスタムHTMLブロックに変換すればできますが。

メディア

メディアに関して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 );
attachment_id画像ID

WordPress.orgリファレンス

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

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

小サイズ
(サムネイル)
中サイズ
大サイズ
オリジナル画像

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

管理画面(メディア)から画像アップロード

中間サイズ(小・中・大)の作成

データベースにメタデータ保存

アップロード処理完了

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

アップロードで失敗したメッセージ(HTTPエラー)が表示されて、何度もチャレンジした人もいるでしょう。

じつはこの作業は、使うことのない画像ファイルをサーバー上に溜めている可能性があります。

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

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

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

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

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

WP_Image_Editor_GD::make_subsize( $size_data );
WP_Image_Editor_Imagick::make_subsize( $size_data );
size_dataarray.
[
'width' => val,
'height => val,
]

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

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

(相当なレベルが必要です。)

GD, Imagickは、PHPプログラムの画像処理のための拡張モジュール。

PHP公式ドキュメント

GD

Imagick

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

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

失敗している中間サイズ画像取得
wp_get_missing_image_subsizes( $attachment_id );
中間サイズ画像の作り直し
wp_update_image_subsizes( $attachment_id );
中間サイズ画像の作成
wp_create_image_subsizes( $file, $attachment_id );
attachment_id画像ID
file画像ファイルのフルパス

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

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

マルチサイト

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

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

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

dbバージョンの取得
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.5
5.4
5.3
5.2

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

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

プラグインやテーマ開発者はここをきちんと読んで、新しいコードへの変更点に注意してくださいと公式ガイドに書いています。

REST API

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

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

メタ登録の関数で、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",
  }
}
4.9.8id, title, metaのフィルタリング可。
meta.meta_1, meta.meta_2は不可
5.3id, title, metaのフィルタリング可。
meta.meta_1, meta.meta_2の指定可

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

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

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万字を超えてしまいました。こんな長い文章モチベーションがもちません。

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

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

検索エンジンにインデックスされないための方策変更
標準テーマTwenty Nineteenの構成変更
ログインページにパスワード表示ボタン追加
前のページ
WordPress5.3 メジャーアップデートの注意点と対応

WordPressの本

post-cta-image

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

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

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

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


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください