アクセス数： ｜ 今日： ｜ 昨日： 　 記事数：996

HOME ｜ SITE MAP ｜ BOOKMARK ｜ TAG CLOUD

【WordPress】記事に画像を挿入するのを簡単にする方法

2010年 6月 1日（火） [2:49] 1,964 views
Comments (16) Trackbacks (3)
Category ： WordPress > Tips
『【WordPress】記事に画像を挿入するのを簡単にする方法』をはてなブックマーク

WordPress - メディアライブラリ@yoidoreoさんからの要望でやってみました。

WordPressで画像を記事内に挿入する際、以前紹介した『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』を使っています。

私は画像が大量にある時には、画像に連番付けてFTPで上げてから、記事内にイメージタグをコピペして番号だけ手打ちしています。
@yoidoreoさんはそうではなく、メディアライブラリで全部上げてからポップアップ表示してリストから挿入しているらしいです。
で、挿入する際一々画像の詳細を表示してからじゃないと画像が挿入できません。
詳細の一番下に『投稿に挿入』ボタンがあるんですから。

要は何を行ったかと言うと、

・ 画像のリスト表示部にも挿入ボタンが欲しい。
・ ついでにリストに表示する数も増やしたい。
・ ついでにサムネイル画像の大きさも変えたい。
以上3つをやってみました。

結論から言うと、以下のようになります。
変更前
WordPress - メディアライブラリ

変更後
WordPress - メディアライブラリ

では変更方法です。

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'>


簡単に見ただけなので、何か問題があればコメントください。

関連する記事

Trackback URL

＊リンク先が18禁サイトの場合は削除しています。
＊当ブログにリンクが貼られていない場合は削除しています。
Tag ： , , ,

17 Tweets

コメント　(16)

トラックバック　(3)

  1. WordPressハッカーズ
    米が好き｜ 【WordPress】記事に画像を挿入するのを簡単にする方法 この記事は以下サイトで紹介されています。 WordPressハッカーズ
  2. WordPress メディアライブラリで連続して画像を挿入する方法 | 酔いどれオヤジのブログwp
    [...] • ❑ さすが @kuu-san です、あっという間に出来上がり公開されました。 [...]
  3. Bookmarks of This Week (5/30-6/6) - Sometime PHP
    [...] 米が好き｜ 【WordPress】記事に画像を挿入するのを簡単にする方法 [...]

コメントを書く

＊必須です。

＊必須です。（公開されません）
GRAVATARに登録していると、アイコンが表示されます。

＊リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType