タグアーカイブ ブロックエディタ

WooCommerce 11.2が登場、商品CSVのUPC照合と決済日付入力を追加

WooCommerce 11.2が2026年10月8日にリリースされた。今回のアップデートでは商品CSVインポートの照合方法が拡張され、サプライヤーから届いたUPCだけの価格表をそのまま取り込めるようになった。ほかにもチェックアウトでの日付入力、注文撤回メールの設定、カタログ画面のパフォーマンス改善が含まれる。

ECサイトを運営する担当者にとって、日々の商品管理と受注業務に直結する変更が中心だ。特に商品コードを使った一括更新は、数千点規模の在庫を扱う店舗で作業時間を大きく短縮できる。本記事ではWooCommerce 11.2の主要な変更点と、アップデート前に確認しておきたい注意事項をまとめる。

WooCommerce 11.2の主な変更点

WooCommerce 11.2の主な変更点

WooCommerce 11.2はWordPressのECプラグインとして広く利用されているWooCommerceのマイナーアップデートだ。公式ブログでは変更点を6つの項目に分けて紹介している。いずれも店舗運営の効率化に寄与する内容で、商品管理から顧客体験の改善まで幅広い。

WooCommerce 11.2の変更点マップ
商品管理 CSVインポートがUPC・GTINなどで照合できる
チェックアウト 注文時に日付入力欄を追加できる
メール設定 注文撤回メールを管理画面で設定できる
パフォーマンス カタログ画面とレポート集計が高速化
ブロック機能 商品フィルターがスティッキー表示に対応
注意点 一部メールのCC・BCC配信が停止される

上記のほか、セキュリティ改善とデータベース更新も含まれる。更新前にバックアップを取得しておくことが推奨される。

商品CSVインポートがUPC・GTINなどのコードに対応

商品CSVインポートがUPC・GTINなどのコードに対応

商品コードとは

UPC(Universal Product Code)は主に米国で使われるバーコード規格で、商品パッケージに印刷された12桁の数字を指す。GTIN(Global Trade Item Number)は国際標準の商品識別コード、EAN(European Article Number)は欧州で広く使われるバーコード、ISBNは書籍の識別コードだ。いずれも商品を一意に特定するための番号で、サプライヤーから届く価格表にはこれらのコードだけが記載されていることが多い。

インポート時の照合の流れ

WooCommerceの商品CSVインポート機能では、これまで各行を商品IDまたはSKUで照合して既存商品を更新していた。11.2では照合の優先順位が拡張され、ID、SKU、GTIN、UPC、EAN、ISBNの順に一致する商品を探す。サプライヤーからUPCだけの価格表を受け取った場合でも、そのままCSVファイルとしてアップロードできるようになった。

CSVインポートの照合順序
STEP 1 商品IDで照合
↓
STEP 2 SKUで照合
↓
STEP 3 GTIN・UPC・EAN・ISBNで照合
照合は上から順に行われ、最初に一致したコードが使われる

利用するにはインポート画面で「既存の商品を更新」を有効にする必要がある。同一商品にSKUとUPCの両方が登録されている場合はSKUが優先される仕組みだ。

チェックアウトで日付入力を追加できる

チェックアウトで日付入力を追加できる

日付フィールドの用途

チェックアウトブロックを使用している店舗では、注文手続き中に顧客へ日付を尋ねられるようになった。配達希望日や誕生日など、商品の性質に合わせて自由に用途を決められる。顧客はスマートフォンやブラウザ標準の日付ピッカーを使って日付を選択する。店舗側は選択できる日付の範囲も制限できる。

設定方法

この日付フィールドを追加するには、チェックアウトブロックの設定にショートコードスニペットを追加する。テーマのfunctions.phpやコード管理プラグインに数行のコードを貼り付けるだけで有効化できる。コードの詳細は公式のリリースノートに記載されている。

チェックアウト画面の変化
従来のチェックアウト(Before)
お名前
入力欄
配送先住所
入力欄
↓
改善後のチェックアウト(After)
お名前
入力欄
配送先住所
入力欄
配達希望日
日付を選択

この例では配達希望日を追加しているが、誕生日や引き取り希望日など、店舗の運用に合わせて自由にラベルを変更できる。

注文撤回メールを管理可能に

注文撤回メールを管理可能に

EU圏の顧客に販売している店舗向けの変更も入った。注文撤回(キャンセル要求)が発生したときに送信される2種類のメールを、管理画面から設定できるようになった。1つは顧客が受け取る確認メール、もう1つは店舗側に届く通知メールだ。

WooCommerceの設定画面にある「メール」セクションで、それぞれのメールに独自のメッセージを追加できる。プレビューで内容を確認し、通知を受け取る担当者を選び、必要なければメール自体を無効化することも可能だ。これまではコードでしか変更できなかった設定が、管理画面だけで完結するようになった。

パフォーマンス改善とブロックの新スタイル

パフォーマンス改善とブロックの新スタイル

カタログと管理画面の高速化

商品数が5点でも5万点でも、カタログ画面で商品を自由に並べ替えられるようになった。可変商品(サイズや色などのバリエーションを持つ商品)を含む店舗では、商品ページの読み込みとチェックアウト処理が高速化している。レポート集計ではデータベースへのクエリ数が減り、顧客数が増えてもメモリ使用量が増加しにくくなった。

レポート集計のパフォーマンス
従来(Before)
データベースクエリ数が多い
顧客数に比例してメモリ使用量が増加
↓
WooCommerce 11.2(After)
クエリ数を削減
メモリ使用量が顧客数に依存しない

大量の顧客データを持つ店舗ほど、この改善による管理画面の体感速度は大きく変わる。レポート表示が遅くて開くのを待っていた店舗は、更新後に改善を実感しやすい。

商品フィルターブロックのスティッキー表示

商品フィルターブロックにスティッキー(追従)表示のオプションが追加された。長いカテゴリーページを顧客が下へスクロールしても、フィルター条件が画面上部に表示され続ける。絞り込みのたびにページ先頭まで戻る手間がなくなる。

ほかにも数量セレクター(カート内のものを含む)は枠線、影、色、角丸を設定できる。商品画像には枠線、フィルターチップにはフォントと余白のコントロールと角丸が追加された。これらのスタイルは外観 > エディター > スタイル > ブロックの画面で店舗全体に一括設定するか、ブロック単位で個別に調整する。

アップデート前に知っておくべき注意点

アップデート前に知っておくべき注意点

既存メール設定への影響

パスワードリセット、新規アカウント作成、メール確認の各メールについて、自分自身をCCまたはBCCでコピー受信していた場合、その配信が停止される。これらのメールにはログインリンクが含まれるため、本人以外には送られないようにするセキュリティ上の変更だ。

ダウンロードリンクと権限の変更

標準のダウンロードリンクは従来どおり動作する。ただし、まれにカスタム登録やインポートで不正なデータを持つリンクは動作しなくなる可能性がある。顧客から報告があれば、注文画面からリンクを再発行すればよい。

ショップマネージャー(店舗運営者)が、フォーラム権限や会員権限など特定の追加権限を持つユーザーを編集できなくなる。そのようなユーザーの編集はWordPress管理者が行うことになる。

アップデート手順の注意

WooCommerce 11.2にはセキュリティ改善とデータベース更新が含まれるため、運営中のすべての店舗でアップデートを適用することが推奨される。データベース更新が走るので、事前のバックアップが必須だ。

この記事のポイント

  • WooCommerce 11.2は2026年10月8日にリリースされた
  • 商品CSVインポートがUPC・GTIN・EAN・ISBNでの照合に対応した
  • チェックアウトブロックに日付入力欄を追加できる
  • 注文撤回メールの管理画面設定が可能になった
  • パフォーマンス改善とセキュリティ更新を含むためバックアップしてアップデートを
WordPress 7.2開発サイクル始動、Gutenberg 23.8と23.9の開発者向け新機能まとめ

WordPress 7.2開発サイクル始動、Gutenberg 23.8と23.9の開発者向け新機能まとめ

WordPress 7.1「Mary Lou」が2026年8月にリリースされた。レスポンシブスタイルステート、アイコン登録機能などが含まれる大型アップデートだ。まだ更新していない場合は早めの対応が推奨される。

続くGutenberg 23.8と23.9では開発者向けの改善が多数入っている。コードリファレンスの実行可能コード例、ブロックのキーボードショートカット宣言API、テーマJSONスキーマの修正など、実務に直結する変更が多い。

WordPress 7.2のBeta 1は2026年10月20〜22日、正式版は12月8〜10日に予定されている。本記事では2026年9月時点の開発者向け変更点を整理して解説する。

コードリファレンスがブラウザ上で実行可能に

コードリファレンスがブラウザ上で実行可能に

WordPress公式のコードリファレンスで大きな変化があった。コード例をその場で実行できるようになったのだ。WP_HTML_Processorクラスのclass_list()メソッドのページを開き、「Run」ボタンを押すと、Playgroundを使った実際のWordPress環境でコードスニペットが実行される。

従来のコードリファレンスは静的ページであり、コード例を読むだけだった。だが今回の変更で、関数の動作確認がブラウザ内で完結する。ドキュメントと関数定義が同じファイルに存在するため、コードと実行結果の乖離が起きにくい構造だ。

実装方法はDocBlocksの中に「php interactive」というコードフェンスを書くだけ。関数の説明コメント内に実行可能なコードを埋め込む仕組みで、ドキュメント提案として長く議論されてきた内容が実現した形だ。

ブロック開発の新APIと改善点

ブロック開発の新APIと改善点

キーボードショートカットを宣言的に定義可能に

Gutenberg 23.9では、ブロックのキーボードショートカットを宣言的に登録するAPIが追加された。これまで「Alt+Shift+2」で段落をHeading 2に変換する機能はハードコードされており、エディタパッケージごとに個別実装が必要だった。

新しいAPIでは、ブロックバリエーションにshortcutオブジェクトを指定するか、ブロック変換にshortcuts配列を指定する。後者の場合、1つの変換で最大6つのショートカットをまとめて定義できる。

インナーブロックテンプレートがブロック設定へ移行

Gutenberg 23.8では、templateとtemplateInsertUpdatesSelectionがブロックタイプ設定として追加された。従来のInnerBlocksコンポーネントのpropsを使う方式は非推奨となり、WordPress 7.2リリース前に移行することが推奨される。

この変更の背景にはリアルタイム共同編集の開発がある。propsベースの方式はマウント後にテンプレートを適用するため、3人の共同作業者がドキュメントを開いている場合、Listブロックを挿入すると3つのリスト項目が生成される問題があった。ブロックタイプ設定として宣言することで、ブロックとテンプレートが単一のストア操作で処理される。

kebab-case変換がJSとPHPで完全一致

WordPress Coreの_wp_to_kebab_case()は、数字の扱いに関して一般的なライブラリと異なる挙動をしていた。今回、JavaScript側でも同じ変換結果を返す@wordpress/kebab-caseパッケージが公開された。

一般的なライブラリの変換結果(Before)
kebabCase(‘white2white’) → white2white
kebabCase(‘font2xl’) → font2xl
kebabCase(‘white4th’) → white4th
※数字の前後で文字列が分割されず、出力が一貫していなかった
↓
@wordpress/kebab-caseの変換結果(After)
kebabCase(‘white2white’) → white-2-white
kebabCase(‘font2xl’) → font-2-xl
kebabCase(‘white4th’) → white-4th
※数字の前後にハイフンが入り、PHP版と同じ結果を返す

このデモで示したように、JSとPHPの間でスラッグ生成ロジックが統一された。ブロック名やCSSクラス名の変換で環境による差異がなくなる。

エディタが管理者カラースキームに対応

投稿エディタ、ウィジェットエディタ、カスタマイザーのウィジェットエディタが、アクティブな管理者カラースキームを反映するようになった。getAdminThemeColors()が@wordpress/admin-uiの公開APIとして提供され、拡張開発者も同じ仕組みを自前の管理画面に組み込める。

Data Viewsの改善と時刻フィールド追加

DataViewsパッケージからプライベートAPIの依存が排除された。これまで同パッケージをプラグインにバンドルすると「ロックされていないオブジェクトをアンロックできない」というエラーが出る問題があった。対応に伴い、CalendarやRangeCalendarなどのコンポーネントが公開APIとして移行している。

Gutenberg 23.8ではtime型のフィールドも追加された。営業時間やイベント開始時刻、予約枠など、日付を伴わない時刻データを扱う用途に向いている。値はHH:mm形式で保存されるため、訪問者のタイムゾーンに左右されない。

テーマ開発者向けの変更点まとめ

テーマ開発者向けの変更点まとめ

theme.jsonスキーマの修正

WordPress 7.1で導入されたレスポンシブスタイルステートと擬似クラスステートのスキーマが不完全だった。Gutenberg 23.8で複数の修正が入り、コードエディタでtheme.jsonを編集する際にステートが不正として表示されないようになった。

スタイルUIの制御オプション追加

blockStatesEditingEnabledとresponsiveEditingEnabledという2つのフラグが追加された。block_editor_settings_allフィルターを通じて無効化できる。クライアント向けのサイト構築で、設計済みのスタイルを崩させずに編集機能をロックダウンする用途に有効だ。

label要素とフォーム要素のスタイル対応

Gutenberg 23.9ではlabel要素がtheme.jsonのスタイル対象に追加された。styles.elements.labelで指定でき、Search、Form Input、Post Comments Form、Archives、Categoriesブロックなどでレンダリングされるlabelタグに適用される。

続けてcite、textInput、select要素もエディタのStylesインターフェースから直接編集できるようになった。エディタのTypographyパネルとColorsパネルで操作できる。

GroupブロックのblockGapが軸別指定に対応

GroupブロックのblockGapサポートが水平方向と垂直方向の両方に対応した。theme.jsonでblockGapの値として通常の文字列に加えて、topとleftのキーを持つオブジェクト形式を指定できる。エディタUI上ではflexレイアウトとgridレイアウトでのみ軸別コントロールが表示される。

そのほか、Listブロックがwideとfullの配置をサポート、Query No Resultsブロックがボーダーとスペーシングをサポート、Query Loopブロックがblock gapをサポートするようになった。Accordion Headingブロックのtheme.jsonスペーシングがトグルボタンに正しく適用される修正も入っている。

Playgroundの進化とWordPress 7.2の展望

Playgroundの進化とWordPress 7.2の展望

WordPress PlaygroundがWebMCPに対応した。これはAIエージェントが呼び出せるツールとしてブラウザ内のアクションを公開する草案APIだ。PlaygroundはWordPressをネストされたiframeで実行するため、新しいプロキシが埋め込みサイトのツールを外部ページに広告し、呼び出しを転送する仕組みになっている。

さらに、Playground上でWordPress 0.7まで遡って実行できるようになった。設定パネルで「Include older versions」にチェックを入れると、6.2までの全バージョンが選択肢に含まれる。PHPのバージョンも自動的にペアリングされるため、「いつこの機能が壊れたのか」を確認する用途に役立つ。

STEP 1 Beta 1(10月20〜22日)
最初のベータ版がリリースされ、新機能のテストが始まる
↓
STEP 2 Beta 2以降(11月)
追加のベータ版で機能の安定化とバグ修正が進む
↓
STEP 3 RC(リリース候補版)
正式版に向けた最終調整段階
↓
STEP 4 正式版(12月8〜10日)
WordPress 7.2が正式リリースされる
■ ベータ版  ■ 安定化  ■ RC  ■ 正式版

このタイムラインで示したように、WordPress 7.2の開発サイクルは約2ヶ月にわたって進行する。開発者向け機能の実装状況を確認しながら、互換性の検証を進めるのが良いだろう。

この記事のポイント

  • コードリファレンスがブラウザ上でコード実行に対応、Playgroundを使った動作確認が可能になった
  • ブロックのキーボードショートカットを宣言的に定義するAPIが追加された
  • インナーブロックテンプレートはブロックタイプ設定への移行が推奨される
  • theme.jsonのスキーマ修正とスタイルUIの制御オプションでテーマ開発が改善された
  • WordPress 7.2は12月8〜10日に正式リリース予定、Beta 1は10月20〜22日
WooCommerce 11.1でREST APIとStore APIが最大42%高速化。ブロック登録スキップの仕組み

WooCommerce 11.1でREST APIとStore APIが最大42%高速化。ブロック登録スキップの仕組み

WooCommerce 11.1がブロック登録の仕組みを大きく変更する。REST APIとStore APIのリクエストが従来より13〜18ミリ秒、割合で30〜42%速くなる見込みだ。

これまでWooCommerceはほぼすべてのリクエストでブロックタイプとパターンを登録していた。画面にブロックを描画しないAPIリクエストでも同じ準備処理が走り、無駄なコストになっていた。

この記事では変更の背景と仕組み、影響を受ける開発者の条件、具体的な対応方法を解説する。11.1は正式リリース前の段階のため、エクステンションを配布している開発者は事前テストが求められる。

なぜブロック登録をスキップするのか

なぜブロック登録をスキップするのか

ほぼ全リクエストで発生していた無駄な処理

WooCommerceはこれまで、ブロックタイプとパターンをほぼすべてのリクエストで登録していた。商品データを返すだけのREST APIリクエストでも、カート情報を返すStore APIリクエストでも、ブロックを描画しないのに登録処理が実行されていた。

ブロック登録にはファイル読み込みやメタデータ解析が伴う。1リクエストあたりの負荷は小さくても、APIを多用する店舗やヘッドレスコマース構成では応答速度に影響する。WooCommerceチームは「リクエストはブロックを描画または編集できる場合にのみ、ブロック登録のコストを支払うべき」という方針を取った。

従来のリクエスト処理(Before)
全リクエスト ブロック登録を実行 → ブロック登録 → 本来の処理
↓
改善後のリクエスト処理(After)
REST API リクエスト ブロック登録を実行しない → 登録スキップ → 本来の処理

Beforeではすべてのリクエストがブロック登録を経由していた。Afterではブロックを描画しないAPIリクエストが登録処理を飛ばし、その分だけレスポンスが速くなる。

描画しないリクエストに課されるコスト

従来の挙動は、ブロックを編集も描画もしないリクエストまでブロックエディタの準備をさせるものだった。この無駄はアクセス数に比例して増える。とくにモバイルアプリやフロントエンドを別システムで構築し、WooCommerceをAPI経由で使う構成では影響が大きい。

今回の最適化は、APIリクエスト全体に占めるブロック登録のコストが想定以上に大きかったことを示している。13〜18ミリ秒の改善は体感的には小さいが、ピーク時に多数のリクエストを処理する店舗では合計の短縮効果が積み上がる。

11.0から11.1へ段階的に進めた変更

11.0から11.1へ段階的に進めた変更

11.0で導入したパターンの遅延読み込み

第一段階はWooCommerce 11.0で実装された。パターンがファイルパスで登録され、エディタから要求されたときだけ内容が読み込まれるようになった。WordPressコアと同じ挙動だ。ブロックを登録するリクエストごとに5〜8ミリ秒の節約が確認されている。

11.1のBlockRegistrationContextガード

11.1では新しいBlockRegistrationContextガードが追加された。このガードがリクエストを判定し、ブロックを描画しない場面ではブロックタイプとパターンの登録をまとめてスキップする。

商品説明を守るオンデマンド登録の例外

1つだけ例外がある。商品説明やバリエーション説明にWooCommerceブロックが含まれる場合、woocommerce_short_descriptionフィルター経由で必要なときにブロックタイプが登録される。これにより商品REST API、Store API、バリエーションAJAXエンドポイント、商品のWebhookでも説明が正しく描画される。

STEP 1 11.0でパターンの遅延読み込みを導入
↓
STEP 2 11.1でブロック登録をスキップするガードを追加
↓
STEP 3 Store APIとREST APIが13〜18ミリ秒、30〜42%高速化

2段階の変更により、パターン読み込みとブロック登録という2つの重い処理がAPIリクエストから外れた。完成した最適化の効果が30〜42%という数字に表れている。

対象リクエストと安全性の設計

対象リクエストと安全性の設計

スキップ対象と従来どおりのリクエスト

スキップされるのはブロックを描画しないリクエストのみだ。フロントエンド、管理画面、ブロックエディタ、サイトエディタのリクエストは従来どおりブロックを登録する。

見落としがあっても表示は壊れない

ガードは自身が認識したコンテキストだけをスキップする。認識できない場面では登録を継続するため、分類に漏れがあったとしても描画の後退にはつながらない。性能が少し落ちるだけで済む設計だ。

登録をスキップするリクエスト
REST API、Store APIなどブロックを描画・編集しない場面
従来どおり登録するリクエスト
フロントエンド、管理画面、ブロックエディタ、サイトエディタ
認識できないコンテキスト
登録を継続するため、表示が壊れることはない

この設計は保守性の面でも合理的だ。未知のリクエストに対して安全側に倒すため、WooCommerceの内部判断が変わっても既存サイトの表示が突然崩れるリスクを抑えられる。

開発者が確認すべき影響範囲

開発者が確認すべき影響範囲

影響を受けるエクステンションの条件

この変更はWooCommerce 11.1.0から適用される。スキップされるリクエスト中にWooCommerceブロックを描画するエクステンション、またはWooCommerceのブロックタイプ、パターン、ブロックごとのアセット登録に依存するエクステンションが影響を受ける。

スキップされた場面では、WooCommerceブロックは生のブロックマークアップか、動的出力のない静的なHTMLとして返る。テンプレートに直接ブロックを組み込んでいるエクステンションは、表示内容が変わらないか確認が必要だ。

コードで確認する方法

影響の有無はコードで確認できる。以下のコードはWooCommerce 11.1以降のスキップ対象リクエストでfalseを返す。

// WooCommerce 11.1以降、スキップされた場面では false を返す。
WP_Block_Type_Registry::get_instance()->is_registered( 'woocommerce/mini-cart' );

商品説明と自前ブロックは影響なし

商品説明とバリエーション説明はオンデマンドで処理されるため対応は不要だ。register_block_type()で自前登録しているブロックも影響を受けない。今回の変更はWooCommerce自身が行う登録だけが対象になる。

実務では「自前でブロックを登録しているか」「WooCommerceのブロック登録に依存しているか」の切り分けが重要になる。前者は今回の変更を意識する必要がなく、後者だけが対応を検討すればよい。

開発者が取るべき対応と正しいブロック作成

開発者が取るべき対応と正しいブロック作成

woocommerce_should_register_blocksフィルターで復帰

影響を受けるエクステンションは、新しいwoocommerce_should_register_blocksフィルターを使い、実際にブロックを描画するリクエストのときだけtrueを返す。

add_filter(
    'woocommerce_should_register_blocks',
    function ( $should_register ) {
        return my_context_renders_blocks() ? true : $should_register;
    }
);

フィルターはプラグイン読み込み時に実行され、メインクエリが解析される前の段階で呼ばれる。そのため条件には$_SERVERや$_GETなど、この初期段階で利用できる情報だけを使うことになる。

復帰させる範囲を絞りすぎるとブロックが見つからず表示が変わることがある。逆に広げすぎると今回の性能改善が失われる。描画が実際に発生するリクエストを正確に判定する条件を書くのが開発者の作業になる。

内部クラスAbstractBlockを避ける

WooCommerceはブロックをAbstractBlockという内部クラスの上に構築しないよう推奨している。内部クラスを継承すると、WooCommerceが下すすべての登録判断、今回のスキップも含めて引き継ぐことになる。

登録の最適化が進むにつれ、内部クラスのライフサイクルは今後も変わり続ける。依存すると将来のアップデートで予期しない挙動になる可能性が高い。

