WordPress 5.5 をチェックしています

WordPress 5.5 をチェックしています

WordPress5.5 Beta1 が 公開されました。 WordPress5.5は 2020年8月11日に リリースされる予定なので いろいろチェックをしています。
その中で WordPress5.5で気がついたところを取り上げていきます。
これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。

リリースまでのスケジュールは WordPress 5.5 Development Cycle に載っています。

WordPress 5.5 Beta 1 https://wordpress.org/news/2020/07/wordpress-5-5-beta-1/
WordPress 5.5 Beta 2 https://wordpress.org/news/2020/07/wordpress-5-5-beta-2/
WordPress 5.5 Beta 3 https://wordpress.org/news/2020/07/wordpress-5-5-beta-3/
WordPress 5.5 Beta 4 https://wordpress.org/news/2020/07/wordpress-5-5-beta-4/

 

Gutenbergブロックエディタ

WordPress5.4では「Gutenbergプラグインver7.5」でしたが WordPress5.5では「Gutenbergプラグイン(ver8.5)」が組み込まれました。
ブロックツールバーのデザインやアイコン等 ブロックエディタのUIも変更され 機能が追加されました。

Gutenbergの過去のバージョンの記事を見る事で 何が変更して追加されたか を見る事ができます。
What’s new in Gutenberg (26 February) v7.6
What’s new in Gutenberg (11 March) v7.7
What’s new in Gutenberg (25 March) v7.8
What’s new in Gutenberg (15 April) v7.9
What’s new in Gutenberg (29 April) v8.0
What’s new in Gutenberg (13 May) v8.1
What’s new in Gutenberg (27 May) v8.2
What’s new in Gutenberg (11 June) v8.3
What’s new in Gutenberg (24 June) v8.4
What’s new in Gutenberg (8 july) v8.5

以下、個人的に気になったところを紹介します。

 

ブロックカテゴリの変更

デフォルトのブロックカテゴリが変更されました。
従来は「一般ブロック」「フォーマット」「レイアウト要素」「ウィジェット」「埋め込み」でしたが「テキスト」「メディア」「デザイン」「ウィジェット」「埋め込み」へ変更されました。

WordPress5.5 ブロックカテゴリ

【参考】Blocks: Update default block categories
https://github.com/WordPress/gutenberg/pull/19279

また、ブロックアイコンも一部変更されています。
特に「見出し」「詩」「カバー」「動画」「グループ」「アーカイブ」「カレンダー」「カテゴリ」「最新のコメント」「タグクラウド」が変わってるので、従来のアイコンで慣れてる人は戸惑うかもしれませんね。
WordPress5.5 ブロックアイコン

【参考】Consolidating WordPress Icons
https://github.com/WordPress/gutenberg/issues/20284

 

ブロックパターン

ブロックパターンとは、ブロックのグループ、または事前定義されたコンテンツとスタイルを持つブロックセットです。

ブロックエディタに慣れてくるとブロックを1つだけ使用するのではなく いくつものブロックを組み合わせて使用するようになってきますよね。
そこで 慣れてない人でも簡単にブロックを組み合わせたデザイン・レイアウトを1クリックで利用できる「ブロックパターン」が用意されるようになりました。

WordPress5.5 ブロックパターン

【参考】WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない

WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない

【参考】Support searching for patterns
https://github.com/WordPress/gutenberg/pull/21944

 

再利用ブロックタブ

再利用ブロックを置いている場所が変わりました。
今まではブロック選択する所の一番下にありましたが、再利用ブロックタブから探せるようになりました。

WordPress5.5 再利用ブロックタブ
※再利用ブロックが無いと再利用ブロックタブはでてきません。

また、「すべての再利用ブロックを管理」リンクも再利用ブロックタブに付きましたのでメンテナンス画面へも簡単に行けるようになりました。

 

プレビュー

「プレビュー」では 公開ページ確認用以外で 作業用の画面サイズを選択できるようになりました。

デスクトップ(デフォルト)
WordPress5.5 プレビュー デスクトップ

タブレット(780px)
WordPress5.5 プレビュー タブレット

モバイル(360px)
WordPress5.5 プレビュー モバイル

 

画像編集

画像ブロックで設置した画像をダイレクトに アスペクト比、ズームレベル、回転、および位置を調整することができるようになりました。

まず切り抜きアイコンをクリックすると画像編集モードになります。
WordPress5.5 画像編集

画像編集モードでは画像拡大やアスペクト比での切り抜き、画像回転や中心位置を変更できます
WordPress5.5 画像編集モード メニュー

