WordPress 7.0では、新たに「アイコン」ブロックが標準搭載されました。

これまでWordPressの記事や固定ページにアイコンを表示するには、アイコン用プラグインを導入したり、SVGコードを直接記述したりする方法が一般的でした。

WordPress 7.0のアイコンブロックを使えば、あらかじめWordPressに用意されているアイコンを、ブロックエディター上から選んで挿入できます。

ただし、アイコンブロックは「好きなSVG画像やPNG画像等のアイコンをアップロードするためのブロック」ではありません。WordPressが用意したアイコンを安全かつ扱いやすい形で利用するための仕組みです。

この記事では、WordPress 7.0のアイコンブロックについて、特徴や使い方、活用例、注意点を分かりやすく解説します。

WordPress 7.0で追加された「アイコン」ブロックとは

機能について

アイコンブロックは、WordPressに登録されているSVG形式のアイコンを、投稿や固定ページ、テンプレートなどに挿入するためのブロックです。

SVGとは、拡大や縮小をしても画像がぼやけにくい画像形式です。小さな記号やロゴ、操作ボタンなどに向いています。

WordPress 7.0では、WordPress公式のアイコンライブラリからアイコンを選び、本文中に配置できるようになりました。アイコンの一覧は、WordPressのwordpress/iconsパッケージをもとに構成されています。

例えば、次のような用途が考えられます。

• 注意事項の前に警告アイコンを置く
• 補足説明に情報アイコンを付ける
• 電話番号の横に電話アイコンを置く
• メールアドレスの横に封筒アイコンを置く
• 手順の中に矢印やチェックマークを表示する
• 見出しの前に装飾としてアイコンを置く

従来はプラグインや独自コードが必要だった表現を、WordPressの標準機能だけで作りやすくなった点が大きな特徴です。

使用例

以下の2つはいずれも「アイコン」ブロックを使用して出力したものになります。

アイコンブロックの背景にある「SVG Icon API」

仕組みについて

WordPress 7.0のアイコンブロックは、単にSVGコードを投稿内容へ保存する仕組みではありません。裏側では、新しく追加された「SVG Icon Registration API」と呼ばれる仕組みが使われています。

WordPress 7.0では、次の3つが新たに整備されました。

• アイコンを管理する仕組み
• アイコン情報を取得するREST API
• 実際にアイコンを表示するアイコンブロック

アイコンの一覧は/wp/v2/iconsというREST APIの接続先から取得され、検索や絞り込みに利用されます。

投稿データには、基本的に選択したアイコンの名前が保存されます。公開画面に表示するSVGコードは、WordPress側のアイコン登録情報をもとにサーバー側で生成されます。

この仕組みには、次のような利点があります。

アイコンの情報をWordPress側でまとめて管理できる

記事ごとに大量のSVGコードを直接保存するのではなく、WordPressに登録されたアイコンを呼び出して表示できます。

そのため、アイコンの管理方法を統一しやすくなります。

アイコンが更新されてもブロックエラーが起こりにくい

通常のブロックでは、保存されているHTMLと現在の出力内容が異なると、「このブロックには予期されていない、または無効なコンテンツが含まれています」と表示されることがあります。

アイコンブロックはサーバー側で表示内容を生成するため、WordPress側でアイコンが調整された場合にも、ブロックの検証エラーが発生しにくい設計です。

「アイコン」ブロックの基本的な使い方

アイコンブロックは、通常の段落ブロックや画像ブロックと同じように追加できます。

ブロック挿入ツールを開く

投稿または固定ページの編集画面を開き、画面左上または本文内の「＋」ボタンを押します。

STEP

1

「アイコン」を検索する

ブロック検索欄に「アイコン」と入力し、表示されたアイコンブロックを選択します。

スラッシュコマンドが利用できる場合は、本文内で/アイコンまたは/iconと入力して検索することもできます。

STEP

2

使用するアイコンを選ぶ

アイコンブロックを挿入後、「アイコンを選択」を押下すると、アイコンを選択するための画面が表示されます。

一覧から目的に合ったアイコンを選択するほか、検索欄を使って探すこともできます。

ただし、下記をご覧いただければ分かるとおり、WordPress 7.0で公開されているアイコンは、それほど数が多いわけではありません。すなわち、FontAwesomeと異なり、すべての用途をカバーする大規模なアイコン集ではありません。

STEP

3

大きさや色を調整する

アイコンを選択した後は、ブロックツールバーや右側の設定欄から見た目を調整します。

「テキスト」でアイコンの色、「幅」でアイコンの大きさを調整することが可能です。

STEP

4

アイコンブロックの主なメリット

プラグインを使わずにアイコンを挿入できる

これまで、本文にアイコンを表示するために、Font Awesome対応プラグインやブロック拡張プラグインを利用していた方も多いでしょう。

WordPress 7.0以降では、基本的なアイコンであれば標準のアイコンブロックだけで表示できます。そのため、単純なアイコン表示だけを目的としてプラグインを追加する必要性が低くなります。

ただし、すでに利用しているアイコンプラグインを、すぐに削除できるとは限りません。

独自アイコン、大量のアイコン、ブランドロゴ、アイコン付きボタンなどが必要な場合は、引き続きプラグインの方が便利なことがあります。

画像を作成してアップロードする必要がない

小さな矢印やチェックマークのために、PNG画像を作成してメディアライブラリへアップロードする必要がなくなります。

画像ファイルとして管理する必要がないため、メディアライブラリが細かな装飾画像で埋まることも防げます。

拡大してもぼやけにくい

アイコンブロックではSVG形式のアイコンが使われます。

SVGは、点や線、図形などの情報をもとに描画されるベクター形式です。PNGやJPEGのような一般的な画像とは異なり、大きく表示しても輪郭がぼやけにくい特徴があります。スマートフォンや高解像度ディスプレイでも、比較的きれいに表示できます。

テーマの色に合わせやすい

SVGアイコンは、ブロックの色設定やテーマのカラーパレットと組み合わせやすい形式です。

例えば、サイト全体のメインカラーを変更した場合に、アイコンの色も同じカラーパレットから選び直せます。画像編集ソフトで色違いの画像を作り直す必要はありません。

WordPress標準の操作で管理できる

アイコンブロックはWordPress公式のブロックなので、段落、見出し、グループなどと同じ感覚で操作できます。

複製、移動、グループ化、パターンへの登録など、ブロックエディターの機能も利用できます。

画像ブロックとの違い

アイコンブロックと画像ブロックは、見た目が似ていても役割が異なります。

アイコンブロックは、写真や複雑なイラストを置き換えるものではありません。文章の意味を補助したり、操作内容を分かりやすくしたりするために使用するブロックです。

ソーシャルアイコンブロックとの違い

WordPressには以前から「ソーシャルアイコン」ブロックがあります。

名前は似ていますが、アイコンブロックとは目的が異なります。

アイコンブロック

一般的な記号や図形を表示するためのブロックです。

情報、警告、検索、矢印、電話など、色々な意味をもつアイコンを本文中に配置できます。

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

X、Facebook、Instagram、YouTubeなど、SNSへのリンクを表示するための専用ブロックです。SNSのロゴとリンクをセットで管理できます。

つまり、SNSへのリンクを設置する場合はソーシャルアイコンブロックを使い、説明や装飾として一般的なアイコンを表示する場合はアイコンブロックを使うと良いでしょう。

SVGファイルのアップロード機能とは別物

アイコンブロックについて、特に誤解しやすいのがSVGアップロードとの関係です。

WordPress 7.0のアイコンブロックは、パソコンに保存しているSVGファイルを自由にアップロードする機能ではありません。開発段階でも、SVGアップロードをWordPress本体で許可することは、アイコンブロックの対象外であると説明されています。

整理すると、次のようになります。

独自のSVGファイルをアップロードしたい場合は、SVGを安全に処理できるプラグインなどが別途必要です。

単にupload_mimesフィルターでSVGを許可するだけでは、SVG内の危険なコードを取り除けないため、注意が必要です。

WordPress 7.0では独自アイコンを追加できない

WordPress 7.0のSVG Icon APIは、将来の拡張を見据えた基礎的な実装です。

WordPress 7.0の段階では、テーマやプラグインから独自のアイコンを公式のアイコン一覧へ自由に登録するための公開機能は用意されていません。

内部にはWP_Icons_Registryというアイコン管理用のクラスがありますが、WordPress 7.0では独自アイコンの登録方法が公開されていません。アイコンの名前空間も、基本的にWordPress本体のcoreに限定されています。