標準のWordPress Block APIを使う

サポートされる方法は標準のWordPress Block APIだ。ブロックをblock.jsonに定義し、init時にregister_block_type()で登録する。カートやチェックアウトの内部ブロックには@woocommerce/extend-cart-checkout-blockテンプレートがある。

WooCommerceの公式ドキュメントにあるスキャフォールディングとサンプルストアデータ、@wordpress/create-blockも出発点として適している。標準APIに沿って作れば、今後の最適化に追随しやすい。

正式リリース前の段階で、WooCommerceはエクステンション開発者に11.1へのテストを呼びかけている。とくに商品データやカート情報をAPIで扱う拡張を配布している場合は、早めの動作確認が安全だ。

この記事のポイント

  • WooCommerce 11.1はブロックを描画しないリクエストでブロック登録をスキップする
  • Store APIとREST APIは13〜18ミリ秒、割合で30〜42%高速化する
  • 商品説明や自前登録ブロックは影響を受けず対応不要
  • 影響を受ける場合のみ woocommerce_should_register_blocks フィルターで復帰させる
  • 内部クラスAbstractBlockではなく標準のWordPress Block APIでブロックを作る
WordPress 7.1 Mary Louリリース。レスポンシブ対応強化と新メディアエディタ搭載

WordPress 7.1 Mary Louリリース。レスポンシブ対応強化と新メディアエディタ搭載

WordPress 7.1「Mary Lou」が2026年8月19日に正式リリースされた。今回のメジャーアップデートでは、カスタムCSSなしでレスポンシブ対応ができるスタイル機能、新しいメディアエディタ、リッチテキスト対応のNotes機能などが追加されている。800人以上の貢献者による1,500以上の改良と修正が含まれる大規模リリースだ。

従来のWordPressでは、画面サイズごとに表示を調整するにはカスタムCSSを書く必要があった。WordPress 7.1ではサイトエディタ内で完結するため、中小企業のサイト担当者やコーディングに不慣れなユーザーでも直感的にレスポンシブ対応できるようになる。画像処理のブラウザ内実行や新ブロックの追加も見逃せない変更点だ。

WordPress 7.1の全体像と主要な新機能

WordPress 7.1の全体像と主要な新機能

WordPress 7.1のコードネーム「Mary Lou」は、ジャズピアニストのメアリー・ルー・ウィリアムズに由来する。彼女はスウィング、ビバップ、セイクリッドジャズとジャンルを横断しながら常にサウンドを再発明し続けた。その革新と協働の精神が今回のリリースに反映されている。

リリース全体の規模を見ると、世界中から800人以上の貢献者が参加し、170人以上が初めてコントリビュートした。修正と改良の総数は1,500を超える。主要な変更点は、レスポンシブスタイルのビジュアル編集、管理バーの全エディタ対応、新しいメディアエディタ、Notes機能の拡張、PlaylistとTabsの2つの新ブロック、そして開発者向けAPI群の公開だ。

WordPress 7.1の主要な新機能カテゴリ
レスポンシブ対応 カスタムCSSなしで画面サイズ別のスタイル設定が可能
メディア編集 切り抜き・反転・回転・メタデータ編集を1つのモーダルで完結
コラボレーション Notes機能がリッチテキストとメンションに対応
パフォーマンス 画像処理をブラウザ内で実行しサーバー負荷を削減
新ブロック PlaylistブロックとTabsブロックを標準搭載
■ レスポンシブ対応 ■ メディア編集 ■ コラボレーション ■ パフォーマンス ■ 新ブロック

このデモでは、WordPress 7.1の主要な変更点を分野別に色分けして示している。青がレスポンシブ対応、橙がメディア編集、紫がコラボレーション、緑がパフォーマンス、赤が新ブロックを表す。

今回のリリースの特徴を一言でまとめると、「サイト制作の作業導線を管理画面内に集約する」方向性が鮮明になったことだ。従来はCSSファイルの編集や複数の画面を行き来する必要があった作業が、ブロックエディタやサイトエディタの中で完結するようになっている。特に中小企業のサイト担当者にとっては、外注や開発者への依頼なしで調整できる範囲が広がる。

レスポンシブスタイルと管理バーの改善

レスポンシブスタイルと管理バーの改善

カスタムCSSなしのレスポンシブ対応

WordPress 7.1では、サイトエディタのグローバルスタイルと個別ブロック設定の両方にレスポンシブコントロールが追加された。具体的には、デスクトップ・タブレット・モバイルの各画面サイズでブロックの表示をどう変えるかを、ビジュアル操作だけで設定できる。

編集中の画面でビューポート(表示領域の幅)を切り替えながらスタイルを調整できるため、仕上がりを確認しやすい。従来のようにカスタムCSSでメディアクエリを手書きする必要がない。この変更は、コーディングに不慣れなユーザーにとって特に大きな意味を持つ。

レスポンシブ対応の進化
従来の対応方法(Before)
カスタムCSSで画面サイズごとにスタイルを記述する必要があった
カスタムCSS → メディアクエリ → 手動でコード管理
※コーディング知識が必要だった
↓
WordPress 7.1の対応方法(After)
サイトエディタ内で画面サイズごとのスタイルをビジュアルに設定できる
ビジュアル編集 → プレビュー確認 → ノーコードで完結
※CSS知識が不要になった

このデモでは、従来のカスタムCSSによる対応と、WordPress 7.1のビジュアル編集による対応の違いを示している。上段の赤い枠がBefore、下段の緑の枠がAfterを表す。CSSの記述が不要になり、プレビューを見ながら調整できるようになった点が大きな変化だ。

管理バーがすべてのエディタで表示される

管理バーがサイトエディタを含むすべてのエディタで追従するようになった。投稿執筆中でもサイトデザインの編集中でも、ダッシュボードや関連ツールへのショートカットが常に画面上部に表示される。WordPressの管理画面を行き来する手間が減り、作業導線が分断されにくくなった。

さらに、ブロックテーマではテーマの設定ファイル(theme.json)にタブレットとモバイルのブレークポイントを独自に定義できるようになった。レスポンシブスタイルとブロック表示の切り替えに使う画面幅の基準を、サイトごとに調整できる。

メディア編集の刷新と画像処理の高速化

メディア編集の刷新と画像処理の高速化

新しいメディアエディタ

従来はインラインで行われていた画像の切り抜きが、新しいモーダル形式のメディアエディタに置き換わった。自由な切り抜き、アスペクト比を固定した切り抜き、水平・垂直の反転、細かな角度調整ができるスナップ回転、そしてメタデータ編集が1つの専用画面に統合されている。

エントリーポイントは従来と同じ「切り抜き」ボタンのまま。既存の操作感を維持しつつ、機能が大幅に拡張されたかたちだ。画像編集のためにプラグインを追加していたユーザーにとっては、標準機能だけで済むケースが増える。

新メディアエディタの操作フロー
STEP 1 メディアライブラリで「切り抜き」ボタンをクリック
↓
STEP 2 新しいメディアエディタがモーダルで開く
↓
STEP 3 切り抜き・反転・回転・メタデータ編集を同一画面で実行
↓
STEP 4 保存して完了
■ 入口 ■ 起動 ■ 編集作業 ■ 保存

このデモは、新しいメディアエディタの操作手順を4ステップで示している。青・緑・橙・紫の順に進み、1つのモーダル内で画像編集からメタデータ更新まで完結する流れが分かる。

ブラウザ内での画像処理

画像の圧縮・リサイズ・サムネイル生成が、サーバーではなくブラウザ内で実行されるようになった。libvipsのWebAssemblyビルドを利用しており、大きな画像をアップロードしてもPHPのメモリ制限やアップロードタイムアウトに引っかかりにくくなる。

サーバー負荷の軽減は、共有サーバーや低スペックのレンタルサーバーを利用しているサイトにとって特に有効だ。画像の多いメディアサイトやECサイトでは、アップロード時のタイムアウトエラーが減ることが期待できる。

対応画像形式も拡充された。AVIF、HEIC、HDRゲインマップのネイティブサポートが追加され、最新のスマートフォンやカメラで撮影した画像をそのまま扱えるようになった。GIFを動画に自動変換するオプションもあり、ファイルサイズの削減が進む。

Notes機能の進化とコラボレーション強化

Notes機能の進化とコラボレーション強化

WordPress 7.1では、コンテンツのレビュー作業を支援するNotes機能が大幅に拡張された。従来はブロック単位でしかコメントを残せなかったが、今回から特定のテキスト範囲に対してノートを付けられるようになった。

リッチテキストにも対応した。太字、斜体、コード表示、リンクの挿入がノート内で使える。さらに「@」を入力すると共同編集者をメンションでき、通知が飛ぶ。複数の会話を同じブロック内で並行して進められるほか、長いノートを折りたたんでサイドバーをすっきり保つことも可能だ。

この機能強化は、複数人で記事をレビューする編集部や、クライアントとの校正作業を行う制作会社にとって実用的な価値がある。フィードバックの場所が明確になり、メールやチャットでのやり取りをWordPress内に集約できる。

執筆中の投稿エディタも全テーマでiframe化された。編集キャンバスが管理画面のスタイルから分離されるため、テーマのCSSが管理画面のスタイルと衝突しにくくなる。ビューポート単位やメディアクエリが編集キャンバスを正確に参照するようになり、レスポンシブレイアウトのプレビュー精度が向上した。

新ブロックと開発者向けAPIの拡充

新ブロックと開発者向けAPIの拡充

PlaylistブロックとTabsブロック

WordPress 7.1では2つの新しいブロックが追加された。Playlistブロックは複数の音声トラックを1つのプレイリストにまとめて再生できる。オプションで波形表示も付けられ、リスナーは各トラックの長さや進行具合を視覚的に把握できる。

Tabsブロックは、関連する情報をタブ形式で整理するためのブロックだ。すべてのコンテンツを一度に表示するのではなく、タブを切り替えて必要な内容だけを見せる。FAQ、料金プランの比較、製品仕様など、関連情報をコンパクトに提示したい場面で役立つ。

開発者向けAPI群

開発者向けの変更も大きい。SVG Icon APIが公開APIとなり、wp_register_icon_collection()、wp_register_icon()、wp_get_icon()といった関数で独自のアイコンコレクションを登録し、エディタ全体で利用できるようになった。

Abilities APIは前バージョンで導入された基盤を拡張し、フィルタ可能な実行ライフサイクル、カスタムバリデーション、共有ディスカバリーを追加した。WordPress上での統合機能や自動化、AI搭載ツールの構築が容易になる。

新しいDesign Systemは、色、角丸、カーソルスタイルを含むWordPress管理画面のテーマリングを支援する。開発者はセマンティックなデザイントークンとThemeProvider Reactコンポーネントを使って、WordPressに馴染むカスタム管理画面を構築できる。

テーマ開発者には、theme.jsonでレスポンシブスタイルと疑似状態(hover、focus、focus-visible、active)のスタイリングが可能になった。DataViewsとDataForm画面を設定する新しいフィルタも追加され、サイトエディタのページ・テンプレート・パーツ管理画面をカスタマイズできる。

パフォーマンスとアクセシビリティの改善

パフォーマンスとアクセシビリティの改善

パフォーマンス面では、前述のブラウザ内画像処理に加えて、GIFから動画への自動変換が導入された。GIFアニメは動画ファイルよりサイズが大きくなりがちで、この変換によりページの読み込み速度が改善する。アップロードの進捗インジケーターと自動リトライも追加され、接続が途中で切れてもアップロードが再開できるようになった。

メディアライブラリはデフォルトで無限スクロールになった。ページネーションに戻すオプションもユーザーごとに用意されている。多数の画像を扱うサイトでは、ページを切り替える操作なしで目的のメディアを探しやすくなる。

Speculative loadingのデフォルト設定を、環境変数や定数で指定できるようになった。ホスティング事業者やサイト運営者は、プラグインを書かずにWordPressの先読み動作を設定できる。これはサイト速度の調整手段として、特にトラフィックの多いサイトで有用だ。

アクセシビリティの改善も続いている。wp_get_tooltip()とwp_get_toggletip()という新しい関数が追加され、投稿メタボックスやログイン画面を含む管理画面の各所でアクセシブルなツールチップを利用できるようになった。スクリーンリーダーのサポートも強化され、投稿一覧テーブルでのラベル付けとナビゲーションがより予測しやすくなっている。

この記事のポイント

  • WordPress 7.1「Mary Lou」が2026年8月19日にリリースされた
  • カスタムCSSなしでレスポンシブスタイルを設定できるようになった
  • 新しいメディアエディタが切り抜き・反転・回転・メタデータ編集を統合
  • 画像処理がブラウザ内で実行され、サーバー負荷とタイムアウトが軽減された
  • Notes機能がリッチテキストとメンションに対応し、コラボレーションが強化された
  • PlaylistブロックとTabsブロックが標準搭載された
  • 開発者向けにSVG Icon API、Abilities API、Design Systemが公開された
WordPress 7.1正式版が8月19日リリース。レスポンシブスタイルと疑似状態の全容

WordPress 7.1正式版が8月19日リリース。レスポンシブスタイルと疑似状態の全容

WordPress 7.1の正式版が2026年8月19日にリリースされる。WordCamp US最終日と重なるタイミングで、すでにRC1とRC2が公開され、機能セットは確定済みだ。先月にはセキュリティリリース2件も出ており、影響を受けるサイトは自動更新が強制された。

今回のアップデートで注目が大きいのは、レスポンシブブロックスタイルと疑似状態スタイルのコア導入だ。テーマ開発者はモバイルとタブレットの表示をtheme.jsonだけで制御できるようになる。プラグイン開発者もリストテーブルの構造変更に注意が必要だ。正式版まで残り数日、互換性確認のポイントを解説する。

WordPress 7.1は8月19日リリース、RC2まで公開済み

WordPress 7.1は8月19日リリース、RC2まで公開済み

正式版はWordCamp US最終日に到着

WordPress 7.1は8月19日にリリース予定だ。ちょうど8月16日から19日にかけて米国フェニックスで開催されるWordCamp USの最終日と重なる。年次フラッグシップイベントの最終日に正式版が出るのは珍しいスケジュールで、現地参加者はその瞬間をライブで目撃できる。

先週までにRC1とRC2が立て続けに公開された。RC(Release Candidate / リリース候補版)とは、正式版の一歩手前の段階だ。ここまで来ると新機能の追加は終了し、バグ修正だけが行われる。Field Guideも公開済みで、全機能の開発者向け詳細がまとまっている。

セキュリティリリース2件、強制自動更新も発動

先月はセキュリティリリースが2件公開された。7月17日に出たWordPress 7.0.2は、重大な脆弱性1件と高深刻度の脆弱性1件に対処したものだ。深刻度が高かったため、影響を受けるバージョンのサイトには強制自動更新が適用された。続いて8月6日には7.0.3が公開され、十数件の追加修正が入っている。

管理しているサイトが両方の自動更新を何らかの理由で逃していた場合、先にそちらの更新を済ませることが最優先になる。7.1のテストはその後でかまわない。

レスポンシブスタイルがコアに登場

レスポンシブスタイルがコアに登場
デスクトップビュー(デフォルト)
パディング幅 3rem(約48px)
theme.json のデフォルト値がそのまま適用される
↓
タブレットビュー(@tablet)
パディング幅 2rem(約32px)
782px 以下の画面で適用される
↓
モバイルビュー(@mobile)
パディング幅 1rem(約16px)
480px 以下の画面で適用される

上記の図は、theme.jsonでデスクトップ・タブレット・モバイルのパディングを切り替える様子を視覚化したものだ。実際には端末の画面幅に応じて、この3つの状態が自動的に切り替わる。

theme.jsonでモバイルとタブレットのスタイルを定義

春先から開発が進められていたレスポンシブスタイルが、WordPress 7.1で正式にコアに導入された。ブロックのスタイルをタブレットとモバイルのビューポートごとに定義できる。Global Styles(グローバルスタイル)ではブロックタイプ単位で、個別のブロック単位でも設定可能だ。theme.jsonでは@mobileと@tabletというキーの中にネストして記述する。

ここで押さえておきたいのは、@desktopキーが存在しない点だ。ブロックのデフォルトスタイルがそのままデスクトップスタイルになる。モバイルやタブレットで上書きしなかったプロパティは、すべてのビューポートでデフォルト値が適用される。

さらにテーマ側でブレークポイントを設定できる。theme.jsonのトップレベルにsettings.viewportプロパティを追加する仕組みだ。デフォルトはモバイルが480px、タブレットが782px。値はpx、em、remの非負の長さのみ許可され、CSS関数やパーセント、単位なしの値は無視される。タブレット値がモバイル値と同じか小さい場合は、モバイルのみが使われる。

標準ブロックサポートを使っているブロックは、タイポグラフィ、カラー、背景、ボーダー、寸法、スペーシング、レイアウトが自動的に対応する。逆に独自のスタイルコントロールを持つブロックは対象外だ。自作ブロックがある場合、この線引きで対応有無を確認してほしい。

疑似状態スタイルでホバーやフォーカスを制御

ボタンの疑似状態スタイル(4状態)
通常状態 ボタン
ホバー状態 ボタン
フォーカス状態 ボタン
アクティブ状態 ボタン
■ 通常 ■ ホバー ■ フォーカス枠 ■ アクティブ

ホバーやフォーカスは実際の操作で状態が変わるため、上記は4つの状態を並べて示したものだ。実際の編集画面では「Hover」タブを選んでスタイルを設定する。

かねてから要望の多かった疑似状態スタイルも7.1で実装された。:hover、:focus、:focus-visible、:activeをtheme.jsonとエディタで定義できる。現時点ではButtonブロックとNavigation Linkブロックに限定されている。

さらに初期段階のカスタムステート機能も入った。現状はtheme.jsonのみで、管理画面のUIはまだない。Navigation Linkブロックが現在のメニュー項目をスタイルするために-currentプロパティを使う仕組みだ。カスタムステートは-接頭辞を使い、ブロックのblock.jsonにあるselectors.statesプロパティで宣言したクラス名をターゲットにCSSを生成する。現時点では限定的だが、今後の拡張に向けた重要な布石だ。

新しいデザインツール3点

新しいデザインツール3点

テーマ開発者が長年待っていた変更を含む、デザインツールの追加が3つある。グラデーションと背景画像を同時に使えるようになるのは特に大きい。

背景グラデーションと背景画像を併用可能に

新しいbackground.gradientは既存のcolor.gradientとは別のサポートとして追加された。違いはCSSの出力先にある。従来のサポートはbackgroundショートハンドを通じて描画されるため、background-imageを含むすべてのbackground関連プロパティをリセットしてしまっていた。ブロックにグラデーションか画像のどちらか一方しか使えなかった理由だ。

新しいサポートはbackground-imageロングハンドで描画される。スタイルエンジンが1つの宣言内にグラデーションと画像をカンマ区切りで出力できるようになった。7.1ではGroup、Accordion、Pullquote、Post Content、Quoteがコアで対応する。値はstyle.background.gradientに保存される。

最小幅とテキストシャドウ

dimensions.minWidthは既存のminHeightと同じパターンで、CSSのmin-widthとして適用される。テーマがdimensionSizesプリセットを提供していれば、それを活用できる。1点注意があり、この設定はデフォルトではブロックインスペクターに表示されない。ブロック側で__experimentalDefaultControlsを通じてopt-inした場合のみ表示される。Global Stylesではデフォルトで表示される。

テキストシャドウもGlobal Stylesでサポートされた。これまでは個別ブロックやCSSでしか指定できなかったが、theme.jsonからサイト全体またはブロックタイプ単位で制御できる。

SVG Icon APIが正式公開

アイコン名の衝突を防ぐ名前空間の仕組み
名前空間なしの場合(衝突する)
core / star → my-plugin / star 同じ名前で衝突
↓
名前空間を付けた場合(安全)
core/star → my-plugin/star それぞれ別のアイコンとして識別

アイコン名の衝突を防ぐため、コレクション名が名前空間の接頭辞になる。プラグイン独自のアイコンを登録しても、コアのアイコンと混同される心配がない。

WordPress 7.0でエディタとIconブロック向けにSVGアイコンのセットが同梱された。7.1ではこれが正式な公開APIになり、プラグインやテーマから登録できるようになった。wp_register_icon_collection()でコレクションを登録し、wp_register_icon()でアイコンを追加する。PHPの任意の場所でwp_get_icon()を使えば、サイズやクラス、ラベルを指定してアイコンを表示できる。

計画時に意識したい制限が2つある。登録したSVGはwp_ksesによって保守的な許可リストでサニタイズされる。許可されるのは<svg>、<path>、<polygon>のみ。許可リストの拡大作業は進行中だ。fillは図形部分にのみ許可され、外側の<svg>には付けられない。またwp_get_icon()単体で呼び出すとSVG自身のfill(黒)で描画される。周囲のテキスト色に合わせたい場合は、渡したクラスに対して自前でCSSを指定するのが推奨される。

エディタのiframe化とプラグインへの影響

エディタのiframe化とプラグインへの影響

投稿エディタは常時iframe表示へ

テンプレートエディタがiframe化されたのはWordPress 5.8からだ。それ以来、投稿エディタも段階的に移行してきたが、7.1で最終段階に入った。テーマの種類や登録ブロックのAPIバージョン、コンテンツ内のブロックのAPIバージョンに関係なく、投稿エディタは常にiframeで表示される。レガシーメタボックスを登録しているサイトも同様だ。

7.0では投稿ごとに挿入されたブロックに基づいて判断されていた。つまりコンテンツによってiframedモードと非iframedモードが切り替わり得た。この条件付き動作がなくなり、挙動が単純化された。

大半のブロックは変更なしで動作する。問題が起きる場合、ほとんどは1つの根本原因にたどり着く。iframeは管理者ページとは別のdocumentとwindowを持つ。エディタスクリプトが実行される管理者ページからグローバルのdocumentやwindowにアクセスしてキャンバスを操作しようとすると、間違ったドキュメントを見ていることになる。対処としては、キャンバス内の要素からownerDocumentとdefaultViewでドキュメントを取得するか、useRefEffectでキャンバス要素にリスナーをアタッチ・クリーンアップするのが一般的だ。

リストテーブルの行ヘッダーが移動

カスタムCSSやJavaScriptを書いているプラグインにとって、静かに何かを壊す可能性が高いのがリストテーブルの変更だ。投稿一覧テーブルで、プライマリのth scope="row"がチェックボックス列からタイトル列に移動した。チェックボックスセルはtdになり、タイトルセルがthとして投稿タイトルを含むaria-labelを持つ。レスポンシブ表示で折りたたまれるセルはflexレイアウトを使うようになった。

これはアクセシビリティの大きな改善だ。スクリーンリーダーは各行を、場合によっては存在しないチェックボックスではなく投稿名で認識できるようになる。ただしこのマークアップは2010年以降ほぼ安定していたため、多くの拡張が暗黙的に依存している。th.check-columnを選択するCSSやJavaScript、td内の行アクションや投稿タイトルを期待するコードがある場合は確認が必要だ。

この記事のポイント

  • WordPress 7.1は8月19日リリース予定、RC2まで公開済みで機能セットは確定
  • セキュリティリリース7.0.2と7.0.3が先月公開され、強制自動更新も適用された
  • レスポンシブスタイルがコアに入り、モバイルとタブレットのスタイルをtheme.jsonで定義可能に
  • 疑似状態スタイルでホバー、フォーカス、アクティブをテーマから制御できる
  • SVG Icon APIが公開され、プラグインが名前空間付きでアイコンを登録可能に
  • 投稿エディタは常時iframe化され、リストテーブルの行ヘッダー移動も要確認
WordPress 7.1ベータ公開、ノート機能の大幅強化とCSS不要のレスポンシブ編集

WordPress 7.1ベータ公開、ノート機能の大幅強化とCSS不要のレスポンシブ編集

WordPress 7.1のベータ版が7月下旬に公開され、編集体験に大きな改善が盛り込まれた。ノート機能がチームでの共同編集に本格対応し、CSSを一行も書かずに端末ごとの見た目を調整できるようになる。正式版はWordCamp USが開催期間中の8月19日にリリースされる予定だ。

今回の目玉は「ノート機能の強化」「レスポンシブスタイリング」「ホバーやフォーカス状態の視覚編集」の3本柱である。さらに、かねてから要望の多かったタブブロックとプレイリストブロックが追加され、管理画面の使い勝手も向上する。テスト段階のため本番環境への適用は避ける必要があるが、正式版までに知っておきたいポイントを詳しく見ていこう。

ノート機能がチーム編集ツールに進化

ノート機能がチーム編集ツールに進化

WordPress 6.9で導入されたノート機能は、ブロック単位の簡素なコメント機能だった。WordPress 7.1ではそれが一変し、複数人でのフィードバックに耐える本格的なツールへと変わる。

@メンションで担当者を直接指名

ノートの入力欄で「@」を打ち込むと、サイトの共同編集者の一覧が検索候補として表示される。目的のメンバーを選択すれば、その人を指名したノートが作成される。これにより「この修正は誰に伝えればいいのか」という迷いがなくなり、チーム内でのやり取りが格段にスムーズになる。

インラインノートで誤解を減らす

これまでのノートはブロック全体に対してしか付けられなかったため、長文の中で「ここを直してほしい」と書いても具体的な箇所が伝わりにくかった。WordPress 7.1では、文章内の特定の語句や文を選択し、その部分だけにノートを付けられる。該当部分はハイライト表示されるため、どの言葉に対する指摘なのかが一目でわかる。WP Beginnerの記事でも「『この部分を言い換えてほしい』という指示が、長い段落の中のどの単語を指すのかを推測する必要がなくなった」と評価されている。

従来のノート(ブロック単位)
プロジェクトの進捗は来週のミーティングで共有する予定です。参加者のスケジュールも調整が必要です。
📝 この段落を書き直してください
→ どこが指摘対象か不明
↓
WordPress 7.1のノート(テキスト単位)
プロジェクトの進捗は来週のミーティングで共有する予定です。
@山田 日時を確定できますか?

このように、修正箇所と指示がピンポイントで結びつくため、レビューにかかる時間が劇的に短縮される。

その他の改善点

  • 同じブロックに対して複数のノートスレッドを立てられる。議題ごとに会話を分離できる
  • ノート本文に太字、斜体、コード、リンク、絵文字を使ったリッチテキストが可能
  • 長いノートは初期状態で折りたたまれ、サイドバーが散らからない

CSS不要のビジュアルスタイリングが編集画面で完結

CSS不要のビジュアルスタイリングが編集画面で完結

WordPress 7.1で最もインパクトが大きいのが、レスポンシブデザインのビジュアル操作である。これまではスマホやタブレット用の見た目を調整するには、CSSメディアクエリを手書きするか、テーマの設定に頼るしかなかった。今回のアップデートで、ブロックエディタ上でプレビューを切り替えながら、直感的にスタイルを設定できるようになる。

端末別のスタイル設定

エディタ上部のプレビュー切り替えで「デスクトップ」「タブレット」「モバイル」を選択すると、以降のブロックスタイルの操作はその画面サイズにだけ適用される。たとえばモバイル表示を選んで見出しのフォントサイズを小さくすれば、実際のスマホでの表示だけが変わる。デスクトップ表示には影響しない。

さらに、ブロック設定パネルには、現在どの画面サイズを編集中かを示す小さなバッジが表示される。意図しない画面用のスタイルを上書きしてしまうミスを防げる。エディタキャンバス自体も、プリセットの3サイズに縛られず、横幅をドラッグして任意の幅での表示をリアルタイムに確認できるようになった。テーマがtheme.jsonで独自のブレイクポイントを定義していれば、その値に合わせたプレビューも可能である。

デスクトップ表示(幅1200px想定)
見出しサンプル
広い画面ではこの大きさで快適に読める
↓
モバイル表示(幅360px想定)
見出しサンプル
モバイルではフォントを縮小し領域に収める

CSSを書く必要がなくなり、カスタマイズのハードルが大きく下がる。サイト全体に一括適用したい場合は、グローバルスタイルで設定し、変更内容を選択的にグローバルへ反映させることもできる。

ホバーやフォーカス状態も視覚的に編集

ボタンなどのブロックには新たに「状態」ドロップダウンが追加され、ホバー時やフォーカス時、アクティブ時の見た目をエディタ上で直接編集できる。背景色や枠線、テキスト色を状態ごとに変え、その場でプレビュー確認できる。これまではほんの小さな変更であっても、カスタムCSSを追加せざるを得なかったが、今後は組み込みのデザインオプションで完結する。

待望のタブブロックとプレイリストブロック

待望のタブブロックとプレイリストブロック

これまでプラグインで実装していたタブ切り替えのレイアウトが、ついにコアブロックとして導入される。また、音声ファイルをまとめて再生できるプレイリストブロックも新登場する。

タブブロック

商品の仕様、よくある質問、料金プランの比較など、情報をパネルで区切って見せたい場面で重宝する。クリックでパネルを切り替える形式で、長いページを避けたい場合に効果的だ。既存のプラグインで作成したタブは、自動的にはコアブロックに変換されないため、移行の際は手作業が必要になる点に注意しておきたい。

プレイリストブロック

複数の音声ファイルを一つのプレイヤーにまとめ、タイトルやアーティスト名、カバーアート、波形グラフィックとともに表示できる。ミュージシャンや教会、教育機関、ポッドキャスト運営者にとっては、エピソードをまとめて提供するのに理想的なブロックだ。WordPressだけで手軽に音声配信の体裁を整えられるようになる。

加えて、既存のブロックにも多くの改善が加わっている。背景グラデーションと画像の同時適用、テキストシャドウのtheme.json対応、HTMLブロック内でのブロックネストの編集、装飾画像をスクリーンリーダーに読み上げさせない設定、ショートコードのEmbedブロックへの自動変換、ColumnsやGalleryからのグリッドレイアウト変換、アイコンブロックの回転・反転・アイコンセット登録機能など、日常的な制作を後押しするアップデートが多数含まれている。

画像編集とメディア処理の刷新

画像編集とメディア処理の刷新

WordPressに組み込まれている画像編集機能が大幅に変わる。従来の狭いインライン操作から、専用のモーダルウィンドウでの本格的な編集へと進化した。

専用の画像編集モーダル

画像ブロックの「切り抜き」ボタンを押すと、フルスクリーンに近い編集画面が開く。自由トリミング、アスペクト比のプリセット、回転・反転、メタデータの編集を一か所で行える。カバーブロックにも対応しており、背景画像をその場でトリミングできる。本格的な写真編集ソフトには及ばないものの、サイト運営者が日常的に行う作業としては十分な機能を備えている。

ブラウザで画像を前処理しHEICにも対応

WordPress 7.1では、画像のリサイズや圧縮、サムネイル生成の大部分を、アップロード前にブラウザが処理する仕組みが導入される。これにより、サーバーの負荷が大幅に減り、低スペックなホスティング環境でもアップロードエラーが起きにくくなる。

さらに、iPhone標準の画像形式であるHEICをはじめ、UltraHDR、AVIF、WebPといった最新フォーマットへの対応が強化される。これまではサーバー側のImageMagickのバージョンに依存してHEICの変換が失敗することがあったが、ブラウザが変換を担うことで環境を選ばずに済むようになる。なお、ChromeとEdgeではフル機能が利用でき、Safariでは一部がサーバー処理に委ねられ、Firefoxでは従来通りサーバー側で処理される。

アップロードの堅牢性と細かな改善

アップロード中にネットワークが切断されても、キューが自動で一時停止し、再接続後に中断したところから再開される。一括アップロード時には進行状況が表示される。このほか、投稿に添付された画像を自動で引っ張ってくる動的ギャラリーモード、投稿専用の「添付画像」セクションがインサーターに追加され、メディアライブラリは自動読み込みの無限スクロールに対応する。日々のメディア管理のストレスを確実に減らす改良が詰め込まれている。

管理画面と編集体験の快適化

管理画面と編集体験の快適化

WordPress 7.1では、編集画面と管理画面の連携を改善する数々の小さな改良も施されている。

管理ツールバーが常に表示される

ブロックエディタやサイトエディタで編集しているときも、管理ツールバーが非表示にならず、画面上部に固定される。これにより、作業中でもサイトの管理メニューに素早くアクセスできる。ツールバーそのものもデザインが整理され、戻るボタンがわかりやすい山形アイコンに変更され、サイトアイコンと丸いプロフィールアバターが表示される。アイコン類も旧来のDashiconsからモダンなSVGに置き換わった。もちろん、集中執筆モードではツールバーが隠れるため、文章だけに集中したい場合も安心だ。

コマンドパレットとアイデンティティ設定の進化

コマンドパレット(Ctrl+K / Command+K)は、最近使ったコマンド、一致する候補、おすすめの3つに分類されるようになった。利用履歴はログインをまたいで保存されるため、よく使う操作に素早くたどり着ける。サイトエディタのサイドバーも、ユーザーが選んだ管理画面のカラースキームを反映するようになり、全体的な統一感が増した。

サイトのタイトル、キャッチフレーズ、ロゴ、サイトアイコンといった基本情報は「デザイン」内の「アイデンティティ」セクションにまとめられ、設定画面とテンプレートを行き来する手間がなくなった。

「あの日何を書いたか」ウィジェットとコメント親変更

ダッシュボードに新たに「On This Day」ウィジェットが追加され、過去の同じ日に公開した記事を表示してくれる。長く続けているブログにとっては、更新のネタを見つけるきっかけになる。また、コメント編集画面では「どのコメントへの返信か」を後から変更できるようになり、誤って違うスレッドにぶら下がったコメントを正しい位置に付け替えられる。対象は同一投稿内に限られるが、コメント管理の柔軟性が向上した。

見送られた機能と開発舞台裏

見送られた機能と開発舞台裏

今回のリリースには含まれなかったが、注目すべき開発項目がいくつかある。

リアルタイム共同編集は次期以降に持ち越し

Googleドキュメントのような複数人同時編集は、WordPress 7.1では搭載が見送られた。Gutenbergプラグイン上では既に動作しており、複数人が同じ投稿を同時に編集できる段階にある。しかし、コアチームは協調編集データの保存方法や、完全な機能を提供するか基盤だけを先にリリースするかといった重要な判断を続けている。コミュニティによるテストも継続中で、時期尚早な投入によるデータ消失リスクを避けるための慎重な判断と見られている。WP Beginnerの記事でも「作業内容を失う共同編集機能ほど最悪なものはない」と指摘されており、この慎重さは妥当だろう。

Unicodeメールアドレス対応も見送り

日本語などの非ラテン文字を含むメールアドレスへの対応も、ベータテスト中に課題が見つかり延期された。互換性とセキュリティの検証をコミュニティプラグインで続けた後、改めてコアへの導入を目指す方針だ。

パフォーマンスと開発者向けの内部改善

投稿エディタは常にiframe内で動作するようになり、管理画面のCSSによる表示崩れを根本的に防ぐ。ただし、旧APIで作られたブロックは影響を受ける可能性があるため、プラグイン開発者はBlock API v3への移行が推奨される。アイコンAPIが公開され、プラグインやテーマが独自のSVGアイコンセットを登録・レンダリングできるようになった。そのほか、デザインシステムの成熟や、外部サービス接続の認証方式拡充など、長期的な安定性と拡張性を見据えた改良も進められている。

