wordpress
WordPressで投稿に際してのメディアモーダルの表示数変更
最終更新日: 2025年5月20日
管理しているサイトだが、1000以上のメディア（ほぼimg）があるが、ライブラリ画像を使いまわす際などに画像を探すのに手間がかかる。
80ずつ表示されていて更に画像を表示させる際は、クリックとローディング待ち時間を要すのだが、これが管理者としては甚だ面倒。
小さなことだが、この80という表示数をカスタムするコード。
add_filter('ajax_query_attachments_args', function($query) {
if (isset($query['post_type']) && $query['post_type'] === 'attachment') {
$query['posts_per_page'] = 100; // 表示件数を100件に設定
$query['no_found_rows'] = false; // ページネーションを有効化
$query['orderby'] = 'date'; // 並び順を投稿日時に設定
$query['order'] = 'DESC'; // 降順で表示 } // デバッグ用ログを出力
error_log('Modified query for attachments: ' . print_r($query, true));
return $query;
});
これをfunction.phpに追記すればテーマにもよるが200ずつ表示になる。
200を任意の数値にすれば表示数を変えられるが、大きい数字にしてローディング等がどうなるか検証をしていないことから節度を持った使い方がベターかも。
上記コードではページネーションの初期値80がそのまま残るのでメディアすべてが表示されなくなる
ってことで修正。
PNの区切り数値を表示数と整合させる必要があったので、AI使って修正。
ついでに設定画面option-generalで数値入力して変えられるようにした。
// メディアモーダルの表示数変更add_action('admin_init', function() {// 設定フィールドの登録register_setting('general', 'media_posts_per_page', 'absint');
// カスタムフィールドを追加add_settings_field('media_posts_per_page','Media Modal Posts per Page',function() {$value = get_option('media_posts_per_page', 80);?><input type="number" id="media_posts_per_page" name="media_posts_per_page" value="<?php echo esc_attr($value); ?>" min="1" class="small-text" /><p class="description">初期値: 80.</p><?php},'general','default',array('label_for' => 'media_posts_per_page'));
error_log('admin_init hook fired for media_posts_per_page');});
// サーバー側のAJAXクエリをカスタマイズadd_filter('ajax_query_attachments_args', function($query) {if (isset($query['post_type']) && $query['post_type'] === 'attachment') {$desired_posts_per_page = get_option('media_posts_per_page', 80);$query['posts_per_page'] = absint($desired_posts_per_page);$query['orderby'] = 'date';$query['order'] = 'DESC';// ページネーション$query['paged'] = isset($_REQUEST['paged']) ? absint($_REQUEST['paged']) :(isset($_REQUEST['query']['paged']) ? absint($_REQUEST['query']['paged']) : 1);
error_log('AJAX query args: ' . print_r($query, true));}return $query;}, 10);
// クライアント側のメディアモーダルをカスタマイズadd_action('admin_footer', function() {$posts_per_page = get_option('media_posts_per_page', 80);?><script>jQuery(document).ready(function($) {// アイキャッチモーダルのカスタマイズvar originalFeaturedImageFrame = wp.media.featuredImage.frame;wp.media.featuredImage.frame = function() {var frame = wp.media({library: {type: 'image',posts_per_page: <?php echo esc_js($posts_per_page); ?>,orderby: 'date',order: 'DESC'},title: 'アイキャッチ画像を選択',multiple: false,button: {text: 'アイキャッチ画像を設定'}});
// フレームが開くたびにクエリをリセットframe.on('open', function() {var collection = frame.content.get().collection;if (collection) {collection.query({posts_per_page: <?php echo esc_js($posts_per_page); ?>,orderby: 'date',order: 'DESC',paged: 1});collection.fetch({ remove: true });console.log('Featured image frame opened. Posts per page: ', <?php echo esc_js($posts_per_page); ?>);}});
// アイキャッチ画像選択時の処理frame.on('select', function() {var selection = frame.state().get('selection');var attachment = selection.first().toJSON();wp.media.featuredImage.set(attachment.id);console.log('Featured image selected: ID ', attachment.id);});
return frame;};
// メディアクエリのデフォルト設定var originalQuery = wp.media.query;wp.media.query = function(props) {props = $.extend({posts_per_page: <?php echo esc_js($posts_per_page); ?>,orderby: 'date',order: 'DESC'}, props);console.log('Media query initialized. Posts per page: ', props.posts_per_page);return originalQuery(props);};
// メディアライブラリのロードモア処理を監視wp.media.on('content:render:upload', function() {var collection = wp.media.frame.content.get().collection;if (collection) {collection.query({posts_per_page: <?php echo esc_js($posts_per_page); ?>,orderby: 'date',order: 'DESC'});console.log('Load more triggered. Posts per page: ', <?php echo esc_js($posts_per_page); ?>);}});});</script><?php});
もちろんテーマによるが、写真枚数があって使いまわしなどする場合は便利かも。
逆に80から減らすのもOK。
一応
投稿での画像挿入
投稿のアイキャッチ指定
メディアライブラリページ
この三か所で動く筈、アイキャッチ部分でのデフォルト値80の上書きで難儀したが、どうにか動いた。
デフォルトテーマでは試してないが、当スタジオオリジナルとどこかの制作さんのテーマでは動いたので、大概大丈夫かな。
ただWPのバージョン変わってこの数値制御関係変わったらダメかな、その際はコード消してデフォルト値で使えるのでそのように。