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のコードネーム「Mary Lou」は、ジャズピアニストのメアリー・ルー・ウィリアムズに由来する。彼女はスウィング、ビバップ、セイクリッドジャズとジャンルを横断しながら常にサウンドを再発明し続けた。その革新と協働の精神が今回のリリースに反映されている。
リリース全体の規模を見ると、世界中から800人以上の貢献者が参加し、170人以上が初めてコントリビュートした。修正と改良の総数は1,500を超える。主要な変更点は、レスポンシブスタイルのビジュアル編集、管理バーの全エディタ対応、新しいメディアエディタ、Notes機能の拡張、PlaylistとTabsの2つの新ブロック、そして開発者向けAPI群の公開だ。
このデモでは、WordPress 7.1の主要な変更点を分野別に色分けして示している。青がレスポンシブ対応、橙がメディア編集、紫がコラボレーション、緑がパフォーマンス、赤が新ブロックを表す。
今回のリリースの特徴を一言でまとめると、「サイト制作の作業導線を管理画面内に集約する」方向性が鮮明になったことだ。従来はCSSファイルの編集や複数の画面を行き来する必要があった作業が、ブロックエディタやサイトエディタの中で完結するようになっている。特に中小企業のサイト担当者にとっては、外注や開発者への依頼なしで調整できる範囲が広がる。
レスポンシブスタイルと管理バーの改善
カスタムCSSなしのレスポンシブ対応
WordPress 7.1では、サイトエディタのグローバルスタイルと個別ブロック設定の両方にレスポンシブコントロールが追加された。具体的には、デスクトップ・タブレット・モバイルの各画面サイズでブロックの表示をどう変えるかを、ビジュアル操作だけで設定できる。
編集中の画面でビューポート（表示領域の幅）を切り替えながらスタイルを調整できるため、仕上がりを確認しやすい。従来のようにカスタムCSSでメディアクエリを手書きする必要がない。この変更は、コーディングに不慣れなユーザーにとって特に大きな意味を持つ。
このデモでは、従来のカスタムCSSによる対応と、WordPress 7.1のビジュアル編集による対応の違いを示している。上段の赤い枠がBefore、下段の緑の枠がAfterを表す。CSSの記述が不要になり、プレビューを見ながら調整できるようになった点が大きな変化だ。
管理バーがすべてのエディタで表示される
管理バーがサイトエディタを含むすべてのエディタで追従するようになった。投稿執筆中でもサイトデザインの編集中でも、ダッシュボードや関連ツールへのショートカットが常に画面上部に表示される。WordPressの管理画面を行き来する手間が減り、作業導線が分断されにくくなった。
さらに、ブロックテーマではテーマの設定ファイル（theme.json）にタブレットとモバイルのブレークポイントを独自に定義できるようになった。レスポンシブスタイルとブロック表示の切り替えに使う画面幅の基準を、サイトごとに調整できる。
メディア編集の刷新と画像処理の高速化
新しいメディアエディタ
従来はインラインで行われていた画像の切り抜きが、新しいモーダル形式のメディアエディタに置き換わった。自由な切り抜き、アスペクト比を固定した切り抜き、水平・垂直の反転、細かな角度調整ができるスナップ回転、そしてメタデータ編集が1つの専用画面に統合されている。
エントリーポイントは従来と同じ「切り抜き」ボタンのまま。既存の操作感を維持しつつ、機能が大幅に拡張されたかたちだ。画像編集のためにプラグインを追加していたユーザーにとっては、標準機能だけで済むケースが増える。
このデモは、新しいメディアエディタの操作手順を4ステップで示している。青・緑・橙・紫の順に進み、1つのモーダル内で画像編集からメタデータ更新まで完結する流れが分かる。
ブラウザ内での画像処理
画像の圧縮・リサイズ・サムネイル生成が、サーバーではなくブラウザ内で実行されるようになった。libvipsのWebAssemblyビルドを利用しており、大きな画像をアップロードしてもPHPのメモリ制限やアップロードタイムアウトに引っかかりにくくなる。
サーバー負荷の軽減は、共有サーバーや低スペックのレンタルサーバーを利用しているサイトにとって特に有効だ。画像の多いメディアサイトやECサイトでは、アップロード時のタイムアウトエラーが減ることが期待できる。
対応画像形式も拡充された。AVIF、HEIC、HDRゲインマップのネイティブサポートが追加され、最新のスマートフォンやカメラで撮影した画像をそのまま扱えるようになった。GIFを動画に自動変換するオプションもあり、ファイルサイズの削減が進む。
Notes機能の進化とコラボレーション強化
WordPress 7.1では、コンテンツのレビュー作業を支援するNotes機能が大幅に拡張された。従来はブロック単位でしかコメントを残せなかったが、今回から特定のテキスト範囲に対してノートを付けられるようになった。
リッチテキストにも対応した。太字、斜体、コード表示、リンクの挿入がノート内で使える。さらに「@」を入力すると共同編集者をメンションでき、通知が飛ぶ。複数の会話を同じブロック内で並行して進められるほか、長いノートを折りたたんでサイドバーをすっきり保つことも可能だ。
この機能強化は、複数人で記事をレビューする編集部や、クライアントとの校正作業を行う制作会社にとって実用的な価値がある。フィードバックの場所が明確になり、メールやチャットでのやり取りをWordPress内に集約できる。
執筆中の投稿エディタも全テーマでiframe化された。編集キャンバスが管理画面のスタイルから分離されるため、テーマのCSSが管理画面のスタイルと衝突しにくくなる。ビューポート単位やメディアクエリが編集キャンバスを正確に参照するようになり、レスポンシブレイアウトのプレビュー精度が向上した。
新ブロックと開発者向け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が公開された
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WordPress 7.1正式版が8月19日リリース。レスポンシブスタイルと疑似状態の全容
WordPress 7.1の正式版が2026年8月19日にリリースされる。WordCamp US最終日と重なるタイミングで、すでにRC1とRC2が公開され、機能セットは確定済みだ。先月にはセキュリティリリース2件も出ており、影響を受けるサイトは自動更新が強制された。
今回のアップデートで注目が大きいのは、レスポンシブブロックスタイルと疑似状態スタイルのコア導入だ。テーマ開発者はモバイルとタブレットの表示をtheme.jsonだけで制御できるようになる。プラグイン開発者もリストテーブルの構造変更に注意が必要だ。正式版まで残り数日、互換性確認のポイントを解説する。
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のテストはその後でかまわない。
レスポンシブスタイルがコアに登場
上記の図は、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つの状態を並べて示したものだ。実際の編集画面では「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つある。グラデーションと背景画像を同時に使えるようになるのは特に大きい。
背景グラデーションと背景画像を併用可能に
新しい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が正式公開
アイコン名の衝突を防ぐため、コレクション名が名前空間の接頭辞になる。プラグイン独自のアイコンを登録しても、コアのアイコンと混同される心配がない。
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化されたのは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化され、リストテーブルの行ヘッダー移動も要確認
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
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の記事でも「『この部分を言い換えてほしい』という指示が、長い段落の中のどの単語を指すのかを推測する必要がなくなった」と評価されている。
このように、修正箇所と指示がピンポイントで結びつくため、レビューにかかる時間が劇的に短縮される。
その他の改善点
- 同じブロックに対して複数のノートスレッドを立てられる。議題ごとに会話を分離できる
- ノート本文に太字、斜体、コード、リンク、絵文字を使ったリッチテキストが可能
- 長いノートは初期状態で折りたたまれ、サイドバーが散らからない
CSS不要のビジュアルスタイリングが編集画面で完結
WordPress 7.1で最もインパクトが大きいのが、レスポンシブデザインのビジュアル操作である。これまではスマホやタブレット用の見た目を調整するには、CSSメディアクエリを手書きするか、テーマの設定に頼るしかなかった。今回のアップデートで、ブロックエディタ上でプレビューを切り替えながら、直感的にスタイルを設定できるようになる。
端末別のスタイル設定
エディタ上部のプレビュー切り替えで「デスクトップ」「タブレット」「モバイル」を選択すると、以降のブロックスタイルの操作はその画面サイズにだけ適用される。たとえばモバイル表示を選んで見出しのフォントサイズを小さくすれば、実際のスマホでの表示だけが変わる。デスクトップ表示には影響しない。
さらに、ブロック設定パネルには、現在どの画面サイズを編集中かを示す小さなバッジが表示される。意図しない画面用のスタイルを上書きしてしまうミスを防げる。エディタキャンバス自体も、プリセットの3サイズに縛られず、横幅をドラッグして任意の幅での表示をリアルタイムに確認できるようになった。テーマがtheme.jsonで独自のブレイクポイントを定義していれば、その値に合わせたプレビューも可能である。
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不要で行える
- タブブロックとプレイリストブロックがコアに加わり、コンテンツ表現の幅が広がった
- 画像編集モーダルとブラウザベースの画像処理で、メディアまわりの操作性と安定性が向上
- 管理ツールバーの常時表示やアイデンティティ設定の集約など、管理画面の使い勝手が改善された
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
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要素
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の機能を認識させ、「この画像から投稿を作成して」と自然言語で指示するだけで、プラグインの能力が裏側で呼び出される。
同じ能力が3つの入口からシームレスに使える
上の図はAbilities APIの最大のメリットを示している。一度登録すれば、UI、REST、AIエージェントのどこからでも同一の能力を実行できる。エンドポイントごとに別の処理を書く必要はない。
プラグイン「Photo to Post」の仕組み
チュートリアルで構築する「Photo to Post」は、画像URLを入力するとAIが画像の内容を解析し、その説明文をもとにブログ投稿用のタイトルと本文を生成、さらにその画像をアイキャッチに設定した下書き投稿を作成するプラグインだ。
内部では、3つのAbilityが連携している。ここで重要なのは、最後の能力が他の能力を呼び出す「能力の合成（composition）」を実践している点だ。
この合成パターンは、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つを登録する。
能力を登録したら、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ビルディングブロックは、単なる補助機能ではない。プラグイン開発のパラダイムを「単一の機能提供」から「再利用可能な能力の提供と合成」へとシフトさせる可能性を秘めている。
さらに、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ブロック」のように複雑な自動化を実現
- 実運用ではタイムアウト延長フィルタなど、実装上の注意点も必要
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WordPress 7.1 Beta 3リリース、グローバルスタイル適用の改善点を解説
Beta 3がもたらす現場へのインパクト
WordPress 7.1の正式リリースは2026年8月19日に迫っている。今回公開されたBeta 3は、単なるバグ修正の積み上げではない。ブロックエディタのスタイル管理に根本的な考え方の変更をもたらす機能が含まれている点が最大の注目点だ。
具体的には、「Apply globally（グローバルに適用）」機能の改善だ。これまで、あるブロックに加えたスタイル変更をサイト全体に反映させる操作は、すべての変更を一括で上書きするか、まったく適用しないかの二者択一だった。この「全か無か」の動作は、実際のデザインワークフローにおいて多くの小さなストレスを生んでいた。
Beta 3で導入された改良では、適用前にレビューステップが挿入される。これにより、変更したスタイルのうち、どれをグローバルに適用し、どれをそのブロックだけのローカルな変更として残すかを選択できるようになる。部分的なグローバル適用が可能になることで、サイト全体のデザイン整合性を保ちながら、特定のブロックだけ微調整するという、現実的な運用が格段にやりやすくなった。
このレビューステップの導入により、デザイナーやサイト運営者は「うっかり全ブロックのスタイルを壊してしまった」というヒヤリハットから解放される。部分的な適用が可能になったことで、より積極的にグローバルスタイルを活用できるようになるだろう。
メディアアップロードの地味だが確実な改善
Beta 3には、日々の運用で遭遇しがちなメディア関連のバグ修正も含まれている。長尺のGIFアニメーションをアップロードした際に処理が停止してしまう問題が解消された。また、EXIFメタデータで回転情報が埋め込まれた画像が、正しい向きで処理されるようになった。
Safariブラウザで単一のHEIC画像をアップロードすると、誤ってエントリーが二重に作成される問題も修正されている。これらの修正は派手さこそないが、クライアントワークで大量の画像を扱う制作会社や、更新頻度の高いメディアサイトの運用者にとっては、地味に嬉しい改善と言える。
テストに参加する4つの方法
WordPress 7.1 Beta 3は、本番サイトでの使用を想定していない。あくまでテストと開発を目的としたリリースだ。テスト環境は、ローカルPC上のLocal by FlywheelやDevKinsta、あるいはXAMPPやDockerを使った手動セットアップなど、普段使い慣れたもので問題ない。
テスト環境を用意したら、以下のいずれかの方法でBeta 3を入手できる。
特にWordPress Playgroundは、データベースすら必要としないブラウザ完結型のテスト環境だ。とりあえず新機能を触ってみたいという場合には、最もハードルが低い選択肢だろう。
なぜベータテストへの参加が重要なのか
WordPressのメジャーバージョンアップは、世界中のサイトに影響を及ぼす。7.1では、Beta 1以降だけでも71件以上の課題が修正されている。これらの修正の質を高めるには、多様な環境でのテストが不可欠だ。
ベータテストは、開発経験の有無を問わない。普段使っているプラグインやテーマとの組み合わせで問題が起きないかを確認するだけでも、リリースの品質向上に大きく貢献できる。公式のテストガイドには、特に重点的に確認すべき項目がまとめられている。
不具合の報告はフォーラムへの投稿で十分だ。再現手順を明確に説明できる場合は、Tracでのチケット発行が推奨される。報告の前に既知のバグ一覧を確認すれば、重複を避けられ、開発チームの負荷も減らせる。
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の開催期間と重なるタイミングで公開予定
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験
WordPressエディタが真っ白になる原因と直し方
管理画面のブロックエディタを開いた際に編集エリアが完全に白紙になる主な原因は、プラグインやテーマの競合、または PHP の致命的エラーだ。まず標準テーマへの切り替えと全プラグインの無効化で原因を特定し、それでも解決しない場合はデバッグモードでエラーログを確認する。
エディタ画面が真っ白になる根本的な原因
WordPress のブロックエディタ（Gutenberg）で編集画面を開いたときに真っ白なページしか表示されない現象は、大きく分けて 2 つの原因で発生する。1 つはプラグインやテーマの競合、もう 1 つは PHP の致命的エラー（「このサイトで重大なエラーが発生しました」と表示される類のもの）だ。
ブロックエディタは JavaScript を多用する高度な画面であり、複数のプラグインが読み込むスクリプト同士で競合が起きると、画面の描画が完全に停止してしまう。またテーマが古い jQuery や独自のエディタ拡張をロードしている場合も、エディタの初期化処理と衝突して空白画面を引き起こす。
PHP の致命的エラーが原因の場合は、エディタ画面そのものが生成される前に処理が中断されている状態だ。たとえばメモリ不足や、特定のプラグインが要求する PHP 拡張機能の不足、あるいは functions.php に記述された独自コードの文法ミスなどが該当する。こうしたエラーは管理画面全体に影響する場合もあるが、投稿編集画面だけが重い処理を要求するタイミングで発覚することも多い。
複数のプラグインやテーマが読み込むスクリプトが衝突し、エディタの初期化が止まる
メモリ不足・プラグインの不具合・functions.php の記述ミスなどで画面生成前に停止
セキュリティプラグインやサーバー設定が WordPress の REST API 通信を遮断している
プラグインとテーマの競合を切り分ける手順
まず最初に試すべきは、プラグインの全無効化と標準テーマへの切り替えだ。この手順だけで多くの白紙エディタ問題は解決する。管理画面にアクセスできる状態であれば、以下の流れで原因を特定できる。
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 〜」なら関数の未定義が原因だと絞り込める。
「Allowed memory size of 〜 bytes exhausted」→ wp-config.php で
define('WP_MEMORY_LIMIT', '256M'); を追加「Call to undefined function 〜」→ 該当のプラグイン/テーマを最新版に更新するか無効化
debug.log が空、または Notice/Warning のみ → PHP エラーは原因ではない
ブラウザの開発者ツールで 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 エラーも確認する
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている
WordPressのアコーディオンブロックが開かない原因と直し方
WordPress 6.9のアコーディオンブロックをクリックしても展開しない場合は、ページ読み込み時にブロックのJavaScriptが正しく初期化されていないことが原因だ。キャッシュを完全に削除し、プラグインの競合を確認することで大半のケースは解決する。改善しない場合はテーマの読み込み順を調整する。
なぜアコーディオンブロックが展開しないのか
この現象は、アコーディオンブロックの内部で使われる view.min.js が、ページの読み込み完了前にクリックイベントを受け取ってしまうことで起きる。具体的には、ブロックの状態（開閉のデータ）がまだ存在しないタイミングで「開く」処理が実行され、「未定義のプロパティを読めない」というTypeErrorが発生するという仕組みだ。
読み込み速度が極端に速い場合も、逆に特定のスクリプトが遅延して遅くなった場合も、内部のタイミングがずれて初期化が完了しないまま操作できてしまう。Twenty Twenty-Fiveテーマに限らず、他のテーマやプラグインがページの読み込み順を変えていると同様の症状が出ることがある。
c が undefined → エラーJavaScriptエラーの原因を開発者ツールで確認する方法
まずエラーが出ているか正確に把握する。ChromeやEdgeのデベロッパーツール（F12キー）を開き、Consoleタブを確認する。該当ページでアコーディオンをクリックした瞬間に赤いエラーメッセージが出ていれば、今回の症状に合致する。
エラー文は日本語環境でも英語で「Uncaught TypeError: Cannot read properties of undefined (reading ‘isOpen’)」と表示される。ファイル名に view.min.js が含まれていれば、WordPress 6.9の標準アコーディオンブロックの初期化問題だと特定できる。
アコーディオンが開かない場合の5つの対処法
以下の手順は、簡単で効果が高いものから順に並べている。1つずつ試し、改善した時点で後続の手順は不要だ。
サイト全体のキャッシュを完全に削除する
キャッシュ系プラグイン（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本体とテーマは常に最新版を保つ
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている
ブロックエディタが点滅してクラッシュする時の原因と直し方
ブロックエディタの画面が激しく点滅し、操作不能になったりエラーでクラッシュする場合、原因の大半はブラウザ拡張機能やキャッシュ、プラグイン競合による JavaScript の競合だ。セーフモードでの編集とブラウザのトラブルシューティングを順に行えば、大半のケースはすぐに編集を再開できる。
なぜブロックエディタが点滅してクラッシュするのか
今回の事象の中心にあるのは getComputedStyle@[native code] から始まる JavaScript エラーだ。ブロックエディタは React ベースの画面であり、DOM 要素のスタイルを動的に計算する処理を多用している。この getComputedStyle 呼び出しが失敗すると、React の内部状態が破綻し、画面全体の再描画が無限ループに陥って「点滅」が発生する。
エラーが起きるトリガーは主に以下の3つだ。
- AdBlock や Grammarly、翻訳ツールなど、ページの DOM 構造を書き換えるブラウザ拡張機能がエディタの動作と衝突している
- プラグインやテーマが独自に読み込む古い JavaScript ライブラリが、WordPress 本体のバンドル済み React と二重読み込みになっている
- ブラウザやサーバーに残ったキャッシュが、更新後のスクリプトと旧バージョンのスクリプトを混在させている
点滅はエディタが「レンダリング → クラッシュ → 再マウント → レンダリング」を一瞬で繰り返すために起こる。ユーザーからは、画面全体がチカチカしてボタンやブロックをクリックできない、またはクリックした瞬間に「このブロックでエラーが発生しました」と表示されて操作不能になる状態として見える。
エディタ画面全体が高速で明滅し、ブロックを選択できない。クリックすると「このサイトで重大なエラーが発生しました」と表示される。
エディタが安定し、ブロックの選択・編集・移動が問題なく行える。画面のちらつきは完全に消えている。
ビジュアルエディタの点滅を止めて編集を再開する手順
原因を一つずつ潰していくのが確実だ。以下の手順は、影響範囲が小さくすぐ試せるものから並べている。手順1〜3で解決しなければ、手順4以降の WordPress 内部の切り分けに進む。
ブラウザ拡張機能をすべて無効にして試す
最も短時間で試せて、かつ最も解決率が高い対処だ。ブロックエディタは高度な JavaScript で動作しており、広告ブロッカーや文法チェッカーなどの拡張機能が DOM に手を加えると、React の仮想 DOM と実際の DOM の整合性が崩れて getComputedStyle エラーが発生する。特に AdBlock 系、Grammarly、翻訳アドオン、ユーザースクリプト（Tampermonkey 等）が競合しやすい。
Chrome の場合、アドレスバー右の拡張機能アイコンから「拡張機能を管理」を開き、すべての拡張機能を一度オフにする。その状態でエディタを開き直し、点滅が収まるかを確認する。収まった場合は、拡張機能をひとつずつオンにして犯人を特定する。
シークレットウィンドウかゲストモードで動作を確認する
拡張機能を一括で無効化できるもっと手軽な方法が、シークレットウィンドウ（Chrome は Ctrl+Shift+N、Firefox は Ctrl+Shift+P）だ。シークレットモードでは拡張機能がデフォルトで無効になるため、ここで問題が再現しなければ、原因はほぼ確実に拡張機能かブラウザのキャッシュにある。
別のブラウザ（普段 Chrome を使っているなら Firefox や Edge）をインストールし、拡張機能を何も入れていない状態でエディタにアクセスするのも有効な切り分けになる。複数ブラウザで同じエラーが出る場合は、拡張機能ではなく WordPress 側の問題の可能性が高い。
ブラウザキャッシュとサーバーキャッシュを削除する
WordPress のバージョンアップやプラグイン更新の直後に点滅が始まった場合、ブラウザに古い JavaScript ファイルがキャッシュされている可能性が高い。キャッシュされた古いスクリプトと、サーバー上の新しいスクリプトが混ざると、関数の呼び出し不一致で React がクラッシュする。
- ブラウザのキャッシュと Cookie を全期間で削除する（Chrome 設定→プライバシーとセキュリティ→閲覧履歴データの削除→「キャッシュされた画像とファイル」にチェック→全期間）
- サーバー側で W3 Total Cache や WP Super Cache などのキャッシュプラグインを使っている場合は、管理画面から「全キャッシュを削除」する
- Cloudflare などの CDN を利用している場合は、ダッシュボードでキャッシュをパージする
- 一部のレンタルサーバーで提供される独自キャッシュ機能もオフにする
セーフモードでプラグインの競合を切り分ける
ここまでの手順で解決しない場合、WordPress 内部で JavaScript の競合が起きている。特定のプラグインやテーマが、WordPress 本体がバンドルしている React とは別バージョンの React を読み込んでいたり、jQuery の古いバージョンや別の JavaScript ライブラリを強制的に読み込んでいるケースが多い。
全プラグインを一度に無効化すると管理画面まで影響が出る操作もあるため、WordPress のトラブルシューティングモード（Health Check & Troubleshooting プラグイン）を使うのが安全だ。このプラグインをインストールして有効化すると、管理画面のツールバーに「トラブルシューティングモード」ボタンが現れる。これを押すと、自分だけに影響するセッションで、すべてのプラグインが無効化され標準テーマに切り替わった状態でエディタをテストできる。他の訪問者には通常通りのサイトが表示される。
トラブルシューティングモードでエディタが正常に動けば、原因はプラグインかテーマにある。次にプラグインをひとつずつ有効化していき、どのプラグインを有効にした瞬間に点滅が再発するかを特定する。Health Check プラグインが使えない環境では、本番に近いテスト環境（ステージング）を作って同じ手順を行う。
テーマを標準テーマに切り替える
有料テーマやカスタマイズの多いテーマは、独自のページビルダーやアニメーションライブラリを読み込んでいることがある。プラグインをすべて無効化しても直らない場合、テーマが原因の可能性が高い。一時的に Twenty Twenty-Five などの標準テーマに切り替え、エディタの点滅が止まるか確認する。
テーマを切り替えるとウィジェットやメニュー構成が変わる可能性があるため、先にサイトのバックアップを取ることを推奨する。点滅がテーマに起因していた場合は、テーマの開発元に getComputedStyle エラーの情報を添えて問い合わせるか、子テーマで競合するスクリプトの読み込みを停止させる。
点滅エラーの詳細を開発者ツールで特定する方法
どうしても原因がわからない場合や、特定のプラグインをどうしても無効化できない事情がある場合は、ブラウザの開発者ツールで詳細なエラー情報を収集する。
- Chrome で F12 キー（開発者ツール）を開き、「Console」タブを確認する
- 赤いエラーメッセージの右に表示される「ソース」のリンクをクリックすると、エラーが発生している JavaScript ファイルと行番号が表示される
- ファイルパスに
/wp-content/plugins/プラグイン名/や/wp-content/themes/テーマ名/が含まれていれば、そのプラグインまたはテーマがエラーの発生源だ - 「Network」タブで、404 エラー（Not Found）になっている .js ファイルがないかも確認する。ファイルの読み込みに失敗していると、依存する React の処理が途中で止まりクラッシュする
これらの情報を、原因と思われるプラグインやテーマのサポートフォーラムに提出すれば、開発者側での修正も期待できる。エラーメッセージを丸ごとコピーして伝えるとスムーズだ。
それでも直らない時の一時的な回避策
納期が迫っていてどうしても編集を進めなければならない場合、以下の回避策で作業を継続できる。
コードエディタで直接編集する
ビジュアルエディタが使えなくても、ブロックエディタの右上の三点メニューから「コードエディタ」に切り替えれば、HTML ベースでブロックの内容を編集できる。ビジュアルのプレビューは見られないが、少なくとも点滅に悩まされずにテキストの修正やブロック構造の調整は可能だ。
クラシックエディタプラグインを一時的に有効化する
Classic Editor プラグインをインストールして有効化すると、旧来のクラシックエディタで記事を編集できる。点滅の原因がブロックエディタ固有の React 処理にある場合、クラシックエディタでは問題が発生しないことが多い。作業が完了したらプラグインを無効化して元のブロックエディタに戻し、根本原因の調査を続ける。
よくある質問
同じブラウザで他の WordPress サイトは正常に動く。自サイトだけ点滅するのはなぜか
自サイトのプラグインまたはテーマが読み込んでいる JavaScript が原因だ。他の WordPress サイトが正常なのは、そのサイトでは問題のスクリプトが読み込まれていないからだ。「セーフモードでプラグインの競合を切り分ける」手順で原因のプラグインやテーマを特定する。
getComputedStyle エラーは WordPress のバージョンを戻せば直るか
バージョンを戻すことで一時的に直るケースはあるが、セキュリティ更新が適用されなくなるため推奨しない。WordPress 本体には問題がなく、特定のプラグインやテーマが新しい WordPress のバンドル済み React に対応していないことがほとんどだ。プラグインやテーマの更新を待つか、開発元に報告して対応を依頼する方が安全だ。
ブラウザのハードウェアアクセラレーションは関係あるか
ごくまれに、GPU レンダリングの不具合が画面の点滅を引き起こすことがある。Chrome の設定→システム→「ハードウェア アクセラレーションが使用可能な場合は使用する」をオフにして再起動すると直るケースも報告されている。ただし、getComputedStyle エラーを伴う場合は JavaScript の競合が原因の可能性が高い。
全プラグイン無効化と標準テーマでも直らない場合はどうするか
ここまで試しても直らない場合は、WordPress 本体のファイル破損やサーバー側の特異な設定（mod_security など）が影響している可能性がある。WordPress の再インストール（「ダッシュボード→更新」から「再インストール」を実行）を試す。それでもダメならサーバーのエラーログを確認し、PHP のメモリ制限や実行時間制限が不足していないかも調べる。
エラーのスタックトレースにプラグイン名が出ていない時はどう調べるか
エラーが react-dom.min.js や components.min.js で発生している場合、直接の原因箇所がミニファイされた WordPress 本体のファイルになっている。この場合は「Network」タブで、読み込まれているすべての .js ファイルを確認する。プラグインが読み込むスクリプトの数が多い順に疑い、ひとつずつ無効化して切り分ける。
この記事のポイント
- ブロックエディタの点滅と getComputedStyle エラーの主因はブラウザ拡張機能と JavaScript 競合
- シークレットウィンドウと拡張機能無効化で素早く原因を絞り込める
- Health Check プラグインのトラブルシューティングモードで安全にプラグインを切り分ける
- どうしても急ぐ場合はコードエディタや Classic Editor プラグインで一時的に編集を続行できる
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている
Kadence Blocksでエディタのフォントがセリフ体になる原因と直し方
Kadence Blocks の Advanced Typography で Google Fonts を選択したにもかかわらず、ブロックエディタ上でセリフ体のフォールバックフォントが表示される問題は、Kadence Blocks 3.7.3 以降のエディタ内フォント読み込み処理の変更に起因する。フロントエンドで正しく表示されているのであれば、エディタ側の設定やバージョン調整で解決できる。
なぜエディタ内だけ Google Fonts が正しく表示されないのか
Kadence Blocks の Advanced Typography は、サイトのフロントエンドとブロックエディタの両方に選択したフォントを読み込む仕組みになっている。しかしバージョン 3.7.3 以降、エディタ画面でのフォント読み込みパスや enqueue のタイミングに変更が入り、特定の環境下で Google Fonts のスタイルシートが正しく適用されなくなった。
実際の症状として、例えば Roboto を指定したのにエディタ上では明朝体や Times New Roman 系のセリフ体で表示される。これはブラウザが指定されたフォントを見つけられず、システムのデフォルトフォントにフォールバックしている状態だ。フロントエンドでは Kadence Theme 側のフォント読み込み処理が正常に機能するため問題が表面化しない。
この問題はプラグインの競合ではなく、Kadence Blocks 単体のエディタ向けフォント読み込み処理に起因する。そのため全プラグインを無効化しても再現し、標準テーマに切り替えても改善しない場合がある。
Kadence のフォント設定を確認して対処する
「外観」→「カスタマイズ」でフォントキャッシュを削除する
Kadence Theme には、Google Fonts のローカルキャッシュを管理する機能が組み込まれている。このキャッシュが破損していたり古い情報を保持していると、エディタで正しいフォントが読み込まれないことがある。
- WordPress 管理画面の「外観」→「カスタマイズ」を開く
- 「General」→「Performance」へ進む
- 「Google Fonts」セクションにある「Clear Font Cache」ボタンをクリックする
- カスタマイザーを保存して閉じ、ブロックエディタをリロードする
この操作で Kadence が保持していたフォント情報がクリアされ、次回エディタを開いた際に最新のフォントファイルが再取得される。キャッシュクリア後も改善しない場合は、次の手順に進む。
「Google Fonts の読み込み方法」を切り替える
Kadence は Google Fonts の読み込み方式を複数用意している。設定によってエディタ側のフォント描画に影響が出るため、別の方式に変更して検証する。
- 「外観」→「カスタマイズ」→「General」→「Performance」→「Google Fonts」を開く
- 「Load Method」を現在とは別のオプションに切り替える（例: 「Local」から「CDN」へ、またはその逆）
- 保存後にブロックエディタを再読み込みしフォント表示を確認する
ローカル読み込み（Local）に設定すると、Google のサーバーからフォントをダウンロードして自サイト内に保存する。CDN 読み込みでは Google の配信網から直接フォントを取得する。サーバー環境やセキュリティ設定によっては、ローカル読み込み時のファイル生成に失敗してエディタ側のフォントが欠落することがある。
Advanced Typography のエディタ向け設定を確認する
Kadence Blocks のブロック設定パネルにある Advanced Typography には、エディタ内プレビュー用のフォント読み込みを制御する内部フラグが存在する。設定画面から直接変更できる項目ではないが、次の操作でリセットできる。
- 問題が発生しているブロックを選択し、右サイドバーの「Advanced」→「Typography」を開く
- フォント選択を一度「Default / Inherit」に戻し、保存する
- ページをリロードしたあと、再度目的の Google Fonts を選択し直す
これにより Kadence Blocks がエディタ向けにフォントを再登録し、正しいスタイルシートが読み込まれるようになる場合がある。
上記のデモはエディタ画面内でのフォント描画の違いを表したものだ。修正後はフロントエンドと同じフォントがエディタでも適用される。
Kadence Blocks のバージョンを変更して問題を回避する
バージョン 3.7.2 にダウングレードする手順
この問題は Kadence Blocks 3.7.3 以降で発生し、3.7.2 では起こらないことが確認されている。どうしてもエディタ内のフォント表示を正しく保ちたい場合、一時的に 3.7.2 へ戻すのが確実な回避策になる。ただしダウングレードはセキュリティ面で推奨されないため、次のアップデートで修正されるまでの応急処置と割り切る。
- 管理画面の「プラグイン」→「プラグインの追加」→「プラグインのアップロード」ボタンをクリックする
- Kadence Blocks の旧バージョン（3.7.2）の ZIP ファイルをアップロードする
- 「現在のプラグインをアップロードしたものに置き換えますか？」という確認で「はい」を選択する
- プラグインが上書きされたら、必ず「自動更新を無効化」して意図しないアップデートを防ぐ
旧バージョンの ZIP ファイルは、WordPress.org のプラグインページにある「Advanced View」→「Previous Versions」からダウンロードできる。上書きインストール後はブロックエディタを再読み込みし、フォント表示が正常に戻ったか確認する。
アップデートで修正されたかを定期的に確認する
Kadence Blocks は更新頻度が高いプラグインのため、数週間以内にこの問題が修正された新バージョンがリリースされる可能性がある。ダウングレードした状態でも、WordPress 管理画面の「プラグイン」ページや Kadence の公式チェンジログを定期的にチェックし、修正版が公開されたら速やかに最新版へ更新する。
手動でエディタ用スタイルを補完する方法
子テーマの editor-style.css でフォントを明示する
Kadence のエディタ内フォント読み込みが不安定な場合、子テーマにエディタ専用のスタイルシートを用意し、使用する Google Fonts を直接指定する方法が有効だ。これは Kadence の処理に依存せず、WordPress 標準の仕組みでエディタにフォントを読み込ませる。
/* 子テーマの functions.php に追加 */
function my_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'my_editor_styles' );
/* 子テーマ直下の editor-style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
.editor-styles-wrapper {
font-family: 'Roboto', sans-serif;
}
このコードにより、ブロックエディタの読み込み時に指定した Google Fonts が強制的に適用される。Kadence 側のフォント読み込み処理が失敗しても、エディタ上では正しいフォントが表示されるようになる。ただし、この方法はサイト全体に適用されるため、ページやブロックごとに異なるフォントを使い分けている場合は注意が必要だ。
Kadence のフィルターフックでエディタ用フォントを追加する
よりピンポイントに Kadence Blocks のエディタ向けフォント読み込みを補強したい場合、Kadence が提供するフィルターフックを利用する。次のコードを子テーマの functions.php に追加することで、エディタ用のフォントスタイルをプログラム的に挿入できる。
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_style(
'custom-editor-fonts',
'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
[],
null
);
}, 99 );
このフックはブロックエディタが読み込まれるタイミングで実行され、優先度 99 で登録することで Kadence の内部処理より後にスタイルを追加する。結果として、Kadence が読み込みに失敗した場合でも確実にエディタ上で Google Fonts が利用可能になる。
よくある質問
フロントエンドでは正しく表示されるのにエディタだけおかしいのはなぜか
Kadence Blocks はフロントエンドとエディタで別々のフォント読み込み処理を行っている。フロントエンドは Kadence Theme の仕組みが、エディタは Kadence Blocks の仕組みが担当しており、後者の処理に不具合があるとエディタ内だけでフォントが崩れる。表示確認の際は必ず両方の環境を見比べることが大切だ。
キャッシュを削除しても直らない場合はどうすればよいか
Kadence のフォントキャッシュクリアで改善しない場合、ブラウザキャッシュやサーバー側のキャッシュ（CDN やキャッシュプラグイン）もすべて削除する。その後も直らなければ、Kadence Blocks のバージョンを 3.7.2 にダウングレードするか、前述の editor-style.css による手動補完を検討する。
特定の Google Fonts だけがエディタで表示されないのはなぜか
フォントのウェイト数が多いものや可変フォント（Variable Fonts）は、Kadence のエディタ向け読み込み処理が対応しきれずに欠落することがある。この場合、問題のフォントを Kadence の「Custom Fonts」機能で手動アップロードするか、前述のフィルターフックで直接 Google Fonts の URL を指定すると安定する。
Kadence Blocks のバージョンを下げると他の機能に影響はあるか
3.7.2 へのダウングレードでは、3.7.3 以降に追加された新機能やバグ修正が失われる。具体的にはブロックの追加オプションやパフォーマンス改善が適用されない。ただし、基本的なブロック編集機能やフロントエンド表示には大きな影響は出ない。ダウングレードはあくまで応急処置として考え、修正版のリリースを待つ姿勢が安全だ。
別のテーマに切り替えたらエディタでフォントが表示されるようになった
Kadence Theme を無効化して別のテーマにすると、エディタ内のフォント管理がそのテーマ側に移るため問題が解消されることがある。これは根本的な解決ではなく、Kadence Blocks と Kadence Theme の組み合わせ特有の不具合であることを示している。テーマを変更できない場合は、やはり前述のコードによる手動補完が現実的な対処になる。
この記事のポイント
- Kadence Blocks 3.7.3 以降のエディタ向けフォント読み込み処理に不具合があり、セリフ体にフォールバックする
- 「外観」→「カスタマイズ」のフォントキャッシュクリアと読み込み方式の切り替えで改善する可能性がある
- 一時的な回避策として Kadence Blocks を 3.7.2 にダウングレードする方法がある
- 子テーマの editor-style.css やフィルターフックでエディタ用フォントを手動補完すると確実に表示できる
- 修正版がリリースされたら速やかに最新バージョンへ更新することが重要
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている
WordPressでショートコードが表示されず文字列だけ出る時の直し方
WordPress 7.0 でショートコードが表示されず、角括弧付きの文字列がそのまま画面に出る場合、プラグインの停止・テーマの出力フィルタ不足・ブロックエディタとの相性が主な原因だ。直すにはプラグインの更新や有効化確認から始め、テーマ側で処理されていないときは強制実行のコードを functions.php に追加する。
なぜショートコードが表示されず文字列だけ出るのか
ショートコードは [example] のような角括弧で囲まれた短い文字列で、WordPress が表示の瞬間に対応する PHP 処理や HTML に置き換える仕組みだ。この置き換えが行われず、角括弧付きのまま表示される場合、大きく分けて三つの原因が考えられる。
原因1 ショートコードを登録しているプラグインが停止している
プラグインが無効化されているか、WordPress 7.0 への更新後に互換性の問題で停止しているケースが最も多い。更新直後にサイトが「このサイトで重大なエラーが発生しました」という表示になった場合、WordPress は自動で問題のプラグインを停止する。この自動停止によってショートコードの登録処理が丸ごと抜け落ち、文字列だけが残る。
また、プラグインは有効に見えても、特定のページタイプ（固定ページ・投稿・カスタム投稿タイプ）で意図的にショートコードの置換を制限している設計もある。管理画面のプラグイン一覧で有効化状態を確認しても原因がわからないときは、プラグインの内部ロジックまで疑う必要がある。
原因2 テーマが本文中のショートコードを処理していない
ショートコードの置換は do_shortcode() という関数を通じて実行される。WordPress の標準ループやウィジェットエリアでは自動で処理されるが、テーマがカスタマイズされたテンプレートで直接 get_post_meta() や the_content() を独自に加工している場合、この関数が呼ばれずショートコードが展開されない。とくに自作テーマや子テーマでカスタムフィールドの値を表示する箇所で起きやすい。
原因3 ブロックエディタの「ショートコードブロック」未使用
WordPress のブロックエディタ（Gutenberg）でショートコードを機能させるには、専用の「ショートコード」ブロックの中に記述する必要がある。段落ブロックや見出しブロックに直接 [example] と打ち込んだ場合、ブロックの保存・出力の仕様によってはテキストとしてそのまま表示されることがある。クラシックエディタに慣れていると見落としがちなポイントだ。
上図の三方向から原因を絞り込めば、ほとんどのケースで該当箇所が見つかる。次項からは実際の対処手順を具体的に解説する。
ショートコードが機能しないときの具体的な対処手順
手順1 プラグインの有効化と更新を確認する
管理画面の「プラグイン」→「インストール済みプラグイン」を開き、該当プラグインが有効化されているかを確認する。無効化されていれば「有効化」をクリックするだけで解決することが多い。有効化されているのに直らない場合は、プラグインの最新バージョンがリリースされていないか更新画面を確認する。WordPress 7.0 へのメジャーアップデート直後は、プラグイン開発者が緊急の互換性アップデートを出している可能性が高い。
管理画面にアクセスできないほどサイトが壊れている場合は、WordPress の「リカバリモード」を利用する。サイトで致命的エラーが発生すると、管理者メールアドレス宛に「このサイトで重大なエラーが発生しました」という件名のメールが届き、その中にリカバリモード用の特別なログインリンクが記載されている。このリンクからログインすると、問題のプラグインだけが停止した状態で管理画面に入れる。
手順2 テーマ側で do_shortcode() を明示的に実行する
プラグインが正常に動作しているのにショートコードが展開されない場合、テーマのテンプレートが原因だ。該当のショートコードを表示したい箇所がカスタムフィールドやウィジェットエリア内であれば、テンプレートファイル内の出力部分に do_shortcode() を追加する。
// カスタムフィールドの値をショートコード展開して出力
echo do_shortcode( get_post_meta( get_the_ID(), 'my_custom_field', true ) );
// 本文中のショートコードを意図的に再実行（通常は不要だが保険として）
echo do_shortcode( get_the_content() );上記は functions.php ではなく、該当のテンプレート（single.php や page.php など）の出力箇所に追記するコードだ。子テーマを使っていない場合は必ず子テーマを用意してから編集し、テーマのアップデートで変更が失われないようにする。子テーマの作り方は後述の FAQ で扱う。
手順3 ブロックエディタで「ショートコード」ブロックを使う
ブロックエディタでページを編集している場合、ブロック挿入ツール（＋ボタン）から「ショートコード」ブロックを検索して追加する。既存の段落ブロックに直接ショートコードを打ち込んでいる場合は、そのブロックを削除して新しくショートコードブロックを追加し、中にショートコード文字列だけを入力する。
この手順でブロックエディタ上の問題は解決するが、テーマ側の出力処理に起因する問題はこれだけでは直らない。手順2も併せて確認するのが確実だ。
WordPress 7.0 特有の注意点と想定外のエラーへの備え
WordPress 7.0 は内部のエラーハンドリングが強化され、従来は警告レベルで済んでいた処理が致命的エラーとして扱われるケースが増えている。プラグインが最新でも、内部の非推奨関数の呼び出しや PHP バージョンとの不一致があると、サイト全体がダウンし管理画面からも締め出される。
こうした状況では、FTP またはサーバーのファイルマネージャーで /wp-content/plugins/問題のプラグインフォルダ/ を一時的にリネームする方法が最も確実な緊急回避策になる。フォルダ名を「custom-profile-picture」から「custom-profile-picture_temp」などに変更すれば、WordPress はそのプラグインを検出できなくなり、サイトが正常に表示される状態まで復帰する。その後、プラグインの互換性情報を確認してから正式な対処を取る。
よくある質問
ショートコードを使うプラグインをアップデートしたらサイトが真っ白になった
WordPress 7.0 とプラグインの互換性が取れていない可能性が高い。リカバリモードのリンクがメールで届いていればそこからログインし、問題のプラグインを停止する。メールが届いていない場合は FTP で対象プラグインのフォルダをリネームし、管理画面にアクセスできる状態に戻してから代替プラグインを検討する。
子テーマの functions.php に追記する方法がわからない
子テーマとは、親テーマの機能を引き継ぎつつ安全にカスタマイズするための仕組みだ。まず親テーマと同じディレクトリに子テーマ用フォルダを作成し、style.css と functions.php の2ファイルを設置する。functions.php には親テーマのスタイルを読み込むコードと、do_shortcode() を含むカスタマイズコードを記述する。詳細な手順は WordPress 公式の子テーマ作成ガイドが役立つ。
ショートコードブロックを使っても特定のページだけ表示されない
キャッシュ系プラグインや CDN が原因のことが多い。キャッシュを全削除し、CDN を使用している場合は一時的に開発モードにしてから表示を確認する。また、該当ページがカスタム投稿タイプで、テンプレートが専用の出力処理をしている場合も同様に do_shortcode() の追加が必要になる。
プラグインを更新したが問題が再発した
更新で一度直っても、WordPress の自動エラーハンドリングが再度働いて同じプラグインを停止することがある。サーバーのエラーログを確認し、PHP のメモリ不足や実行時間制限が原因であれば、wp-config.php で WP_MEMORY_LIMIT を 256M 以上に設定する。根本的にはプラグイン開発者の対応を待つ必要があるケースもある。
この記事のポイント
- ショートコードが文字列のまま表示される主因はプラグイン停止・テーマの処理不足・ブロック選択ミスの3つ
- 管理画面に入れない場合はリカバリモードか FTP でプラグインフォルダをリネームして復旧させる
- テーマ側で do_shortcode() が呼ばれていない箇所は子テーマのテンプレートに追記する
- ブロックエディタでは必ず「ショートコード」専用ブロックの中に記述する
- WordPress 7.0 はエラーハンドリングが強化され互換性問題が表面化しやすい
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている