WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
How to add a file size display to the media list on the WordPress administration screen [Note]

WordPress管理画面のメディア一覧にファイルサイズの表示を追加する方法【備忘録】

公開日:2020年12月19日 使い方など

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

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

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

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

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

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

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

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

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

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

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

このカスタマイズは、テーマの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をつかいこなす第一歩でしょう。

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

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】