WordPress 7.1では、次のような機能の追加が進められています。

• 独自アイコンの登録
• アイコンの登録解除
• アイコン集の追加
• アイコンの分類
• SVGのサニタイズ強化
• アイコンの回転
• アイコンの左右・上下反転
• アイコンへのリンク設定
• 他のブロックから共通のアイコン選択画面を利用する仕組み

したがって、WordPress 7.0のアイコンブロックは、完成形というよりも、今後のアイコン管理機能の土台と考えた方がよいでしょう。

アイコンブロックの活用例

注意事項や警告を目立たせる

警告アイコンと文章を横並びにすると、読者の注意を引きやすくなります。

たとえば、グループブロックや横並びブロックの中に、次のように配置します。

［警告アイコン］この操作を行う前に、必ずバックアップを取得してください。

ただし、アイコンだけで重要度を伝えるのではなく、「注意」「警告」などの文字も併記する方が分かりやすくなります。

手順を分かりやすくする

チェックマークや矢印を使うことで、操作手順を視覚的に整理できます。

［チェック］WordPressを更新する
［チェック］テーマを更新する
［チェック］プラグインを更新する

ただし、単純な箇条書きで十分な場合は、リストブロックを使った方が文章構造として適切です。アイコンは、あくまでも見た目や理解を補助する目的で使用します。

連絡先を表示する

電話番号、メールアドレス、住所などの横に対応するアイコンを配置すると、内容を見分けやすくなります。

［電話アイコン］00-0000-0000
［メールアイコン］example@example.com
［場所アイコン］東京都○○区

企業サイトや店舗サイトの連絡先欄に向いています。

見出しを装飾する

グループブロックや横並びブロックを使って、見出しの前にアイコンを配置できます。

［電球アイコン］この記事のポイント

ただし、すべての見出しに異なるアイコンを使うと、かえって統一感がなくなることがあります。装飾ルールをあらかじめ決めておくとよいでしょう。

アイコンブロックを使うときの注意点

アイコンだけで意味を伝えない

アイコンの意味は、すべての人に同じように伝わるとは限りません。例えば、歯車のアイコンを「設定」と理解する人もいれば、単なる機械の部品だと受け取る人もいるかもしれません。

特に重要な操作や案内では、以下のようにアイコンの横に文字を表示しましょう。

［虫眼鏡アイコン］検索

文字を併記することで、視覚障害のある方だけでなく、アイコンの意味に慣れていない方にも内容を伝えやすくなります。

装飾目的と意味のあるアイコンを区別する

アイコンには、大きく分けて次の2つがあります。

• 内容や操作を伝えるアイコン
• 見た目を整えるだけの装飾アイコン

装飾目的のアイコンは、読み上げソフトに読み上げられると、かえって内容を理解しにくくなることがあります。

WordPressのアイコンブロックを使う場合も、アイコンに重要な情報を持たせすぎず、本文の文字だけでも意味が通じるように作ることが大切です。

アイコンを使いすぎない

アイコンを多用すると、ページがにぎやかになりすぎて、どこが重要なのか分かりにくくなります。例えば、すべての段落やすべてのリスト項目に異なるアイコンを付けると、文章よりもアイコンの方が目立ってしまいます。

次のような場所に限定すると、効果的に使いやすくなります。

• 特に重要な注意事項
• 連絡先
• サービスの特徴
• 操作ボタン
• 補足情報
• 見出しの共通装飾

テーマによって表示が異なる可能性がある

アイコンブロックの基本機能はWordPress本体に含まれていますが、実際の見た目はテーマのCSSにも影響されます。

テーマによっては、次のような違いが出ることがあります。

• アイコンの初期サイズ
• 上下の位置
• 行間
• 余白
• 色の選択肢
• 横並びにしたときの位置
• 背景色を設定したときの形

投稿編集画面だけでなく、必ず公開画面でも表示を確認しましょう。スマートフォン表示の確認も必要です。

余白を大きくしすぎない

WordPress 7.0初期のアイコンブロックでは、SVG要素に対する余白の扱いによって、アイコンが見えなくなる可能性が報告されていました。SVGの内側に大きな余白が設定されると、実際の図形が表示範囲の外へ押し出されることがあるためです。

アイコンの周囲に余白を付けたい場合は、アイコンそのものに大きなパディングを設定するよりも、グループブロックや横並びブロックで外側の余白を調整した方が安定する場合があります。