この記事のポイント

  • ノート機能に@メンションとインラインノートが追加され、チームでのフィードバックが格段に正確になった
  • レスポンシブスタイリングとホバー・フォーカス状態の編集がCSS不要で行える
  • タブブロックとプレイリストブロックがコアに加わり、コンテンツ表現の幅が広がった
  • 画像編集モーダルとブラウザベースの画像処理で、メディアまわりの操作性と安定性が向上
  • 管理ツールバーの常時表示やアイデンティティ設定の集約など、管理画面の使い勝手が改善された
WordPress 7.0でAIプラグインを作る!Abilities APIとAI Client連携の実際

WordPress 7.0でAIプラグインを作る!Abilities APIとAI Client連携の実際

WordPress 7.0から導入された3つのAI関連コンポーネント、Abilities API、AI Client、そしてMCP Adapterがプラグイン開発の風景を大きく変えようとしている。これらを組み合わせると、AIが画像を解析し、自動で記事を生成するプラグインを驚くほど少ないコードで実装できる。

本記事では、実際に「Photo to Post」というプラグインの構築を通して、各APIの役割と連携方法を具体的に解説する。WordPressの管理画面から画像URLを入力するだけで、AIがビジョンで内容を理解し、下書き投稿を自動生成する流れを追いながら、新しい開発スタイルの全体像をつかんでほしい。

情報源はWordPress Developer Blogのチュートリアル「Build your first AI-Powered WordPress plugin」(2026年7月30日公開)だ。ここで示されるコードと設計思想は、今後のWordPressエコシステムにおけるAI統合の方向性を色濃く反映している。

新しいAI開発基盤の3要素

新しいAI開発基盤の3要素

WordPress 6.9以降で整備されたAbilities API、7.0で正式に取り込まれたAI Client、そしてMCP Adapterは、それぞれ独立して使えるが、組み合わせることで真価を発揮する。まずはこの3つの役割を押さえておく。

Abilities API

Abilities APIは、プラグインが提供する機能を「能力」として登録し、REST APIやAIエージェントなどが統一された方法で発見・実行できる仕組みだ。入力スキーマ、出力スキーマ、パーミッションコールバック、そして実処理を行うコールバックを定義する。これにより、従来のようにエンドポイントを個別に実装する手間が省け、一度登録した能力が管理画面・REST・MCP経由でそのまま利用可能になる。

WordPress AI Client

AI Clientは、プロバイダー(OpenAI、Anthropic、Googleなど)に依存しないPHPライブラリだ。プラグインコードはwp_ai_client_prompt()というフルーエントなビルダーでプロンプトを組み立て、テキスト生成やファイル送信を依頼するだけでよい。プロバイダーの切り替えは管理画面のConnectors API(後述)でAPIキーを設定するだけで済み、コードを一切変更する必要がない。

MCP Adapter

MCP(Model Context Protocol)は、AIエージェント(デスクトップアプリやVS Code拡張など)が外部ツールを呼び出すための標準プロトコルだ。MCP Adapterプラグインをサイトにインストールすると、登録したAbilityがMCPツールとして自動公開される。ClaudeやChatGPTなどのAIクライアントにWordPressの機能を認識させ、「この画像から投稿を作成して」と自然言語で指示するだけで、プラグインの能力が裏側で呼び出される。

REST経由
能力 describe-image
curlでエンドポイントを叩けばJSON応答が返る
↓
管理画面経由
能力 create-post-from-photo
DataFormで生成されたフォームから実行
↓
MCP経由(AIエージェント)
能力 create-post-from-photo
Claudeなどがツールとして呼び出す
■ REST ■ 管理画面 ■ MCP
同じ能力が3つの入口からシームレスに使える

上の図はAbilities APIの最大のメリットを示している。一度登録すれば、UI、REST、AIエージェントのどこからでも同一の能力を実行できる。エンドポイントごとに別の処理を書く必要はない。

プラグイン「Photo to Post」の仕組み

プラグイン「Photo to Post」の仕組み

チュートリアルで構築する「Photo to Post」は、画像URLを入力するとAIが画像の内容を解析し、その説明文をもとにブログ投稿用のタイトルと本文を生成、さらにその画像をアイキャッチに設定した下書き投稿を作成するプラグインだ。

内部では、3つのAbilityが連携している。ここで重要なのは、最後の能力が他の能力を呼び出す「能力の合成(composition)」を実践している点だ。

STEP 1 画像URLを入力、describe-imageが画像を解析し説明文を生成(AI Vision)
↓
STEP 2 説明文を元にgenerate-post-from-descriptionが投稿内容をAIで生成(テキスト生成)
↓
STEP 3 create-post-from-photoが上記2つを内部で呼び出し、投稿を作成してアイキャッチを設定

この合成パターンは、WordPressのフィルターフックやアクションフックで築かれた「小さな機能を組み合わせて大きな機能を作る」という哲学のAI時代バージョンといえる。

実装の流れを追う

実装の流れを追う

ここからはチュートリアルの主要な実装ステップを、要点を絞って解説する。すべてのコードはスタータープラグインをベースにしており、TODOコメントを置き換える形で進められる。AIプロバイダーとしてはOpenAI、Anthropic、Google Geminiなどが利用可能だ。

AIプロバイダーとの接続

WordPress 7.0では、設定メニューに「コネクター」画面が追加された。Connectors APIによって、各プラグインはAPIキーの保存場所を一元管理できる。従来はプラグインごとに設定ページでキーを管理する必要があったが、これで1箇所に集約される。

OpenAI、Anthropic、Googleの公式プロバイダープラグインをインストールし、コネクター画面でAPIキーを登録すれば、あとはAI Clientが自動的にそのプロバイダーを使う。ビジョンモデルを使う場合は、Anthropicのように画像をBase64で送る必要があるが、AI Clientが吸収するためコード上の差異はほとんど生じない。

能力の登録

Abilities APIにおける能力の登録は、wp_register_ability()関数にラベル、説明、入出力スキーマ、パーミッション、コールバックを渡すだけだ。ここで定義したスキーマが、RESTやMCP経由で能力を呼び出す際の「説明書」になる。

チュートリアルでは、describe-image(画像URL → テキスト説明)、generate-post-from-description(説明文 → 投稿タイトルと本文)、create-post-from-photo(画像URL → 下書き投稿)の3つを登録する。

従来のプラグイン開発(Before)
RESTエンドポイントをregister_rest_routeで個別定義
フロントJSでfetchを手書き
MCP対応は別途SDKが必要
↓
Abilitiesベースの開発(After)
能力を1回登録するだけでRESTも管理画面もMCPも自動対応
入出力スキーマが自己文書化
能力どうしの合成で複雑な処理もシンプルに

能力を登録したら、wp_abilities_api_initアクションにフックし、RESTで表示するためにメタ情報にshow_in_rest => trueを指定する。これだけでアプリケーションパスワードを使ったcurlで能力の一覧を取得できる。

AI Clientによる画像解析とテキスト生成

最初の能力describe-imageのコールバックでは、wp_ai_client_prompt()でプロンプトを構築し、with_text()とwith_file()で画像のデータURIを渡してgenerate_text()を呼ぶ。戻り値はWP_Errorの可能性があるため、必ずチェックする。

画像はwp_remote_get()で取得しBase64エンコードしたデータURIにして送る。これにより、URLでの画像指定を受け付けないプロバイダーでも動作する。

2つ目の能力generate-post-from-descriptionでは、AIに「画像説明文から魅力的なブログ投稿を生成し、JSONで返す」よう指示する。プロンプトには「markdownコードフェンスで囲まない」と明示するが、AIは非決定論的なため、念のためpreg_replace()でフェンスを除外し、JSON文字列の中からオブジェクトを抽出する防御的なパース処理を入れている。

能力の合成

3つ目の能力create-post-from-photoがこのプラグインの心臓部だ。ここでwp_get_ability()を使って自分自身以外の能力を取得し、execute()で実行する。最初にdescribe-imageを実行して画像説明を取得し、次にその説明を使ってgenerate-post-from-descriptionを実行、最後に得られたタイトルと本文からwp_insert_post()で下書きを作成する。

このように、能力を「LEGOブロック」のように組み合わせられることがAbilities APIの真骨頂だ。各能力は単独でテスト可能であり、後から新しい能力を追加して組み合わせることも容易である。

管理画面の拡張

スタータープラグインに付属するDataFormベースの設定画面を、実際の能力と連携させる。JavaScript側からは@wordpress/abilitiesパッケージのgetAbility()とexecuteAbility()を使い、先ほどPHPで登録したcreate-post-from-photo能力を呼び出す。

スクリプトをモジュールとして読み込み、readyプロミスでAPIが利用可能になるのを待ってから実行する。これで管理画面から画像URLを入力し「投稿を生成」ボタンを押すだけで、一連のAI処理が走り、下書きが作成される。成功すると編集画面へのリンクが表示される。

MCP対応でAIエージェントにも開放

能力の登録時にメタに'mcp' => array( 'public' => true )を追加し、MCP Adapterプラグインを有効化するだけで、その能力がMCPサーバー経由で外部AIエージェントに公開される。

例えばClaudeデスクトップアプリの設定ファイルにWordPressサイトのURLとアプリケーションパスワードを記述すれば、「この写真から投稿を作成して」と話しかけるだけで、create-post-from-photoが自動的に呼ばれる。REST、管理画面、MCPという3つの入口を同じコードで実現できるのは、Abilities APIの設計の妙だ。

実装から見える将来性

実装から見える将来性

WordPressのコアに組み込まれたこれらAIビルディングブロックは、単なる補助機能ではない。プラグイン開発のパラダイムを「単一の機能提供」から「再利用可能な能力の提供と合成」へとシフトさせる可能性を秘めている。

従来のプラグイン開発
個別のREST実装
フロントとバックエンドの密結合
MCP対応は別途開発
↓
Abilities API+AI Clientの世界
能力を登録すればREST・管理画面・MCPが即座に利用可能
AIプロバイダー非依存の設計
能力の合成で複雑な自動化も容易
■ 従来 ■ これから

さらに、Connectors APIによるAPIキーの一元管理は、複数プラグイン間の設定のばらつきを解消し、サイト管理者の負担を大きく下げる。開発者は「どのAIモデルを使うか」を気にせず、ビジネスロジックに集中できる環境が整いつつある。

注意点として、AI呼び出しには時間がかかるため、デフォルトのHTTPタイムアウトでは処理が中断される可能性がある。チュートリアルではwp_ai_client_default_request_timeoutフィルタでタイムアウトを120秒に延長する対処が示されている。このような実運用の勘所も押さえておきたい。

プラグイン開発者がこうした基盤を活用し始めれば、WordPressエコシステム全体のAIリテラシーが一気に加速する。非エンジニアでも「写真から投稿を作って」と指示するだけでコンテンツ制作が進む未来は、すぐそこまできている。

この記事のポイント

  • WordPress 7.0のAbilities API・AI Client・MCP Adapterにより、AI搭載プラグインを少ないコードで構築できる
  • 能力を1回登録すればREST・管理画面・AIエージェントの3経路で同一機能を提供可能
  • AI Clientはプロバイダー非依存で、Connectors APIがAPIキー管理を集約
  • 能力の合成で「LEGOブロック」のように複雑な自動化を実現
  • 実運用ではタイムアウト延長フィルタなど、実装上の注意点も必要
WordPress 7.1 Beta 3リリース、グローバルスタイル適用の改善点を解説

WordPress 7.1 Beta 3リリース、グローバルスタイル適用の改善点を解説

Beta 3がもたらす現場へのインパクト

Beta 3がもたらす現場へのインパクト

WordPress 7.1の正式リリースは2026年8月19日に迫っている。今回公開されたBeta 3は、単なるバグ修正の積み上げではない。ブロックエディタのスタイル管理に根本的な考え方の変更をもたらす機能が含まれている点が最大の注目点だ。

具体的には、「Apply globally(グローバルに適用)」機能の改善だ。これまで、あるブロックに加えたスタイル変更をサイト全体に反映させる操作は、すべての変更を一括で上書きするか、まったく適用しないかの二者択一だった。この「全か無か」の動作は、実際のデザインワークフローにおいて多くの小さなストレスを生んでいた。

Beta 3で導入された改良では、適用前にレビューステップが挿入される。これにより、変更したスタイルのうち、どれをグローバルに適用し、どれをそのブロックだけのローカルな変更として残すかを選択できるようになる。部分的なグローバル適用が可能になることで、サイト全体のデザイン整合性を保ちながら、特定のブロックだけ微調整するという、現実的な運用が格段にやりやすくなった。

従来のグローバル適用(Before)
ブロックA 枠線を青に変更
ブロックB 背景色を灰色に変更
⚠️ グローバル適用を押すと、枠線と背景色の両方が全ブロックに一括適用される。選択不可。
↓
Beta 3のグローバル適用(After)
レビューステップ 変更内容を一覧表示
☑ 枠線の変更 グローバル
☐ 背景色の変更 ローカルのまま

このレビューステップの導入により、デザイナーやサイト運営者は「うっかり全ブロックのスタイルを壊してしまった」というヒヤリハットから解放される。部分的な適用が可能になったことで、より積極的にグローバルスタイルを活用できるようになるだろう。

メディアアップロードの地味だが確実な改善

Beta 3には、日々の運用で遭遇しがちなメディア関連のバグ修正も含まれている。長尺のGIFアニメーションをアップロードした際に処理が停止してしまう問題が解消された。また、EXIFメタデータで回転情報が埋め込まれた画像が、正しい向きで処理されるようになった。

Safariブラウザで単一のHEIC画像をアップロードすると、誤ってエントリーが二重に作成される問題も修正されている。これらの修正は派手さこそないが、クライアントワークで大量の画像を扱う制作会社や、更新頻度の高いメディアサイトの運用者にとっては、地味に嬉しい改善と言える。

テストに参加する4つの方法

テストに参加する4つの方法

WordPress 7.1 Beta 3は、本番サイトでの使用を想定していない。あくまでテストと開発を目的としたリリースだ。テスト環境は、ローカルPC上のLocal by FlywheelやDevKinsta、あるいはXAMPPやDockerを使った手動セットアップなど、普段使い慣れたもので問題ない。

テスト環境を用意したら、以下のいずれかの方法でBeta 3を入手できる。

方法1 WordPress Beta Testerプラグイン
管理画面からプラグインをインストールし、有効化するだけでテスト版の更新通知を受け取れる。最も手軽な方法だ。
プラグイン名「WordPress Beta Tester」で検索
方法2 直接ダウンロード(ZIP)
公式サイトからZIPファイルをダウンロードし、手動でインストールする。
wordpress.org から 7.1-beta3 を入手可能
方法3 WP-CLI(コマンドライン)
開発者向け。ターミナルから1行実行するだけでアップデートが完了する。
wp core update –version=7.1-beta3
方法4 WordPress Playground
ブラウザ上で直接テストできる。環境構築不要。クリックするだけで7.1 Beta 3が試せる。
playground.wordpress.net で即時起動可能

特にWordPress Playgroundは、データベースすら必要としないブラウザ完結型のテスト環境だ。とりあえず新機能を触ってみたいという場合には、最もハードルが低い選択肢だろう。

なぜベータテストへの参加が重要なのか

なぜベータテストへの参加が重要なのか

WordPressのメジャーバージョンアップは、世界中のサイトに影響を及ぼす。7.1では、Beta 1以降だけでも71件以上の課題が修正されている。これらの修正の質を高めるには、多様な環境でのテストが不可欠だ。

ベータテストは、開発経験の有無を問わない。普段使っているプラグインやテーマとの組み合わせで問題が起きないかを確認するだけでも、リリースの品質向上に大きく貢献できる。公式のテストガイドには、特に重点的に確認すべき項目がまとめられている。

問題を見つけたら
STEP 1 サポートフォーラムのAlpha/Betaエリアに投稿
STEP 2 再現手順が明確ならWordPress Tracでバグ報告
STEP 3 既知のバグ一覧と照合して重複を避ける

不具合の報告はフォーラムへの投稿で十分だ。再現手順を明確に説明できる場合は、Tracでのチケット発行が推奨される。報告の前に既知のバグ一覧を確認すれば、重複を避けられ、開発チームの負荷も減らせる。

7.1正式版に向けた最終段階

7.1正式版に向けた最終段階

WordPress 7.1のリリーススケジュールは、2026年8月19日が最終目標だ。8月16日から19日まで開催されるWordCamp US 2026の会期と重なるタイミングでのリリースは、コミュニティにとっても大きな節目となるだろう。

今回のBeta 3では、スタイル管理の柔軟性向上に加え、メディア処理の安定化、Notes機能やレスポンシブスタイリング、カスタムCSSに関するエディタの修正も含まれている。開発者向けには、WordPress Coding Standardsがバージョン3.4.0に更新された。

一方で、Unicodeメールアドレス対応は7.1への搭載が見送られることが決まった。この機能はコミュニティプラグインとして開発が継続され、互換性やセキュリティ面の検証がより広範囲に行われる予定だ。

なお、7月17日にはBeta 2がWordPress 7.0.2のリリースの一環として公開されており、重要なセキュリティ修正が含まれている。テスト環境を最新の状態に保つ際は、この点にも注意が必要だ。

この記事のポイント

  • Apply globally機能にレビューステップが追加され、スタイル変更を部分的にグローバル適用できるようになった
  • 長尺GIFの処理停止やSafariでのHEIC二重登録など、メディアアップロードの実用的な不具合が修正された
  • テスト参加はプラグイン、直接ダウンロード、WP-CLI、Playgroundの4経路から選択可能
  • Unicodeメールアドレス対応は7.1への搭載が見送られ、コミュニティプラグインとして開発が継続される
  • 正式リリースは2026年8月19日、WordCamp US 2026の開催期間と重なるタイミングで公開予定
WordPressエディタが真っ白になる原因と直し方

WordPressエディタが真っ白になる原因と直し方

管理画面のブロックエディタを開いた際に編集エリアが完全に白紙になる主な原因は、プラグインやテーマの競合、または PHP の致命的エラーだ。まず標準テーマへの切り替えと全プラグインの無効化で原因を特定し、それでも解決しない場合はデバッグモードでエラーログを確認する。

エディタ画面が真っ白になる根本的な原因

エディタ画面が真っ白になる根本的な原因

WordPress のブロックエディタ(Gutenberg)で編集画面を開いたときに真っ白なページしか表示されない現象は、大きく分けて 2 つの原因で発生する。1 つはプラグインやテーマの競合、もう 1 つは PHP の致命的エラー(「このサイトで重大なエラーが発生しました」と表示される類のもの)だ。

ブロックエディタは JavaScript を多用する高度な画面であり、複数のプラグインが読み込むスクリプト同士で競合が起きると、画面の描画が完全に停止してしまう。またテーマが古い jQuery や独自のエディタ拡張をロードしている場合も、エディタの初期化処理と衝突して空白画面を引き起こす。

PHP の致命的エラーが原因の場合は、エディタ画面そのものが生成される前に処理が中断されている状態だ。たとえばメモリ不足や、特定のプラグインが要求する PHP 拡張機能の不足、あるいは functions.php に記述された独自コードの文法ミスなどが該当する。こうしたエラーは管理画面全体に影響する場合もあるが、投稿編集画面だけが重い処理を要求するタイミングで発覚することも多い。

■ 白紙エディタの主な原因
JavaScript の競合
複数のプラグインやテーマが読み込むスクリプトが衝突し、エディタの初期化が止まる
↓
PHP の致命的エラー
メモリ不足・プラグインの不具合・functions.php の記述ミスなどで画面生成前に停止
↓
REST API の障害
セキュリティプラグインやサーバー設定が WordPress の REST API 通信を遮断している

プラグインとテーマの競合を切り分ける手順

プラグインとテーマの競合を切り分ける手順

まず最初に試すべきは、プラグインの全無効化と標準テーマへの切り替えだ。この手順だけで多くの白紙エディタ問題は解決する。管理画面にアクセスできる状態であれば、以下の流れで原因を特定できる。

STEP 1 管理画面の「プラグイン」→「インストール済みプラグイン」で全プラグインを一括無効化する
↓
STEP 2 「外観」→「テーマ」で Twenty Twenty-Five などの標準テーマを有効化する
↓
STEP 3 エディタを再度開き、正常に表示されるか確認する
↓
STEP 4 正常化したらプラグインを 1 つずつ再有効化し、問題が再発するタイミングで原因を特定する
■ STEP 1〜2 でほとんどの問題が解決する

Health Check プラグインで訪問者に影響を与えずに調査する

本番サイトでプラグインを一括無効化すると、訪問者に見えているサイトのレイアウトが一時的に崩れるリスクがある。プラグイン「Health Check & Troubleshooting」を導入すれば、自分がログインしている間だけプラグイン無効化とテーマ切り替えが適用され、一般の訪問者には通常通りの表示が保たれる。

「Health Check & Troubleshooting」は WordPress.org の公式プラグインディレクトリから無料でインストールできる。有効化後に「トラブルシューティング」タブを開き「トラブルシューティングモードを有効にする」ボタンを押すだけで、安全に調査を開始できる。特定のプラグインだけを個別に再有効化しながら編集画面の挙動を確認できるため、競合元の絞り込みに非常に有効だ。

テーマの functions.php が原因になるケース

標準テーマに切り替えた途端にエディタが正常化した場合、それまで使っていたテーマ(あるいは子テーマ)の functions.php に問題がある可能性が高い。よくあるのは、エディタ向けのカスタムスタイルやブロック追加のコードが WordPress のバージョンアップ後に非推奨の関数を使い続けているケースだ。

functions.php の中で add_action('enqueue_block_editor_assets', ...) や add_filter('block_editor_settings_all', ...) を使ってエディタに介入している箇所があれば、それらを一旦コメントアウトして様子を見ると原因の切り分けになる。

デバッグモードでエラーログを取得する

デバッグモードでエラーログを取得する

プラグインとテーマの切り分けでも解決しない場合、PHP の致命的エラーが発生している可能性が高い。画面には何も表示されないが、裏側でエラーが起きている。そこで WordPress のデバッグモードを有効にして、エラーログをファイルに記録させる。

wp-config.php にデバッグ定数を追加する

FTP やレンタルサーバーのファイルマネージャーでサーバーに接続し、WordPress のルートディレクトリにある wp-config.php を編集する。ファイル末尾の /* That's all, stop editing! */ よりも手前に、以下の 3 行を追加または上書きする。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

WP_DEBUG を true にするとデバッグモードが有効になる。WP_DEBUG_LOG を true にすると、エラーの内容が /wp-content/debug.log ファイルに出力される。WP_DEBUG_DISPLAY を false にしておけば、エラーが画面に表示されず、訪問者にも影響が出ない。

設定後に問題のエディタ画面を再度開き、その後 /wp-content/debug.log をテキストエディタで開く。PHP のエラーメッセージが記録されていれば、どのファイルの何行目で問題が起きているかが具体的にわかる。たとえば「Allowed memory size of 〜 bytes exhausted」ならメモリ不足、「Call to undefined function 〜」なら関数の未定義が原因だと絞り込める。

debug.log でよく見られるエラーと対処
メモリ不足
「Allowed memory size of 〜 bytes exhausted」→ wp-config.php で define('WP_MEMORY_LIMIT', '256M'); を追加
未定義の関数
「Call to undefined function 〜」→ 該当のプラグイン/テーマを最新版に更新するか無効化
正常な場合
debug.log が空、または Notice/Warning のみ → PHP エラーは原因ではない

