@yoidoreoさんからの要望でやってみました。
WordPressで画像を記事内に挿入する際、以前紹介した『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』を使っています。
私は画像が大量にある時には、画像に連番付けてFTPで上げてから、記事内にイメージタグをコピペして番号だけ手打ちしています。
@yoidoreoさんはそうではなく、メディアライブラリで全部上げてからポップアップ表示してリストから挿入しているらしいです。
で、挿入する際一々画像の詳細を表示してからじゃないと画像が挿入できません。
詳細の一番下に『投稿に挿入』ボタンがあるんですから。
要は何を行ったかと言うと、
・ 画像のリスト表示部にも挿入ボタンが欲しい。
・ ついでにリストに表示する数も増やしたい。
・ ついでにサムネイル画像の大きさも変えたい。
以上3つをやってみました。
結論から言うと、以下のようになります。
変更前
変更後
では変更方法です。
1画像のリスト表示部にも挿入ボタンが欲しい
詳細を表示した際にあるボタンをリスト部に持ってくるだけなので簡単なんですが、デザイン的に崩れたりしてしまうので、ちょっとだけ手を加える必要があります。
デザインなんか関係ねぇって人はいいんでしょうけど。
では、『wp-admin/includes/media.php』を開きます。
まずはボタンを設置する方法です。
media.php 1165行目~ (2.9.2の場合)
if ( $toggle ) {
$class = empty($errors) ? 'startclosed' : 'startopen';
$toggle_links = "
<a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
<a class='toggle describe-toggle-off' href='#'>$toggle_off</a>";
} else {
$class = 'form-table';
$toggle_links = '';
}
上記のコード内に、ボタンを表示するコードを付け足します。
ついでにCSSも直接書いてみました。
media.php 1165行目~ (2.9.2の場合)
if ( $toggle ) {
$class = empty($errors) ? 'startclosed' : 'startopen';
$toggle_links = "
<a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
<a class='toggle describe-toggle-off' href='#'>$toggle_off</a>
<div style=\"float:right; margin:5px 10px 0 0;\"><input type='submit' class='button' name='send[$attachment_id]' value='" . esc_attr__( 'Insert into Post' ) . "' /></div>";
} else {
$class = 'form-table';
$toggle_links = '';
}
青色のコードがCSSなんですが、『float:right;』を入れないと、画像タイトルの上にボタンが来てしまいます。
見栄え悪いし、使いづらいかとも思います。
私はシングルクォーテーションよりダブルクォーテーションの方が好きなので『¥”』の書き方にしています。
Windowsの人は『¥』でいけますが、Macの人はバックシュラッシュになります。
素直にシングルクォーテーション( ’ )だけでもOKです。
2ついでにリストに表示する数も増やしたい
同じ『media.php』の
2 3 箇所を変更する必要があります。
media.php 1807行目(ボタンコード未挿入時) (2.9.2の場合)
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );
追記
上記の変更だけでは、ページを送った際10個ダブった表示になるので、もう1箇所変更しなければいけません。
media.php 1801行目(ボタンコード未挿入時) (2.9.2の場合)
$_GET['paged'] = isset( $_GET['paged'] ) ? intval($_GET['paged']) : 0;
if ( $_GET['paged'] < 1 )
$_GET['paged'] = 1;
$start = ( $_GET['paged'] - 1 ) * 10;
if ( $start < 1 )
$start = 0;
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );
media.php 1870行目(ボタンコード未挿入時) (2.9.2の場合)
'total' => ceil($wp_query->found_posts / 10),
上記の『 10 』を20や30にする事で、リストに表示される数が増えます。
同じ数にしないと表示が変になると思うので、同じにしておいた方が良いと思います。
3ついでにサムネイル画像の大きさも変えたい
リストに表示されているサムネイル画像の大きさは、CSSで変更しているらしいです。
サムネイル画像には以下のCSSが使われています。
.media-item .pinkynail {
float: left;
margin: 2px;
max-width: 40px;
max-height: 32px;
}
『max-width』と『max-height』の大きさを変更すれば良いだけです。
削除すると画像がそのままの大きさで表示されてしまうので、とんでもない事になります。
適度な大きさにしておいた方が良いと思います。(50×50 pxとか)
変更したい方は『wp-admin/wp-admin.css』を開きます。
スペースが入っていない軽量版のCSSなので、『
.media-item .pinkynail』で検索すれば該当するCSSクラスが引っかかると思います。
IE版のCSSは別ファイルになります。
wp-admin/css/ie.css 414行目~ (2.9.2の場合)
* html .media-item .pinkynail {
height: 32px;
width: 40px;
}
上記の大きさを『wp-admin.css』と同じにしましょう。
IE使ってない人は別に変更しなくても大丈夫だと思います。
100px × 100px とかにした人は分かると思いますが、画像に『float: left;』が入っていてPHPのソース内にはクリアータグが入っていません。
なので、メチャクチャな表示になると思います。
その場合は、『media.php』の以下の箇所にクリアータグを追加します。
media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<table class='slidetoggle describe $class'>
上記タグの間に以下のクリアータグを追加します。
media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<div style=\"clear:both;\"></div>
<table class='slidetoggle describe $class'>
簡単に見ただけなので、何か問題があればコメントください。