【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法

『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』をはてなブックマーク この記事をクリップ! この記事をTwitterでつぶやく

WordPress - メディアライブラリ以前から各所で声があり、ちょっと調べてやってみました。

その声とは・・・
「WordPressの投稿画面で画像を挿入する時、一々フラッシュが立ち上がり1枚挿入したら消えてしまう。
連続で挿入する時もの凄く面倒だから、ずっと表示していて欲しい」
 との事。

機会があったらやってみようと思ってましたのでやってみました。
いやー、4・5時間かかっちゃったよ。w

結果的に何をしたかと言うと、
・画像挿入画面をポップアップで出す。
・1枚挿入しても、そのまま表示させる。
以上2点だけです。
それだけの為に何時間も・・・。

その何時間もかかった結晶(?)は以下より。


基本的に、画像を挿入する場合以下のような画面になります。
画像を1枚挿入する度に、この画面が消えてしまう。
WordPress - メディアライブラリ

別ウィンドウで出しても、結局タブなりウィンドウなりを切り替えなきゃいけないので面倒。
なもんでポップアップ表示にしてみました。

結果から言うとこんな感じになります。
WordPress - メディアライブラリ

画像を挿入しても、ポップアップは残ったまま。
あらステキ。w
やり方は分かってみれば超簡単。
1つのファイルの2箇所を変えるだけです。

では、『wp-admin/includes/media.php』を開きます。
まずはポップアップで表示する方法。

media.php 366行目 (2.9の場合)

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

以上のコードが、フラッシュで表示させるコードになっています。
これを残しても良いし書き換えても良しです。
以下のコードは“残す”パターンで、2種類のボタンが並ぶようにしてます。

media.php 366行目~
<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>
<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

赤字が追加した文です。
1つずつ説明しますと、
『scrollbars=yes』スクロールを表示するようにしています。
これが no だと、下の方が見えなくなってしまいます。
『Width=650,Height=700』ポップアップ表示した時の横幅(Width)と高さ(Height)です。
横幅は600で横スクロールが出たので、コレぐらいが丁度良いかも。
高さは好みの高さ指定をどうぞ。(ピクセル単位です)
『top=0,left=0』デスクトップにポップアップを表示した時の場所を指定しています。
上(top)、下(bottom)、右(right)、左(left)で指定出来ます。(これもピクセル単位です)

ポップアップ表示した時に、表示するページ指定も出来ます。
タブで『コンピューターから』『URLから』『ギャラリー』『メディアライブラリ』と4つに分かれており、最初は『コンピューターから』になっています。
最初から別のタブで表示させたい場合は、以下のようになります。

『コンピューターから』は変更なし。
<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『URLから』
<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=type_url','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『ギャラリー』
<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=gallery','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『メディアライブラリ』
<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=library','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>


後は1番苦労した、ポップアップを閉じない方法。

media.php 169行目~
<?php
  exit;
}
これを
<?php
  #exit;
}

コメントアウトなり削除なりをすれば良いだけです。
こ、こ、これだけに数時間も・・・・・・。orz


当然の事ながらWordPressのバージョンアップがあった場合、毎回書き換えなければいけません。
まぁ、たったコレだけの事なのでプラグインに頼る程でもないですね。

『動画』『音声』『メディア』は使った事無いので無視してます。
では、よきWordPress生活をっ!


追記
表示アイコンを変えたい場合などは、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』に書きましたので、合わせてどうぞ。

トラックバック (3)

  1. iPhone D’s Focus【20091225-26版】 | 覚醒する?Club D's iPhone 3GS - CDiP β0.43
    [...] ュではなくポップアップにする方法 http://kome-suki.net/archives/5934 【米が好き】 [...]
  2. WordPress 画像挿入ウィンドウを別ウィンドウで表示 | 酔いどれオヤジのブログwp
    [...] [...]
  3. ゆめとちぼーとげんじつと
    WordPress の管理画面で記事を投稿する際に画像を連続挿入する方法について PC 上の WordPress で記事する際、画像を挿入するには毎回アップローダのウィンドウを開く必要があります。 複数画像を連続投稿する場合には、これが非常に面倒くさいのですが、WordPress 2....

コメントを書く

Name

E-Mail

Website address