ブラウザの開発者ツールで JavaScript エラーを確認する

ブラウザの開発者ツールで JavaScript エラーを確認する

PHP のエラーログに何も記録されていない場合、JavaScript の実行時エラーが原因でエディタが空白になっている可能性が高い。この場合はブラウザの開発者ツールを使う。

Chrome の場合、編集画面を開いた状態でキーボードの F12 キーを押して開発者ツールを起動し、「Console」タブを選択する。赤いエラーメッセージが表示されていれば、それがエディタの読み込みを止めている原因だ。Uncaught TypeError や Uncaught ReferenceError のようなエラーが出ていれば、特定のスクリプトが正しく動作していないことを示している。

エラーの内容にプラグイン名やテーマ名が含まれていることが多いため、そのプラグインを無効化すれば問題が解決する。コンソールにエラーが一切出ていない場合は、REST API の通信が遮断されているケースが疑われる。開発者ツールの「Network」タブで、wp-json を含むリクエストが赤く表示されていないか確認する。401(認証エラー)や 403(禁止)が返っている場合は、セキュリティプラグインやサーバー側の WAF(Web アプリケーションファイアウォール)が REST API をブロックしている可能性が高い。

よくある質問

プラグインを無効化する管理画面すら真っ白で開けない場合はどうするのか

FTP またはレンタルサーバーのファイルマネージャーで /wp-content/plugins/ ディレクトリにアクセスし、プラグインフォルダを一時的に別の名前にリネームする。たとえば plugin-name を _plugin-name に変更すれば、WordPress はそのプラグインを認識しなくなり、管理画面にアクセスできるようになる。

特定のページだけエディタが真っ白になるのはなぜか

特定のページに埋め込まれたショートコードやブロックが、対応するプラグインの JavaScript エラーを引き起こしている可能性が高い。またページのリビジョン数が極端に多い場合も、エディタの読み込みが重くなりタイムアウトすることがある。リビジョンを整理するか、該当ページを複製して編集し直すと改善する場合がある。

ブラウザを変えても同じ症状か確認したほうがよいか

確認する価値はある。まれにブラウザの拡張機能(特に広告ブロッカーやセキュリティ系)がブロックエディタのスクリプトを遮断しているケースがある。シークレットウィンドウや別のブラウザでログインして編集画面を開き、同じ症状が出るかどうかを見ると、ブラウザ側の要因かどうかを切り分けられる。

WordPress 本体の再インストールは効果があるか

コアファイルの破損が疑われる場合に限り効果がある。管理画面の「ダッシュボード」→「更新」から「WordPress を再インストール」を選ぶと、コアファイルだけがクリーンな状態に置き換わる。テーマやプラグイン、データベースには影響しないため、手軽に試せる。ただしプラグインの競合や PHP エラーが原因の場合は再インストールしても改善しない。

編集画面が真っ白な状態で記事を更新する応急的な方法はあるか

ブロックエディタが使えない場合の回避策として、クラシックエディタプラグインを有効化する方法がある。旧式の編集画面に切り替わるため、JavaScript の競合の影響を受けにくい。根本解決ではないが、急ぎの更新作業が必要な場合の一時的な回避策として使える。また「QuickPost」のような外部ツールを使う方法もあるが、環境に依存するため万能ではない。

この記事のポイント

  • エディタの白紙はプラグイン/テーマ競合か PHP エラーが主因
  • 全プラグイン無効化と標準テーマ有効化で原因を切り分ける
  • Health Check プラグインで訪問者に影響なく調査できる
  • wp-config.php のデバッグ設定でエラーログを取得する
  • ブラウザの開発者ツールで JavaScript エラーも確認する
WordPressのアコーディオンブロックが開かない原因と直し方

WordPressのアコーディオンブロックが開かない原因と直し方

WordPress 6.9のアコーディオンブロックをクリックしても展開しない場合は、ページ読み込み時にブロックのJavaScriptが正しく初期化されていないことが原因だ。キャッシュを完全に削除し、プラグインの競合を確認することで大半のケースは解決する。改善しない場合はテーマの読み込み順を調整する。

なぜアコーディオンブロックが展開しないのか

なぜアコーディオンブロックが展開しないのか

この現象は、アコーディオンブロックの内部で使われる view.min.js が、ページの読み込み完了前にクリックイベントを受け取ってしまうことで起きる。具体的には、ブロックの状態(開閉のデータ)がまだ存在しないタイミングで「開く」処理が実行され、「未定義のプロパティを読めない」というTypeErrorが発生するという仕組みだ。

読み込み速度が極端に速い場合も、逆に特定のスクリプトが遅延して遅くなった場合も、内部のタイミングがずれて初期化が完了しないまま操作できてしまう。Twenty Twenty-Fiveテーマに限らず、他のテーマやプラグインがページの読み込み順を変えていると同様の症状が出ることがある。

■ エラー発生時の状態
ページ読み込み → アコーディオンブロックのJS読み込みが完了する前 → ユーザーがクリック → c が undefined → エラー
↓
■ 正常な状態(修正後)
ページ読み込み → JSの初期化が完全に終わる → クリック可能 → 開く/閉じるが動作
■ エラー状態 ■ 修正後

JavaScriptエラーの原因を開発者ツールで確認する方法

まずエラーが出ているか正確に把握する。ChromeやEdgeのデベロッパーツール(F12キー)を開き、Consoleタブを確認する。該当ページでアコーディオンをクリックした瞬間に赤いエラーメッセージが出ていれば、今回の症状に合致する。

エラー文は日本語環境でも英語で「Uncaught TypeError: Cannot read properties of undefined (reading ‘isOpen’)」と表示される。ファイル名に view.min.js が含まれていれば、WordPress 6.9の標準アコーディオンブロックの初期化問題だと特定できる。

アコーディオンが開かない場合の5つの対処法

アコーディオンが開かない場合の5つの対処法

以下の手順は、簡単で効果が高いものから順に並べている。1つずつ試し、改善した時点で後続の手順は不要だ。

STEP 1 サイト全体のキャッシュを削除する
↓
STEP 2 プラグインをすべて無効化する
↓
STEP 3 テーマをTwenty Twenty-Fiveのままでリセットする
↓
STEP 4 子テーマのfunctions.phpでスクリプト読み込み順を調整する

サイト全体のキャッシュを完全に削除する

キャッシュ系プラグイン(W3 Total CacheやWP Super Cacheなど)を導入している場合は、管理画面から全キャッシュを削除する。加えてサーバー側のキャッシュ(NGINX FastCGI CacheやLiteSpeed Cache)もクリアする。ブラウザキャッシュを個別に消すよりも、プラグインやサーバー管理パネルからの一括削除のほうが確実だ。

全プラグインを無効化して原因を特定する

プラグインのいずれかがJavaScriptの読み込み順やタイミングに干渉している可能性がある。「プラグイン」→「インストール済みプラグイン」からすべてのプラグインを一時的に無効化し、アコーディオンブロックの動作を確認する。問題が解消したら、1つずつ有効に戻していき、再発するプラグインを特定する。

この方法で原因プラグインが判明した場合、そのプラグインの代替を探すか、開発元に修正を依頼するのが現実的だ。特にJavaScriptを多用するページビルダーや最適化系プラグインは干渉しやすいので注意する。

テーマの状態をリセットする

子テーマやカスタマイズを行っている場合は、一時的に親テーマのTwenty Twenty-Fiveに直接切り替える。必要に応じて「外観」→「テーマ」から親テーマを有効化し、カスタマイザーで追加した独自のCSSやJavaScriptが干渉していないか切り分ける。

functions.phpでスクリプト読み込み順を調整する

上記の手順で解決しない場合、テーマやプラグインの読み込み順が影響している可能性が高い。子テーマの functions.php に以下のコードを追加し、WordPress標準のスクリプトをより早い段階で読み込ませる方法が有効だ。

<?php
function force_accordion_script_priority() {
    if ( has_block( 'core/accordion' ) ) {
        wp_enqueue_script( 'wp-block-library' );
        // モジュールスクリプトの読み込みを優先
        add_filter( 'script_loader_tag', function( $tag, $handle ) {
            if ( false !== strpos( $handle, 'accordion' ) ) {
                $tag = str_replace( 'defer', '', $tag );
            }
            return $tag;
        }, 10, 2 );
    }
}
add_action( 'wp_enqueue_scripts', 'force_accordion_script_priority', 5 );

このコードは、アコーディオンブロックがページ内に存在する場合にだけ動作し、defer 属性を除去して読み込みの優先度を上げる。極端な遅延読み込みが原因でエラーが起きている場合に効果を発揮する。

そもそもこのエラーが起きる条件とは

そもそもこのエラーが起きる条件とは

このエラーはWordPress 6.9の標準ブロックに含まれる view.min.js のタイミング依存が直接の原因だ。以下のような条件が重なると発生しやすい。

  • 高速なサーバー環境やCDNによってHTMLの描画が極端に速い
  • 最適化プラグインがスクリプトに defer や async を追加している
  • ページビルダーが独自の方法でスクリプトを結合・遅延読み込みしている
  • カスタムテーマが wp_head() や wp_footer() を正しく呼び出していない

いずれも、WordPressが想定するスクリプトの読み込み順序が変更されることで、ブロックの状態管理オブジェクトが生成される前にクリックイベントのリスナーが機能し始めてしまう点で共通している。

再発を防ぐための設定ポイント

再発を防ぐための設定ポイント

この問題を恒久的に避けるには、スクリプト最適化の設定を見直すのが最も効果的だ。キャッシュプラグインや高速化プラグインの「JavaScriptの遅延読み込み」「結合」「minify」などの機能を無効化するか、該当ブロックだけ除外設定を追加する。

具体的には、プラグインの設定画面で「遅延読み込みの除外」に view.min.js または accordion を含むパスを指定する。多くの高速化プラグインでは、特定のスクリプトハンドルやファイル名を除外リストに登録できる。

また、WordPressのアップデートによってコア側の修正が入る可能性も高い。そのため、WordPress本体とテーマは常に最新の状態を維持し、修正が公式にリリースされ次第適用することも大切だ。

よくある質問

特定のブラウザだけで起きるのか

いいや、ブラウザの種類よりもページの読み込み速度やスクリプトの実行順序に左右される。Chrome、Edge、Firefox、Safariのいずれでも発生しうる。特定のブラウザだけで再現する場合は、ブラウザ拡張機能の影響も疑うとよい。

プラグインをすべて無効にしても直らない場合は

テーマに原因がある可能性が高い。一度Twenty Twenty-Fiveの親テーマを直接有効化し、それでも改善しなければサーバー側のキャッシュ機構やCDNの設定を見直す。functions.phpに追加したカスタムコードが干渉しているケースもある。

キャッシュをクリアしても改善しないときの次の手順は

ブラウザのシークレットウィンドウでテストし、ブラウザキャッシュを完全に排除した状態で確認する。それでも同じエラーが出るなら、上記のSTEP 4のコード追加を試すか、WordPress本体の再インストールを検討する。

このエラーはWordPressのバグなのか

厳密にはタイミング依存のバグであり、WordPress 6.9に標準で含まれる view.min.js に起因する。今後のアップデートで修正される見込みだが、現時点ではサーバー環境やプラグイン構成によって発生が左右されるため、回避策を講じるのが現実的だ。

テーマ側で何かできることはあるか

ある。先述のfunctions.phpによる defer 属性の除去のほか、テーマが wp_footer() の直前に不要なスクリプトを挿入していないか確認することも有効だ。シンプルなテーマほどこの問題は起こりにくい。

この記事のポイント

  • アコーディオンが開かない原因はJavaScript初期化のタイミングずれ
  • キャッシュの全削除とプラグイン全無効化でほぼ修正できる
  • 改善しなければfunctions.phpでスクリプト優先度を上げる
  • 最適化プラグインの設定で view.min.js を除外登録する
  • WordPress本体とテーマは常に最新版を保つ