画像の撮影データ(EXIF情報)をメディアの一覧へ表示する方法

公開日:2024(令和6)年4月3日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



カメラの撮影時に保存され、サイトへアップロードした時に転送されるデータ(EXIF情報)を、管理画面のメディアライブラリの一覧へ表示させるためのコードを紹介します。

管理画面上では通常アップロード日しか表示されないので、撮影日を知りたいといった時などに便利かと思います。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

EXIF情報をメディア一覧へ表示する手順

今回はメディアライブラリの一覧へ列とデータを追加するという内容で紹介していますが、管理画面の一覧へ列を追加する基本的な流れは同じなので、以下のようにコードを整備すると覚えておくとよいでしょう。

これを踏まえ、今回はメディアの一覧へカラム・データを出力したいので「manage_media_columns」「manage_media_custom_column」へフックさせるようにします。

では、1つずつコードを追加していきましょう。

コードは有効化しているテーマのfunctions.phpへ追加して動作させます。コードの追加に不慣れな方や、トラブル発生時に対処が難しい方はご遠慮ください(トラブル等の責任は一切負いません)

メディアライブラリの一覧へカラム(列)を追加する

まずは取得したEXIF情報を表示させる列を作成します。今回は「撮影日」「機種」「ISO」を表示させるための列を追加します。

/***** メディアにEXIF情報を表示 *****/
/* メディア一覧にカラム追加 */
function pwcn_media_columns_exif( $posts_columns ) {
	$posts_columns['ph_exif_date'] = __( '撮影日' );
	$posts_columns['ph_used_camera'] = __( '機種' );
	$posts_columns['ph_iso'] = __( 'ISO' );

	return $posts_columns;
}
add_filter( 'manage_media_columns', 'pwcn_media_columns_exif' );

コード中の「ph_exif_date」がプログラム上で「撮影日」、「ph_used_camera」が「機種」、「ph_iso」が「ISO」とプログラムが認識するようにしています(この列に次項のデータを表示させます)

それぞれのカラムへデータを表示させる

表示するデータを抽出し、前項のコードで作成したカラム(列)へ紐づけるためのコードを追加します。

/* カラムにデータを表示 */
function pwcn_media_custom_column_exif( $column_name, $post_id ) {

	$meta = wp_get_attachment_metadata($post_id);

	//カメラ
	if ( $column_name == 'ph_used_camera') {
		$used_camera = $meta['image_meta']['camera'];
		if(!empty($used_camera)){
			$data = $used_camera;
		}else{
			$data = __( 'データなし' );
		}
	}

	//撮影日
	if ( $column_name == 'ph_exif_date') {
		$unix_time = $meta['image_meta']['created_timestamp'];
		if(!empty($unix_time)){
			$data = date_i18n( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $unix_time );
		}else{
			$data = __( 'データなし' );
		}
	}

	//iso
	if ( $column_name == 'ph_iso') {
		$iso = $meta['image_meta']['iso'];
		if(!empty($iso)){
			$data = $iso;
		}else{
			$data = __( 'データなし' );
		}
	}

    //各列にデータを出力
    if(!empty($data)){
    	echo $data;
    }else{
    	echo '';
    }
}

add_action( 'manage_media_custom_column', 'pwcn_media_custom_column_exif', 10, 2 );

「撮影日」「機種」「ISO」ともコードの流れは同じで、以下のように書いています。

  1. カラム名(ph_exif_dateなど)が追加されているかを判断
  2. データを取得して、$dataという変数へ格納

そして最後に$dataを出力させています。

EXIFデータ中の日付と時刻はシリアル(UNIX時刻)なので、WordPressサイトの日付フォーマットへ変換するためのコードを書き加えています

ここまで追加した段階でメディアライブラリを開いてみると、カメラからアップロードした画像で「撮影日」「機種」「ISO」情報のあるものにはその値が、ないものは「データなし」と表示されるはずです。

列の表示崩れを防ぐ

列とデータの追加自体は前項までを行えば大丈夫です。

ただ、各列の幅を指定しておかないと、一覧に表示する列が増えた時に欄外に表示されてしまったり、表示が不用意に縦に並んでしまったりするので、以下のコードで全部の列の合計のうちの10%(ちょっとややこしいのでこの程度の説明にとどめます)が確保されるようにします。

/* 管理画面上のスタイル */
function pwcn_admin_media_exif_column_style_init(){
?>
<style>
.column-ph_exif_date,
.column-ph_used_camera,
.column-ph_iso
{width:10%;}
</style>
<?php
}
add_action('admin_head','pwcn_admin_media_exif_column_style_init');

このコード中のCSSクラス指定にも「ph_exif_date」「ph_used_camera」「ph_iso」が出てきます。それ位、このカラムに指定する文字列は重要でサイトの中で一意でないといけないのが理解できると思います。

QA Analytics QA Analytics

取得できるEXIFデータ

このデータは、「post_meta」テーブルの「_wp_attachment_metadata」に、「image_meta」として以下のような配列(サブ項目)で保存されています。

今回紹介したコード中で、例えば「camera」は、列のデータを$meta[‘image_meta’][‘camera‘];で引き出していまますから、この文字列を以下に変えればそのデータが呼び出せます。

image_metaの項目内容
aperture撮影時のレンズの絞り値
credit画像の著作権者やクレジット情報
camera使用されたカメラの情報
caption画像のキャプション
created_timestamp画像が作成されたタイムスタンプ
UNIX時刻なので日付形式への変換が必要
copyright画像の著作権情報
focal_length使用されたレンズの焦点距離
iso撮影時のISO感度
shutter_speed使用されたシャッタースピード



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法