画像拡大はズームレベルをスライドバー設定できます。
WordPress5.5 画像編集 アスペクト比

アスペクト比アイコンをクリックすると選択したアスペクト比で切り抜きできるようになります。
WordPress5.5 画像編集 アスペクト比

アスペクト比を選択すると こんな感じで切り抜きますよ というプレビューになります。
WordPress5.5 画像編集 アスペクト比プレビュー

画像回転はこちら、クリックするたびに90度回転します。
WordPress5.5 画像編集 画像回転

最後に「適応」を押すと、反映されます。
※ここで変更した画像は新たに作られて保存されますので元画像は変わりません。

 

ブロック:コピーアクションの追加

ブロックのHTMLソースをコピーできるようになりました。
WordPress5.5 コピーアクション

さてコピーHTMLソースはどこに使えるのかな?

【参考】Block: add copy action
https://github.com/WordPress/gutenberg/pull/22214

 

インラインフォーマット

テキストを下付きや上付きにする新しい書式設定オプションが追加されています。
WordPress5.5 下付きと上付き

【参考】Format Library: add subscript and superscript
https://github.com/WordPress/gutenberg/pull/21819

 

カバーブロック

カバーブロックではテキスト部分の垂直方向と水平方向の配置を調整する機能が提供されました。
WordPress5.5 カバーブロックの配置を調整

【参考】Cover: Customizing Alignment of inner content
https://github.com/WordPress/gutenberg/pull/21091

 

マルチブロックコントロール

同じタイプの複数のブロックを選択すると、それらの属性を一度に変更できるようになりました。
WordPress5.5 マルチブロックコントロール

WordPress5.5 マルチブロックコントロール
例えば文字色を変更したくなった場合は1つ1つブロックを選択して変更しなければいけませんでしたが、変えたい複数のブロックを選択して一括して変更できるようになりました。

 
 

ブロックディレクトリ

ブロック選択画面上で 新しいブロックを検索して その場でインストール すぐ利用できるようになりました。

キーワードを入力、いくつかブロック候補がでますので いいのが見つかれば インストール→利用 と簡単に操作できます。
WordPress5.5 ブロックディレクトリ
  ↓
WordPress5.5 ブロックディレクトリ

※現時点では一度インストールすると該当のキーワードでは検索できなくなったり、入れたブロックがアンインストールできなかったりしてますので 気をつけてください。

【参考】Plugins categorized as block | WordPress.org
https://wordpress.org/plugins/browse/block/

 

スポンサードリンク



 

プラグインとテーマの自動更新

WordPressのコア部分では、アップデート(マイナーバージョン)があった場合は自動更新していますが、プラグインとテーマは対象外でした。
WordPress5.5から プラグインとテーマも自動更新できるようになりました。
全てのプラグインとテーマが自動更新になるのではなくそれぞれ個別に 自動更新する/しない を選択できます。
※デフォルトは「自動更新しない」になってますので、WordPress5.5にしたとたん プラグインとテーマも自動更新されて「ぎゃぁぁ」とはならないと思います。
WordPress5.5 プラグインの自動更新

WordPress5.5 テーマの自動更新

【参考】Feature Plugin: WP Auto-updates
https://make.wordpress.org/core/2020/02/26/feature-plugin-wp-auto-updates/

【参考】Controlling Plugin and Theme auto-updates UI in WordPress 5.5
https://make.wordpress.org/core/2020/07/15/controlling-plugin-and-theme-auto-updates-ui-in-wordpress-5-5/

 
 

Lazy Loading

Lazy Loading とは 画面をスクロールする等で 見えてない画像が必要になるまで、画像読み込みを遅延する技術です。「loading=”lazy”」は最近 ウェブ標準 となり、ブラウザでは ChoromeとEdge、Firefox等がサポートされています。

WordPress5.5からimgタグとiframeタグに「loading=”lazy”」タグ が自動で追加されます。
この「loading」とはブラウザ側で遅延ロードをサポートするもので、img要素やiframe要素に対応しています。

【参考】Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=loading-lazy-attr

WordPressでは 投稿、抜粋、コメント、テキストウィジェット等 WordPressコア内を通るものに「loading=”lazy”」タグ が追加されます。
※昔の記事でもimgやiframeタグに自動でつけてくれますので再編集しなくてもいいです。
※テーマ等でテンプレート直にimgタグを入れてる場合は追加されませんので表示場所によっては対応しないといけないかもです。

もう既にプラグインやJavascript等で設置している場合は、どうするか確認する必要がありますね。
「loading=”lazy”」が不要な場合は以下のフィルターを使ってください。

