ページの表示速度を上げるのに最低限気を遣うべき画像のファイルサイズ。
画像の縦横の大きさじゃないですよ！！ファイルの大きさです！！
最近ではデジカメやスマホで撮影した写真をそのままアップロードすると平気でメガバイト級のファイルサイズになってしまうことが多いと思います。
それをWordPressさんがアップロードと同時に標準で90%のきめ細やかさに調整し、それを元に「大」「中」「小」＋プラグインやテーマで指定されたサイズの画像を作って・・・なんてことをしてくれて、投稿などに何気なく挿入した画像が表示されてるんです。偉いですねぇ～素晴らしいですねぇ～。
でも、何枚もそんな画像があったら・・・総合的なページのサイズはすごいことになってしまいますから、それが原因で表示が遅くなったり、アクセス数の多いサイトでは処理が大変になったりして待ち時間増大なんて事態になってしまうこともあります。
ページ表示の最適化にとって大切な要素である画像のファイルサイズですが、１つ１つの画像の編集リンクをクリックすれば確認できるようにはなっています。でも、そんなのいちいち確認するのはちょっと面倒ですよね？そこでファイルサイズの情報をメディア一覧で見れたら・・というのが今回のテーマです。
今回の方法でファイルサイズを表示させると、↓の画像の赤枠部分のようになります
リストの中から「ちょっと大きいファイルサイズだなぁ」という画像を見つけて、プラグインなどを駆使して軽くした画像と入れ替えれば、よりユーザビリティの高いページを作ることができます。
※画像の圧縮や入れ替えの方法はまた別の情報として公開する予定をしていますのでお楽しみに！
※本記事は一生懸命検索して探してたどり着いたコード（文末の参照先）をほぼそのまま紹介するものですので、私個人の備忘録として公開させていただいております。
後半ではファイルサイズのほか、画像の縦横サイズを一緒に表示させる方法を紹介していますので、必要な方をお使いください。
メディア一覧へファイルサイズを表示する方法
このカスタマイズは、テーマの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メディアライブラリのファイルサイズ管理列
ファイルサイズ(KB)＋画像の縦横サイズ(px)の両方を表示させる方法
前述したファイルサイズ（容量）に加え、その下へ画像の幅と高さを表示させることができましたので、追加事項として紹介しておきます。
実装するには以下のコードを使います。
上で紹介したコードとそっくり入れ替えてください（単純に追記した場合には上で紹介したコードが優先されます）。
/***** メディアにファイルサイズを表示 *****/
/* ユーザー定義 メディア一覧にカラム追加 */
if ( !function_exists( 'hab_media_columns_filesize' ) ){
function hab_media_columns_filesize( $posts_columns ) {
$posts_columns['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 ).'<br>';
echo 'W'.$meta['width'].' x h'.$meta['height'].'(px)';
}
}
/* ユーザー定義 カラムの幅調整 */
if ( !function_exists( 'hab_filesize_column_filesize' ) ){
function hab_filesize_column_filesize() {
echo
'<style>
.fixed .column-filesize {
width: 12%;
}
</style>';
}
}
/* 有効化 */
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>
コードが有効になると、メディア一覧は図のように表示されるようになります。
機能実装の参考にさせていただいたページ
本機能は以下のページで紹介されているコードを参考にしました。
How to Add Dimensions Column to WordPress Media Library
Show file size in WordPress Media library
本記事の更新（変更）履歴
| 更新日 | 更新内容 |
|---|---|
| 2020年12月19日 | WordPress管理画面のメディア一覧にファイルサイズの表示を追加する方法【備忘録】を公開しました |
| 2021年 7月13日 | ファイルサイズに加え、画像の縦横サイズも表示させる方法を追記しました |
