WordPress

WordPress 7.1の新API入門|Abilities API・SVG Icon API・レスポンシブ編集の使い方

更新日:2026-10-02 著者:unigram 読了目安:6分
WordPress 7.1の新API入門|Abilities API・SVG Icon API・レスポンシブ編集の使い方

この記事の要点

WordPress 7.1で強化されたAbilities API、SVG Icon API、レスポンシブ編集を初心者向けに解説。従来との違い、管理画面での操作手順、活用例、つまずきやすいポイントまで紹介します。

PR 本ページにはプロモーションが含まれています。

この記事では、WordPress 7.1で使えるようになった新しい機能とAPI(外部の機能と連携するための仕組み)についてまとめています。AI連携や管理画面の拡張に興味がある方、スマートフォン表示の調整をもっと簡単にしたい方に向いています。

WordPress 7.1「Mary Lou」は2026年8月19日に正式リリースされました。実際に触ってみると、いきなり難しいコードを書くというより、まずはレスポンシブ編集(画面幅に合わせて見た目を調整する機能)から試すのが安心です。その後、SVG Icon API(SVGアイコンを登録・管理する仕組み)やAbilities API(WordPressの処理を機能単位で登録・実行する仕組み)へ進むと理解しやすくなります。

WordPress 7.1で何が変わったのか

結論からいうと、WordPress 7.1では「表示を整える機能」と「外部ツールから操作しやすくする土台」が強化されました。

  • レスポンシブスタイルで、画面幅ごとのデザインを調整しやすくなった
  • モバイル・タブレット向けのビューポート設定を扱いやすくなった
  • SVG Icon APIで、独自のアイコンコレクションやSVGアイコンを登録できる
  • Abilities APIで、処理の検証・検出・実行ライフサイクルを扱いやすくなった
  • 管理画面コンポーネント(管理画面を構成する部品)のテーマ対応が追加された

これまでのWordPressでは、テーマのCSS(見た目を指定するファイル)を直接編集したり、プラグインごとに独自の管理画面を作ったりする場面がありました。7.1では、画面サイズや機能の登録方法を共通化しやすくなっています。社内Web担当者にとっては、担当者ごとに設定方法が変わる問題を減らせる点がメリットです。

まず試したいレスポンシブ編集

最初におすすめしたいのは、追加プラグインやコードを使わないレスポンシブ編集です。実際に操作すると、パソコン用のデザインを作った後に、スマートフォンで崩れている箇所を確認しやすくなっています。

  1. WordPressの管理画面にログインします。
  2. 左メニューの「固定ページ」または「投稿」をクリックします。
  3. 編集したいページのタイトルをクリックします。
  4. ブロックエディター(文章や画像を部品単位で編集する画面)で、見出しや画像などのブロックを選びます。
  5. 右側の設定パネルを開き、デザインやレイアウトにあるレスポンシブ関連の項目を確認します。
  6. デバイスの表示切り替えが表示される場合は、デスクトップ、タブレット、モバイルを順番に選びます。
  7. 文字サイズ、余白、配置を画面幅ごとに調整し、「保存」をクリックします。

最初に感じる壁は、パソコン画面だけを見て調整を終えたつもりになりやすいことです。スマートフォン表示に切り替えたら、見出しが2行になる、ボタンが横並びのままになる、画像が大きすぎるといった点を確認してください。

ここでのコツは、すべての幅を細かく作り込まないことです。まずデスクトップで全体を作り、次にタブレット、最後にモバイルの順で確認すると迷いにくくなります。

SVG Icon APIで独自アイコンを管理する

SVG(拡大しても画質が荒れにくい画像形式)を使ったアイコンは、ボタンや管理画面のメニューを見やすくするのに役立ちます。従来はテーマやプラグインにSVGファイルを個別に置き、読み込み方法も自分で決める必要がありました。

SVG Icon APIでは、アイコンコレクション(複数のアイコンをまとめた登録単位)とSVGアイコンをWordPress側へ登録できます。登録後は、テーマやプラグインで同じアイコンを再利用しやすくなります。

登録前に準備するもの

  • 使用許可を確認したSVGアイコン
  • アイコン名と用途の一覧
  • 登録するテーマまたはプラグイン
  • 本番環境とは別のテスト環境

実装時は、いきなり本番サイトへ追加しないでください。管理画面の「プラグイン」から対象プラグインを停止できる状態を作り、バックアップを取ってから確認します。SVGは便利ですが、出所が不明なファイルをそのまま登録するのは避けましょう。

実装の進め方

  1. 子テーマまたは独自プラグインを用意します。
  2. アイコンを「ロゴ」「矢印」「SNS」など用途別に整理します。
  3. WordPress 7.1のSVG Icon APIを使い、コレクション名とアイコン名を登録します。
  4. 登録したアイコンを、管理画面のボタンやテーマ内の表示箇所で呼び出します。
  5. デスクトップとモバイルの両方で、サイズや位置を確認します。

初心者がつまずきやすいのは、SVGの表示名とファイル名を混同することです。アイコンを増やす前に「用途・名前・表示場所」を表にしておくと、後から修正しやすくなります。

Abilities APIはAI連携の土台になる

Abilities APIは、WordPress内の処理を「能力」や「作業」として登録し、他の機能から見つけたり実行したりしやすくする仕組みです。AI(文章やデータを処理する技術)からWordPressの機能を呼び出す場合にも、共通の入口として役立ちます。

基盤はWordPress 6.9で導入され、7.1では実行ライフサイクル、検証、検出などが強化されました。たとえば「記事の下書きを作る」「指定したデータを確認する」といった処理を、ひとつの機能として整理するイメージです。

ただし、初心者が最初からAI自動投稿を作る必要はありません。まずは次のような小さな作業を1つに絞ると安全です。

  • 記事の公開前に必須項目を確認する
  • 特定のカテゴリーが付いているか確認する
  • 社内用の定型文を下書きへ追加する

実際の開発では、処理の名前、説明、入力データ、実行処理、失敗時の結果を決めてから登録します。特に入力データの検証(値が正しいか確認する工程)を省かないでください。AIや外部サービスから値を受け取る場合、想定外の内容が入る可能性があります。

料金と無料で使える範囲

WordPress 7.1のコア(WordPress本体)は無料で利用できます。今回紹介したレスポンシブ編集、SVG Icon API、Abilities APIを使うために、WordPressへ別料金を支払う必要はありません。

ただし、サイトを公開するためのサーバー代やドメイン代、外部AIサービスを利用する場合の料金は別に発生する場合があります。料金は契約先やサービス内容で変わるため、申し込み前に各サービスの最新情報を確認してください。

向いている人・向いていない人

向いている人 理由
Web制作を学びたい人 画面調整からAPIまで段階的に学べる
社内Web担当者 表示ルールや作業手順を整理しやすい
AI連携を試したい人 WordPressの処理を機能単位で考えられる

一方、既存サイトを一切変更したくない人や、プラグイン・テーマの動作確認ができない環境の人には、すぐの導入は向きません。テストサイトを作るか、制作会社や詳しい担当者に確認してから進めてください。

よくある質問

WordPress 7.1へ更新すればすぐ使えますか?

レスポンシブ編集などは環境によって表示や対応状況が異なります。更新前にバックアップを取り、テーマとプラグインの対応状況を確認してください。

コードを書けないと使えませんか?

レスポンシブ編集は、管理画面の操作だけで試せます。SVG Icon APIとAbilities APIは、登録や連携でコードが必要になる場面があります。まずは画面操作から始め、必要な範囲だけ学ぶ方法がおすすめです。

Abilities APIを使えばAIが何でも自動操作できますか?

何でも自動化できるわけではありません。実行する処理、入力値の確認、権限、失敗時の対応を設計する必要があります。公開や削除のような重要操作は、最初は手動確認を残してください。

SVGアイコンなら何でも登録できますか?

利用許可と安全性の確認が必要です。出所が分からないSVGを使わず、テスト環境で表示と動作を確認してから公開しましょう。

まとめ:今日から始めるなら表示確認から

WordPress 7.1では、画面幅に応じた編集、SVGアイコンの登録、AI連携や自動化につながるAbilities APIが強化されました。従来のようにテーマやプラグインごとに別々の方法を覚えるだけでなく、共通の仕組みとして整理しやすくなっています。

最初の一歩は、管理画面で既存ページを開き、デスクトップ・タブレット・モバイルの表示を順番に確認することです。次に独自アイコンを1つ登録し、最後に「公開前のチェック」のような小さな処理をAbilities APIの学習題材にすると、挫折しにくくなります。

参考・公式情報

広告

以下のエリアには広告またはプロモーションが表示される場合があります。

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。 大学で講師もしています。 自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。