WordPress 5.4は2020年3月31日リリース予定です。現在WordPress 5.4 RC 5になっており、これ以上のコミットや新機能のリクエストは追加できません。

それでは、WordPress 5.4の興味深い新たな機能と変更点について詳しくご紹介します。

何よりもまず、WordPress 5.4ではブロックエディターに多くの機能、改善、バグ修正がなされ、グーテンベルクプラグインのかなりの数のバージョンがコアに統合されました。この変更は、機能とUIの両方に影響を与え、エディターのアクセシビリティ、使いやすさ、そして全体的な編集のしやすさを向上させています。

WordPress 5.4ではエディターの他に、サイトヘルスツールREST APIに興味深い改善が導入されていますが、WordPress 5.4に期待されていたいくつかの機能は延期されており、WordPress 5.5のリリースでコアにバンドルされるはずです(画像のネイティブ読み込み遅延ナビゲーションブロックをご参照ください)。

WordPress 5.4 Development Cycleの次の日付とリンクを保存しておくことをお勧めします。

さあ、それでは、WordPress 5.4で何が新しくなったのか見てみましょう。

ブロックエディターの変化

かなりの数のグーテンベルクプラグインバージョンがコアに統合されました(6.6〜7.5)。グーテンベルクプラグインを使用していない場合には、WordPress 5.4にアップグレードすることで、大量の新しい機能、改良、バグの修正を目にすることになるでしょう。

しかしエディターの変化は、ブロックや機能にとどまりません。全体的なパフォーマンスの改善も見られます。

ブロックエディターを担当するチームは、WordPress 5.3から、かなりのボリュームの投稿(〜36,000文字、〜1,000個のブロック)について14%の読み込み時間の短縮、51%のタイピングまでの時間の削減に成功しています。

素晴らしいニュースが盛りだくさん。詳細に迫りましょう。

What's new in WordPress 5.4? Get an in-depth view of all the new interesting features and changes coming with this latest release! 💪🚀Click to Tweet

ブロックエディターの最新機能と改善点

誰もがブロックエディターがいまだに開発段階にあることを承知しているでしょう。しかしながら、WordPress 5.4では、幾つもの変更と改善がなされ、デスクトップとモバイルの両方でエディターの使いやすさが向上しています。

そんな変更の一部は、デフォルトで有効化されるフルスクリーンモード、改良型ブロック選択、編集モードと選択モードの簡単な切り替え、固定モバイルツールバー、ブロックナビゲーションのパンくずリストなどなど、インターフェースに大きく関係しています。さらに、2つの新しいブロックと追加のオプション設定により、エディターにさらに多くの機能が追加されました。

WordPress 5.4搭載の、注目のブロックエディターの機能と改善点を簡単にリストでご紹介します。

新しいソーシャルアイコンブロック

最初はソーシャルリンクと呼ばれていたソーシャルアイコンブロックを使うと、リンク付きのアイコンをソーシャルプロフィールにすばやく追加でき、さらに豊富な数のソーシャルアイコンの子ブロックから選択できます。このブロックはしばらく実験的に導入されてきたもので、グーテンベルク7.5以降は安定しています。

ソーシャルアイコンブロック

ソーシャルアイコンブロック

ソーシャルアイコンブロックには、デフォルト、ロゴのみ、楕円形という、3つのスタイルが用意されています。

ソーシャルアイコンのスタイル

ソーシャルアイコンのスタイル

これはグーテンベルク6.5で実験的な機能として最初に導入され(そしてWordPress 5.3に統合された)、ソーシャルアイコンがグーテンベルク7.5に追加され、古いバージョンのグーテンベルクプラグインを使用している場合には、期待どおりに機能しない可能性があります。

Jorge Costa氏によると、ソーシャルアイコンの問題を回避する方法は2つあります。

新しいボタンブロック

グーテンベルク7.2のブロックエディターで追加されたボタンブロックは、今までの単一のボタンのブロックに取って代わるかたちになりました。これでブロックコンテナー内コンテンツに多くのボタンが追加できます。

新しいボタンブロック

新しいボタンブロック

ボタンには2つのプリセットスタイルと、ボタンの外観をさらに微調整するためのオプションがあります。

WordPress 5.4のボタン設定

WordPress 5.4のボタン設定

WordPress 5.4には、詳細なカスタマイズの出発点として使用できるグラデーションプリセットがいくつも付属したグラデーション背景が追加されています。これで、サイト所有者はコール・トゥー・アクションの見た目と感覚をより詳細に制御できます。

ボタンのカラー機能の刷新

ボタンのカラー機能の刷新

ウェルカムガイドモーダル

WordPress 5.4には、新しいウェルカムスライドショーが追加されています。ブロックエディターに関する基本情報とオンラインドキュメントグーテンベルク7.1で追加)へのリンクが確認できます。

ウェルカムガイドモーダル

ウェルカムガイドモーダル

モーダルは、5.4に更新した直後にのみ表示されます。もう一度表示するには、右上のボタンから「ツール」メニューの項目にある「ウェルカムガイド」をクリックします。

ウェルカムガイド

ウェルカムガイド

デフォルトでフルスクリーンモードが有効に

WordPress 5.4以降、新しいWordPressインストールデータとデバイスでは、エディターはデフォルトでフルスクリーンモードで開きます。下の画像にあるように「ツール」メニューから「フルスクリーンモード」のオン/オフを切り替えることができます。

WordPress 5.4ではデフォルトで全画面モードが有効になっている

WordPress 5.4ではデフォルトで全画面モードが有効になっている

現時点では、この設定はローカルに保存されています。つまり、シークレットモードでウェブサイトにアクセスする時など、設定が変更されるたびに上書きされます。将来的には、この設定はデータベースに保存され、ユーザーの選択はどのコンテキストにも反映されるようになります。

エディターをデフォルトでフルスクリーンモードにするという決定は、初心者などのユーザーを混乱させる可能性があると考えられ、満場一致での賛同は得られていません。全画面モードに関する懸念の声について詳しく知りたい方は、この投稿のコメントをご確認ください。

ブロックエディター開発者であれば、たった数行のJavaScriptの記述でプログラムを使用してフルスクリーンモードを制御できます。

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
	wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

リッチテキストブロックでのインラインテキストカラーのサポート

長文の記事を書く時に、インラインテキストカラーのサポートはありがたいものです。このアップデートが適用される前は、リッチテキストブロックをHTMLモードでいちいち編集し、単語や文章の色を変更する必要がありました。

リッチテキストカラーオプション

リッチテキストカラーオプション

WordPress 5.4以降では、リッチテキストブロック内の単語や文章を選択して、ビルトインのカラーピッカーを使用して色をすばやく変更できます。

リッチテキストのカラーピッカー

リッチテキストのカラーピッカー

複数のブロックでの色の選択肢の追加

WordPress 5.4では、色に関連する様々な機能と機能拡張がブロックエディターに追加されています。上記のように、単色に限定されません。いくつかのブロックでは、グラデーションの背景と設定済みのグラデーションのパターンをサポートするようになりました。

以下に、色に関連した機能の強化の概観をご紹介します。

プリセットグラデーション背景を使ったカバーブロック

プリセットグラデーション背景を使ったカバーブロック

ブロックエディターのもう1つの注目すべき変化として、最新の記事ブロック(グーテンベルク7.5)でアイキャッチ画像がサポートされるようになりました。

これは、最新の記事ブロックに追加されたいくつかの改良点のうちの最新のものであり「より複雑な動的・グローバルブロック」 への一歩となっています。

最新の記事ブロック

最新の記事ブロック

WordPress 5.4では、最新の記事ブロックを使用して特定のカテゴリの投稿を表示できますが、カテゴリ/タグ/投稿タイプによる高度なクエリを作成したり、特定の投稿を含めたり除外したりすることはできません。

将来的には、このブロックのさらなる機能の強化が期待されます。

ブロックナビゲーションのパンくずリスト

この新しいパンくずリストは、バージョン6.7以降、グーテンベルクユーザーが利用してきたもので、現在はコアに統合されています。入れ子構造のブロックをよりシンプルに操作できるようにするためのものです。

下の画像は、入れ子構造のブロックと下部に表示される新しいパンくずリストを示しています。

新しいパンくずリスト

新しいパンくずリスト

テーマ・ブロック開発者向けのブロックエディターの変更点

テーマとブロックの開発者は、WordPress 5.4でブロックエディターに加えられた多くの変更に注意する必要があります。その変更とは次のとおりです。

ブロックエディタのキーボードショートカット

ブロック開発者や技術面に精通したユーザーは、カスタムショートカットをブロックエディターに追加できるようになりました。

エディターのショートカットの登録、削除、ドキュメントを一元化するために、 @wordpress/keyboard-shortcutsという新しいパッケージが導入されました

開発者は、次のようにregisterShortcutアクションを呼び出すことで、カスタムショートカットを追加できます。

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
	},

	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

これにより、エディターの右上隅からアクセスできる「ツール」メニューのショートカットの欄にカスタムショートカットが自動的に追加されます。

カスタムグローバルブロックエディターショートカットが登場

カスタムグローバルブロックエディターショートカットが登場

次に、 useShortcut関数を使用してキーボードショートカットのハンドラを設定できます。

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

キーボードショートカットの詳細については、 Make WordPress Core blogブログをご覧ください。

グラデーションテーマAPI

WordPress 5.4では、グラデーションの背景、ボタン・カバーブロック用の豊富なプリセットが導入されました。これは、新しいグラデーションテーマAPIのおかげで実現しています。

このAPIには、 editor-gradient-presetsテーマサポートオプションが用意されています。これにより、テーマデベロッパーはデフォルトのプリセットを上書きして独自のプリセットを定義できます。

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);
WordPress 5.4のカスタムグラデーションプリセット

WordPress 5.4のカスタムグラデーションプリセット

カスタムグラデーションプリセット

カスタムグラデーションプリセット

disable-custom-gradientsテーマサポートオプションを使用して、カスタムグラデーションを無効にすることもできます。

add_theme_support( 'disable-custom-gradients' );

グラデーション機能は、 disable-custom-gradientseditor-gradient-presetsの両方を使用して完全に削除できます。

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

ブロックエディターでのマークアップとスタイルの変更

WordPress 5.4では、テーマ開発者が知っておくべきDOM階層構造の変更が適用されています。

DOMとCSSの変更の詳細については、WordPress 5.4のマークアップとスタイル関連の変更をご覧ください。

ブロック開発パッケージ

新しい@wordpress/create-blockパッケージの登場で、開発者はブロックエディタープラグインのディレクトリ構造を生成する新たな手法が利用できるようになりました。この構造には通常、index.php、index.js、style.cssが含まれます。

ブロック開発者は、次のコマンドを実行するだけでよくなりました。

$ npm init @wordpress/block block-name

ブロックコレクション

ブロックコレクションは、ブロックエディター挿入画面で複数のブロックを視覚的にグループ化する手段となります。コレクションはカテゴリーとは別の、ブロックをグループ化するための手段です。

新しいAPIにより新しい関数が利用できます。

registerBlockCollection( namespace, { title, icon } );

この新しいAPIは、グーテンベルク7.3で導入され、現在コアに統合されており、テーマ・ブロックの開発者がブロックをより綺麗に整理することが可能になりました。ユーザーによるブロックの発見や追加が便利になります。

ブロックのバリエーション

Block Variations APIの一連の関数を使うと、開発者は、ユーザーによるブロック追加の際に選択できるブロックのバリエーションを追加、管理、削除できます。新しいバリエーションの登録は非常に簡単です(JSコード)。

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );
見出しブロックのバリエーション

見出しブロックのバリエーション