アイコンへリンクを設定できない場合がある

WordPress 7.0の初期実装では、アイコンブロックにリンクを設定する機能は、標準機能として十分に整備されていません。

リンク付きのSNSアイコンにはソーシャルアイコンブロック、リンク付きの操作にはボタンブロックを使用した方が適切です。アイコンを無理にクリック可能な要素として使うよりも、文字付きのボタンにした方が、利用者にとって操作内容が分かりやすくなります。

既存のプラグインと役割を確認する

「Font Awesome」「VK Blocks」「Snow Monkey Blocks」など、すでにアイコン機能を提供しているプラグインを使っている場合があります。

WordPress 7.0へ更新したからといって、既存のアイコン機能をすぐに置き換える必要はありません。

まずは、次の点を比較しましょう。

• 必要なアイコンが公式ブロックにあるか
• 独自アイコンが必要か
• ブランドロゴを使っているか
• アイコンと文字をセットで管理しているか
• リンク付きアイコンが必要か
• 既存記事で大量に使用しているか

基本的な装飾には公式のアイコンブロックを使い、特殊な用途にはプラグインを使うという分け方も可能です。

クラシックテーマでも利用できるのか

アイコンブロックは、ブロックテーマだけの機能ではありません。ブロックエディターを利用している環境であれば、クラシックテーマでも投稿や固定ページ内で利用できます。

ただし、クラシックテーマでは、テーマ側がアイコンブロック向けの細かなスタイル調整を行っていない場合があります。そのため、次の点を確認しておきましょう。

• 編集画面と公開画面で大きさが一致するか
• アイコンと文字の上下位置が合っているか
• テーマの色設定が反映されるか
• スマートフォンで横幅をはみ出さないか
• グループブロック内で正しく表示されるか

ブロックテーマでは、サイトエディターからヘッダーやフッター、テンプレート内にも配置しやすくなります。一方、クラシックテーマでは、主に投稿や固定ページの本文内で使用することになるでしょう。

WordPress 7.0のアイコンブロックはどのような人に向いているか

アイコンブロックは、次のような方に向いています。

• プラグインを増やさずに簡単なアイコンを使いたい方
• 注意事項や補足説明を見やすくしたい方
• 店舗や企業の連絡先を分かりやすく表示したい方
• SVGコードを直接編集したくない方
• テーマの色に合わせてアイコンを変更したい方
• ブロックパターンにアイコンを組み込みたい方

一方で、次のような用途では、WordPress 7.0の標準アイコンブロックだけでは不足する可能性があります。

• 多数のブランドロゴを使いたい
• Font Awesomeのアイコンを使いたい
• オリジナルのSVGアイコンを登録したい
• アイコンをリンクやボタンとして使いたい
• 複雑なアニメーションを付けたい
• アイコンの回転や反転を細かく設定したい

まとめ

WordPress 7.0のアイコンブロックは、WordPressに用意されたSVGアイコンを、ブロックエディターから簡単に挿入できる機能です。

これまでプラグインや画像ファイル、独自のSVGコードに頼っていた基本的なアイコン表示を、WordPressの標準機能だけで行いやすくなりました。

主な特徴は、次のとおりです。

• WordPress公式のアイコン一覧から選べる
• SVG形式なので拡大してもぼやけにくい
• 色や大きさを調整しやすい
• メディアライブラリへ画像を追加する必要がない
• サーバー側でSVGが出力される
• アイコンの更新によるブロックエラーが起こりにくい

一方で、WordPress 7.0の段階では、独自アイコンの登録、アイコンへのリンク、回転や反転などの機能は十分に整っていません。また、アイコンブロックはSVGファイルのアップロード機能ではありません。

WordPress 7.0では、まず公式に用意された基本的なアイコンを安全に利用できる土台が作られたと考えるのが適切です。注意事項、連絡先、補足説明、見出しの装飾など、比較的単純な用途から取り入れてみるとよいでしょう。アイコンだけで意味を伝えようとせず、必要に応じて文字を併記することも大切です。

WordPress 7.1以降では、第三者によるアイコンの登録やアイコン集の追加など、さらに柔軟な仕組みへ発展することが予定されています。今後、WordPressのアイコン機能が、テーマやプラグインを横断した共通の仕組みへ成長していく可能性にも注目です。