AIツールが発展してきた今、WordPressサイトの軽微な改修やシンプルなカスタマイズは、非開発者でもできるようになってきました。

「背景エリアにAという画像を表示したい。」
「ページを開いて何秒後にBというバナー画像を表示したい。」

こうした要望をAIに伝えてコードを生成してもらう場合、どの画像を使うかを正確に伝える必要があります。見た目の説明だけでは判別できないため、多くの場合「画像のIDを教えてください」と聞き返されることになります。

ところが、WordPressの管理画面を普段どおり使っているだけでは、画像IDを目にする機会はほとんどありません。この記事では、そんなときにサッと画像IDを確認する方法を、状況別に4パターン紹介します。

WordPressテーマ「GLUE」
WordPressテーマ「GLUE」
無料で高機能なWordPressテーマが手に入る。

そもそも「画像ID」とは?

WordPressにアップロードした画像は、メディアライブラリの裏側では「添付ファイル」という投稿の一種として、他の投稿や固定ページと同じデータベースに保存されています。このとき自動的に割り振られる連番が「画像ID(メディアID)」です。

URLは画像を編集したりサイズを変更したりすると変わることがありますが、IDは基本的に変わりません。

方法1:メディアライブラリから画像IDを確認する

ほとんどの場合、これだけで解決します。

管理画面のメディア > ライブラリを開き、確認したい画像をクリックすると、詳細情報のパネルが開きます。このときブラウザのアドレスバーを見てください。

メディアライブラリで確認する箇所

メディアライブラリで確認する箇所

.../wp-admin/upload.php?item=123

この「item=」に続く数字が画像IDです。

リスト表示にしている場合は、画像名にカーソルを合わせると下に表示される「編集」リンクの遷移先URLに「post=123&action=edit」という形で番号が入っているので、そちらでも確認できます。

方法2:記事に挿入済みの画像IDを確認する

「メディアライブラリに似た画像がたくさんあって、どれが記事に使われている画像か分からない」という場合は、記事に挿入してる画像からIDを確認したいですよね。次の方法を試してみてください。

コードエディターでHTMLを確認する

WordPressは、メディアライブラリから画像を挿入すると、自動的にclass="wp-image-123"というクラス名をimgタグに付与します。この数字の部分がそのまま画像IDです。

エディタ内で確認する箇所

エディタ内で確認する箇所

ブロックエディターの右上にあるオプションメニュー(︙)から「コードエディター」に切り替えると、投稿のHTMLソースが確認できます。画像を挿入した箇所を探し、wp-image-の後ろの数字を見てください。

確認が終わったら、誤ってHTMLを書き換えてしまわないように、ビジュアルエディターに戻してから作業を続けましょう。

公開済みのページなら「ページのソースを表示」でもOK

すでに公開済みの記事であれば、編集画面を開かなくても確認できます。該当ページをブラウザで表示し、右クリックから「ページのソースを表示」を選択。

ページのソース内の画像ID

ページのソース内の画像ID

Cmd+F(Windowsの場合はCtrl+F)で「wp-image」を検索すれば、同じように見つけられます。

方法3:画像のURLからIDを調べる方法

手元に画像のURLしかない場合の方法です。

添付ファイルページが存在する場合

パーマリンク設定が「基本」(プレーン)になっているサイトでは、添付ファイルページのURLが次のような形式になります。

https://example.com/?attachment_id=123

この場合はURLの数字がそのまま画像IDです。ただし、多くのサイトはパーマリンクを変更しているため、この形式に当てはまらないケースの方が多いです。

attachment_url_to_postid()関数を使う(少し専門的)

ここから先は、コードを扱える方向けの内容です。

WordPressには、画像URLから添付ファイルIDを取得する attachment_url_to_postid() という関数が標準で用意されています。functions.phpやコードスニペット系プラグイン(WPCodeなど)で一時的に次のようなコードを実行すれば、IDを取得できます。

$id = attachment_url_to_postid( '画像のURL' );
var_dump( $id );
URLは「-1024×683」のようなサイズ違いのファイル名ではなく、オリジナル画像のURLを使うのがポイントです。確認が終わったら、追加したコードは必ず削除してください。

方法4:複数の画像IDをまとめて確認したいとき

大量の画像を扱っていて、いちいち1枚ずつ確認するのが手間な場合は、「Reveal IDs」のようなプラグインが便利です。

メディアライブラリをはじめとした管理画面の一覧に、ID列がまとめて表示されるようになります。

メディアライブラリのリスト表示時にID列が表示されている

メディアライブラリのリスト表示時にID列が表示されている

頻繁にIDを確認する機会がある場合は、導入しておくと効率的です。

まとめ

WordPressの画像IDの確認方法を4種類ご紹介しました。状況に応じて使い分けてみてください。

状況 おすすめの方法
とりあえず確認したい 方法1:メディアライブラリの詳細画面
記事に挿入済みの画像を確認したい 方法2:コードエディター/ページのソースを表示
画像のURLしか手元にない 方法3:添付ファイルページ/attachment_url_to_postid()
大量の画像をまとめて確認したい 方法4:IDを一覧表示できるプラグイン

IDさえ分かれば、あとはAIに「画像ID◯◯を使って、こういう表示にして」と伝えるだけで、コード生成がぐっとスムーズになります。冒頭で触れたようなカスタマイズも実現しやすくなるはずです。

そのほか、ページIDやカテゴリーIDを調べる方法は下記記事でご紹介しています。

世界最高品質のデザインの
WordPressテーマ集
WordPressテーマ「ISSUE」
WordPressテーマ「ISSUE」
人材不足を解決する求人採用サイトを。
WordPressテーマ「SEEED」
WordPressテーマ「SEEED」
Webサービスを販売するLP型テーマ。
WordPressテーマ「GENESIS」
WordPressテーマ「GENESIS」
スタイリッシュな企業サイトの決定版。
WordPressテーマ「SOLARIS」
WordPressテーマ「SOLARIS」
一流の企業のための一流の企業サイトを。