/*
 * Remove wp_lazy_loading.
 * @since 5.5.0
 */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

【参考】Lazy-Loading Images in WordPress Core
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/

【参考】Lazy-loading images in 5.5
https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

【参考】不動産プラグインシリーズ ver5.3.4 から「loading=lazy」に対応しました。
https://nendeb.jp/1642

 
 

コアサイトマップ

WordPress標準でサイトマップがつくようになりました。
URLは「https://ドメイン/wp-sitemap.xml」になります
※sitemap.xmlでない所に注意してください。
また、パーマリンクが「基本」の場合だけ「https://ドメイン/index.php?sitemap=index」になります。

対象はトップページ、投稿ページ、固定ページ、タグ、カテゴリ、カスタム投稿タイプ、カスタム分類、著者アーカイブです。
細かい設定はアクションフィルターで行います。
※プラグインのようにサイトマップ管理画面はありません。
WordPress5.5 コアサイトマップ

もう既にプラグインやテーマ等でサイトマップを設置している場合はどうするか確認する必要がありますね。
コアサイトマップが不要な場合は以下のフィルターを使ってください。

/*
 * Remove Core Sitemaps actions.
 * @since 5.5.0
 */
remove_action( 'init', 'wp_sitemaps_get_server' );

また、管理画面 設定→表示設定で「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとコアサイトマップは表示されなくなります。

【参考】Feature Plugin: XML Sitemaps
https://make.wordpress.org/core/2020/01/27/feature-plugin-xml-sitemaps/

 
 

jQueryバージョンの更新

WordPress5.5からjQuery関連が変わります。
jQuery変更は影響が大きいらしいのでWordPress5.5~5.7までで段階的にようす見ながら変更していくようです。

WordPress 5.5 現jQuery Migrate(新旧バージョン差異を解決するjQuery)を削除します(決定)
WordPress 5.6 最新のjQuery、最新のjQuery Migrate、最新のjQuery UIに変更します(予定)
WordPress 5.7 最新のjQuery Migrateを削除します(予定)

それぞれユーザーの環境によって影響がわからないので 事前にテストできるプラグインが用意されてますので確認してみてはいかがでしょうか。
WordPress5.5 jQueryバージョンの更新

【参考】Test jQuery Updates プラグイン
https://wordpress.org/plugins/wp-jquery-update-test/

【参考】Updating jQuery version shipped with WordPress
https://make.wordpress.org/core/2020/06/29/updating-jquery-version-shipped-with-wordpress/

※ちょっと気になったのは jQuery Migrate が外れたおかげで jquery.js がヘッダー固定にならなくなった所です。jQueryを使うプラグインによっては フッターになったりします。これだけでjsエラーが出るケースもあります。


スポンサードリンク



 

開発者向けの関数

WordPress5.5ではいろいろな機能やアクションフィルターが追加されています。
そのなかで ぉ! と思ったのを紹介します。

PHPMailerを6.xに更新

メールを送信するモジュール「PHPMailer」が v5.2からv6.xへバージョンアップされました。
これで「PHPMailer」はphp5.5以上が必須になります。
特に気にする必要はありませんが、問い合わせ等のメールテストはしといた方がいいです。

【参考】Update PHPMailer to 6.x
https://core.trac.wordpress.org/ticket/41750

 

wp_blacklist_check変更

拒否するためにコメントに禁止されている文字や単語が含まれている場合に拒否できるアクションフィルター「wp_blacklist_check」が非推奨になり「wp_blocklist_check」に変更されました。

WordPress5.5以降の場合はこっちのアクションフィルターを使うようにしましょう。

	/**
	 * Fires before the comment is tested for disallowed characters or words.
	 *
	 * @since 5.5.0
	 *
	 * @param string $author     Comment author.
	 * @param string $email      Comment author's email.
	 * @param string $url        Comment author's URL.
	 * @param string $comment    Comment content.
	 * @param string $user_ip    Comment author's IP address.
	 * @param string $user_agent Comment author's browser user agent.
	 */
	do_action( 'wp_blocklist_check', $author, $email, $url, $comment, $user_ip, $user_agent );

 

wp_make_content_images_responsive

レスポンシブイメージを無効化するフィルターが変わりました。

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

のように していた場合は

remove_filter( 'the_content', 'wp_filter_content_tags' );

になります。

全消しの

add_filter( 'wp_calculate_image_srcset', '__return_false' );

は そのまま使えます。

他にも以下の関数が非推奨になりました。
add_option_whitelist → add_allowed_options
remove_option_whitelist → remove_option_allowed_list
_wp_register_meta_args_whitelist → _wp_register_meta_args_allowed_list

 

redirect_guess_404_permalink関数にフィルター追加

パーマリンクによっては投稿のスラッグが変更した等の理由で見つからない場合でも 404 にしないでそれに近い投稿を探して 見つかればその投稿を表示させる機能(リダイレクト推測)があります。

今までは「redirect_canonical」フィルターを使ってましたが WordPress5.5からは以下のフィルターが追加されてより細かくカスタマイズする事ができるようになりました。

「pre_redirect_guess_404_permalink」
独自のリダイレクトURLを返せます。

「strict_redirect_guess_404_permalink」
リダイレクトURLを推測する方法を「厳密」か「あいまい(デフォルト)」かを指定できます。

「do_redirect_guess_404_permalink」
リダイレクト推測を無効にします。

【参考】WordPress 5.5: Better fine grained control of redirect_guess_404_permalink()
https://make.wordpress.org/core/2020/06/26/wordpress-5-5-better-fine-grained-control-of-redirect_guess_404_permalink/

 

ウィジェットのアクセシビリティの改善

アクセシビリティの改善するために、関連するウィジェットの出力に「nav」タグを追加できるようになりました。

この機能を有効にするためには、テーマの functions.php にナビゲーションウィジェットのサポートを宣言するコードを追加する必要があります。

// Declare support for navigation widgets markup.
add_theme_support( 'html5', array( 'navigation-widgets' ) );

【参考】Accessibility improvements to widgets outputting lists of links in 5.5
https://make.wordpress.org/core/2020/07/09/accessibility-improvements-to-widgets-outputting-lists-of-links-in-5-5/

 

Custom Line Heights

見出しと段落のカスタム行の高さを定義できるようになりまdした。
WordPress5.5 Custom Line Heights

この機能を有効にするためには、テーマの functions.php に line-heightのサポートを宣言するコードを追加する必要があります。

// Custom Line Heights
add_theme_support( 'custom-line-height' );

【参考】New Block Tools on WordPress 5.5 – Make WordPress Core
https://make.wordpress.org/core/2020/07/27/new-block-tools-on-wordpress-5-5/

 

Custom Units

カバーブロックの高さを定義できるようになりました。使用可能な単位は、px、em、rem、vh、vwです。必要な単位を追加できます。
WordPress5.5 Custom Units

この機能を有効にするためには、テーマの functions.php に Custom Units のサポートを宣言するコードを追加する必要があります。

// Custom Units
add_theme_support( 'custom-units', 'px', 'em', 'rem', 'vh', 'vw' );

【参考】New Block Tools on WordPress 5.5 – Make WordPress Core
https://make.wordpress.org/core/2020/07/27/new-block-tools-on-wordpress-5-5/

 

register_rest_route

REST APIでは register_rest_route関数では「Permissions Callback」が無いと警告がでるようになりました。

【参考】Adding Custom Endpoints | REST API Handbook
https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/

「Permissions Callback」入れてないプラグインがいくつかありましたので いちおう動作チェックしといた方がいいですね。
 

スポンサードリンク



 

WP Multibyte Patch

毎回 言いますが WordPress5.0から 必須のプラグインで 日本語版パッケージに 付属してた「WP Multibyte Patchプラグイン」は含まれなくなっています。
だいたいいけるようにはなってますが 日本語で使う場合は やっばり必ず 最新版のをインストール → 有効化 してくださいね。

【参考】「WordPress 5.0 利用開始前に知っておくべきこと」
https://ja.wordpress.org/2018/11/04/things-to-know-before-using-wordpress-5-0/

WP Multibyte Patch プラグイン
https://ja.wordpress.org/plugins/wp-multibyte-patch/

WP Multibyte Patch – EastCoder;
https://eastcoder.com/code/wp-multibyte-patch/

本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。英語圏で作られた WordPress を日本語環境で正しく動作させるために必要となる機能を網羅していますので、なんらかの対策を行っていない場合は導入をおすすめします。

 
 

バックアップとってね

メジャーアップデートでは必ずバックアップをとるようにしましょう。ファイルとデータベースのバックアップは必ずとるようにしてください。
今回のはjQueryが変わったり、ブロック部分がだいぶん変わってますのでプラグインやテーマ、CSSとかチェックしといた方がいいですね。

【参考】
WordPress のバックアップ – WordPress Codex 日本語版
http://wpdocs.osdn.jp/WordPress_%E3%81%AE%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97

BackWPup – WordPress Backup Plugin
https://wordpress.org/plugins/backwpup/

できれば 本番のバックアップから テスト環境 を作って動作テストをする事をお勧めします。