Block Variations APIの詳細については、PR #20068をご参照ください。

WordPress 5.4で追加されたブロックエディターの新しい機能

WordPress 5.4のコアに組み込まれたその他の注目すべき機能は次のとおりです。

選択・編集モードの切り替え

選択・編集モードの切り替え

WordPress 5.4のキャプション付きの表

WordPress 5.4のキャプション付きの表

— アイキャッチ画像をドラッグアンドドロップ

— アイキャッチ画像をドラッグアンドドロップ

モバイルで表示される固定ブロックツールバー

モバイルで表示される固定ブロックツールバー

ギャラリーブロックの設定

ギャラリーブロックの設定

メディアと文章ブロックで画像へのリンクを追加

メディアと文章ブロックで画像へのリンクを追加

WordPress開発者向けの機能と改善

開発者は、WordPress 5.4で追加されたいくつもの新しい機能を活用したいものです。

中でも私たちが注目しているのが以下のものです。

意味的に正しいカレンダーウィジェットと新しいCSSクラス

HTML 5.1の仕様により、テーブルにおけるtfoot 要素の使用方法が変更されました。HTML 5.1より前のバージョンでは、 tfoot 要素をtbody 要素の前に置くことができました。それが新しい仕様では一変し、今ではtfoottbodyの後に記述する必要があります。

WordPressの問題と遅いホスティング会社にうんざりしていませんか?超高速サーバーとWordPressの専門家による24時間年中無休の世界クラスのサポートを提供しています。当社のプラン一覧をご確認ください。

以前のカレンダーウィジェット

以前のカレンダーウィジェット

WordPressカレンダーウィジェットはこれに応じて変化します。WordPress 5.4以降、ナビゲーションリンクはカレンダーテーブルの外のnav 要素に移動します。

これは、navがあらゆるナビゲーションリンクに適したHTML要素であり、スクリーンリーダーのアクセシビリティ向上に役立つことを考えても、待望の変更点だと言えるでしょう。Mozillaのドキュメントによると以下の通りです。

ドキュメントには複数の<nav> 要素が含まれることがあります。たとえば、1つはサイトナビゲーション用、もう1つはページ内ナビゲーション用です。そのような場合、 aria-labelledbyを使用してアクセシビリティを向上できます。

障がいのあるユーザーを対象とするスクリーンリーダーなどのユーザーエージェントは、この要素を使用して、ナビゲーションのみのコンテンツの最初のレンダリングを省略するかどうかを決定できます。

さらに、ターゲティングを容易にするために、 get_calendar()次のCSSクラスが導入されました。

以下のスニペットは、新しいカレンダーのHTML構造を示したものです。

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>
			</nav>
		</div>
	</div>
</div>

テーマ開発者は、これに応じてスタイルシートを変更する必要があるケースもあるでしょう。

新しいカレンダーウィジェット

新しいカレンダーウィジェット

PHPスクリプトのショートコード

WordPress 5.4ではapply_shortcodes()関数がdo_shortcode()のエイリアスとして導入され、PHPファイルでショートコードを使用できるようになりました。

セマンティック(正しい意味づけ)の観点からは、関数自体を呼び出すだけで、 do_*関数の結果を表示することができます。しかし、do_shortcodeの場合はそうではありません。 指定されたショートコードの出力を表示するには、do_shortcodeをechoする必要があります。

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4では、do_shortcode()と同じように機能するapply_shortcodes()の導入により、状況が少し変わりました。これにより開発者は、より読みやすく意味的に正しいコードを作成できます。

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 RC 5の段階では、 do_shortcode()はサードパーティのプラグインで広く使用されているため、廃止される予定はありません。

WordPress 5.4でのファビコン処理の強化

WordPress 5.4では、テーマ開発者がファビコンリクエストをより柔軟に処理できるようになりました。また、いくつかの新しい機能により、robots.txt関連の機能と同じ要領でファビコンを管理できます。Sergey Biryukov氏は以下のように説明しています。

favicon.icoのリクエストは、do_robots()を使用してrobots.txtを扱うのと同じ方法で処理できます。

つまり、物理ファイルfavicon.icoが提供されていない場合、WordPressは以下のような処理をします。

複数の新しい関数とフックが、対応するrobots.txt関連の関数とフックを補完しています。

ファビコンの扱いについてはこちらの詳細をご覧ください。

メニュー項目にカスタムフィールドを追加する新しいフック

WordPress 5.4では、開発者は2つの新しいアクションフックを使用して、カスタムフィールドをメニューアイテムに追加できるようになりました。

wp_nav_menu_item_custom_fieldsは、ナビゲーションメニューアイテムが管理メニューエディターに追加される直前にトリガーされます。以下の例をご覧ください。

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );
ナビゲーションメニュー項目のカスタムフィールド

ナビゲーションメニュー項目のカスタムフィールド

この新しいアクションフックには、カスタムフィールドの動作を微調整するための5つのパラメーターをサポートしています。

wp_nav_menu_item_custom_fields_customize_templatewp_nav_menu_item_custom_fieldsと同じように機能しますが、カスタマイズ画面、ナビゲーションメニュー項目のフォームフィールドテンプレートの最後でトリガーされます。下の画像は、WordPress 5.4のカスタマイズ画面のメニューセクションの様子です。

ナビゲーションメニュー項目のカスタムフィールド

ナビゲーションメニュー項目のカスタムフィールド

開発者向けのその他の変更点

WordPress 5.4では、開発者と技術面に精通したユーザー向けに、さらに以下の変更も加えられています。

WordPressの開発版をインストールする方法

テーマとプラグインがWordPress 5.4と完全に互換性があるかどうか確認したい場合、または最新のWordPressバージョンの新機能に興味がある場合は、数回のクリックだけで既存の開発版をインストールできます。

WordPressベータ版/RCバージョンをインストールするには、2つの方法があります。

ベータテスタープラグインをインストールする場合は、まずローカルマシンまたはステージング環境で、通常のWordPressをセットアップする必要があります。

WordPressウェブサイトの準備ができたら、「プラグイン」→「新規追加」へと移動し、WordPress Beta Testerプラグインを検索します。

このプラグインを使えば、素早く簡単にWordPressのベータテストが行えます。ボタンのクリックだけで、現在のベータ版またはリリース候補版をインストール・更新可能です。

WordPress Beta Testerプラグインをインストール

WordPress Beta Testerプラグインをインストール

ですので、 通常どおりプラグインをインストールして有効化します。

「ツール」→「Beta Testing」に移動し、「最新版ナイトリービルド」オプションにチェックを入れて変更を保存します。

その後「ダッシュボード」から「更新」画面に移動し、「今すぐ更新」ボタンをクリックします。

WordPressの更新画面

WordPressの更新画面

するとWordPressは次のパッケージをダウンロード、インストールします。

https://wordpress.org/nightly-builds/wordpress-latest.zip

インストールが完了すると、一時的なWordPressバージョン情報ページにリダイレクトされます。

WordPressの更新の進行状況

WordPressの更新の進行状況

以上で完了です。これで、WordPressベータ版とRC版でテストを実行する準備ができました。

WordPressベータ版テストの詳細については、公式ドキュメントをご確認ください。

開発版は、本番環境で使用するためのものではありません。 ステージング環境またはローカルマシンに問題なくインストールできますが、本番サイトでは使用しないでください。

まとめ

グーテンベルクプラグインの10のバージョンがコアに統合され、WordPress 5.4は主にブロックエディターに集中しています。2つの新しいブロック、カスタムショートカット、使いやすさとアクセシビリティの向上が見られ、近い将来、さらに開発が進むことが予想されます。

しかし、それだけではありません。

新しいサイトヘルスステータスウィジェット

新しいサイトヘルスステータスウィジェット

あなたはWordPress 5.4をどう思いますか?どのような変更や機能が最も気に入っていますか?コメント欄からお教えください!


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。