WordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法【備忘録】

WordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法【備忘録】

ページの表示速度を上げるのに最低限気を遣うべき画像のファイルサイズ。

画像の縦横の大きさじゃないですよ!!ファイルの大きさです!!

最近ではデジカメやスマホで撮影した写真をそのままアップロードすると平気でメガバイト級のファイルサイズになってしまうことが多いと思います。

それをWordPressさんがアップロードと同時に標準で90%のきめ細やかさに調整し、それを元に「大」「中」「小」+プラグインやテーマで指定されたサイズの画像を作って・・・なんてことをしてくれて、投稿などに何気なく挿入した画像が表示されてるんです。偉いですねぇ~素晴らしいですねぇ~。

でも、何枚もそんな画像があったら・・・総合的なページのサイズはすごいことになってしまいますから、それが原因で表示が遅くなったり、アクセス数の多いサイトでは処理が大変になったりして待ち時間増大なんて事態になってしまうこともあります。

ページ表示の最適化にとって大切な要素である画像のファイルサイズですが、1つ1つの画像の編集リンクをクリックすれば確認できるようにはなっています。でも、そんなのいちいち確認するのはちょっと面倒ですよね?そこでファイルサイズの情報をメディア一覧で見れたら・・というのが今回のテーマです。

今回の方法でファイルサイズを表示させると、↓の画像の赤枠部分のようになります

WordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法【備忘録】|Knowledge Base

リストの中から「ちょっと大きいファイルサイズだなぁ」という画像を見つけて、プラグインなどを駆使して軽くした画像と入れ替えれば、よりユーザビリティの高いページを作ることができます。

※画像の圧縮や入れ替えの方法はまた別の情報として公開する予定をしていますのでお楽しみに!

※本記事は一生懸命検索して探してたどり着いたコード(文末の参照先)をほぼそのまま紹介するものですので、私個人の備忘録として公開させていただいております。

後半ではファイルサイズのほか、画像の縦横サイズを一緒に表示させる方法を紹介していますので、必要な方をお使いください。

メディア一覧へファイルサイズを表示する方法

このカスタマイズは、テーマのfunctions.phpへコードを追記することで簡単に実現します。が、テーマのfunctions.phpはWordPressにとって大変大切なファイルなので、functions.phpって何?という方は、見送られた方が無難だと思います。

追記するコードは以下になります

/***** メディアにファイルサイズを表示 *****/
/** メディア一覧にカラム追加 **/
if ( !function_exists( 'hab_media_columns_filesize' ) ):
function hab_media_columns_filesize( $posts_columns ) {
	$posts_columns['filesize'] = __( 'File Size', 'my-theme-text-domain' );

	return $posts_columns;
}
add_filter( 'manage_media_columns', 'hab_media_columns_filesize' );
endif;

/** サイズを表示 **/
if ( !function_exists( 'hab_media_custom_column_filesize' ) ):
function hab_media_custom_column_filesize( $column_name, $post_id ) {
	if ( 'filesize' !== $column_name ) {
		return;
	}

	$bytes = filesize( get_attached_file( $post_id ) );

	echo size_format( $bytes, 2 );
}
add_action( 'manage_media_custom_column', 'hab_media_custom_column_filesize', 10, 2 );
endif;

/** カラムの幅調整 **/
if ( !function_exists( 'hab_filesize_column_filesize' ) ):
function hab_filesize_column_filesize() {
	echo
	'<style>
		.fixed .column-filesize {
			width: 10%;
		}
	</style>';
}
add_action( 'admin_print_styles-upload.php', 'hab_filesize_column_filesize' );
endif;

上記コードをテーマのfunctions.php末尾へ追加すれば、ほかに何もする必要なく、

WordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法【備忘録】|Knowledge Base

のように表示されるようになります。

今回は地味なカスタマイズですが、こうやって管理も便利にしていくというのもWordPressをつかいこなす第一歩でしょう。

参考:WordPressメディアライブラリのファイルサイズ管理列

ファイルサイズ(KB)+画像の縦横サイズ(px)の両方を表示させる方法

前述したファイルサイズ(容量)に加え、その下へ画像の幅と高さを表示させることができましたので、追加事項として紹介しておきます。

実装するには以下のコードを使います。

上で紹介したコードとそっくり入れ替えてください(単純に追記した場合には上で紹介したコードが優先されます)。

/***** メディアにファイルサイズを表示 *****/
/* ユーザー定義 メディア一覧にカラム追加 */
if ( !function_exists( 'hab_media_columns_filesize' ) ){
function hab_media_columns_filesize( $posts_columns ) {
	$posts_columns&#91;'filesize'] = __( 'File Size', 'ha-basic' );

	return $posts_columns;
}
}

/* ユーザー定義 サイズを表示 */
if ( !function_exists( 'hab_media_custom_column_filesize' ) ){
function hab_media_custom_column_filesize( $column_name, $post_id ) {
	if ( 'filesize' !== $column_name ) {
		return;
	}

	$bytes = filesize( get_attached_file( $post_id ) );
    $meta = wp_get_attachment_metadata($id);
	
		echo size_format( $bytes, 2 ).'&lt;br&gt;';
           echo 'W'.$meta&#91;'width'].' x h'.$meta&#91;'height'].'(px)';
}
}

/* ユーザー定義 カラムの幅調整 */
if ( !function_exists( 'hab_filesize_column_filesize' ) ){
function hab_filesize_column_filesize() {
	echo
	'&lt;style&gt;
		.fixed .column-filesize {
			width: 12%;
		}
	&lt;/style&gt;';
}
}

/* 有効化 */
add_filter( 'manage_media_columns', 'hab_media_columns_filesize' );
add_action( 'manage_media_custom_column', 'hab_media_custom_column_filesize', 10, 2 );	
add_action( 'admin_print_styles-upload.php', 'hab_filesize_column_filesize' );</code></pre>

コードが有効になると、メディア一覧は図のように表示されるようになります。

WordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法【備忘録】|Knowledge Base

機能実装の参考にさせていただいたページ

本機能は以下のページで紹介されているコードを参考にしました。

How to Add Dimensions Column to WordPress Media Library

Show file size in WordPress Media library

本記事の更新(変更)履歴

更新日更新内容
2020年12月19日WordPress管理画面のメディア一覧にファイルサイズの表示を追加する方法【備忘録】を公開しました
2021年 7月13日ファイルサイズに加え、画像の縦横サイズも表示させる方法を追記しました

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球