tips

My upload images : メディアアップローダー付きのカスタムフィールドを設置するプラグイン。

sc-2014-10-02-16.38

PLUGIN : MY UPLOAD IMAGES

My upload imageswordpress.orgから最新版をダウンロードしてください

 

wordpressの投稿画面にメディアアップローダー付きのメタボックスを設置

カスタムフィールドテンプレートなどの便利なプラグインがあるので、画像だけのメタボックスが必要になることは少ないでしょう。しかしシンプルな設計のギャラリーページなどには多機能すぎることもしばしばあります。My upload imagesは機能をシンプルにして画像の並べ替えとIDの取得にのみ特化したプラグインです。

投稿タイプを指定します

メタボックスを表示する投稿タイプを管理画面の「設定」から選択できます。
screenshot-1-jp

カスタムフィールドに画像IDを登録する

オリジナルテンプレートでポートフォリオのような機能を持たせつつ普通のエントリにも添付画像を使いたい、なんてテーマを作るときはギャラリー用のメディアアップローダーを設置してカスタムフィールドにIDを登録したりできると便利です。「画像の追加・削除」ボタンでアップローダーが起ち上がります。get_post_metaで呼び出してforeachすれば画像のIDを取ることができます。(下記参照)

ドラッグで手軽に画像を並べ替える

管理者画面のsortable.jsを流用しています。ドラッグでソートできる他、サムネイルの右上の×印をクリックするとカスタムフィールドからIDを削除できます。

レスポンシブに対応

WPの管理画面のレスポンシブデザインに対応して自由な位置にメタボックスを表示できます。

 

設置&出力方法

プラグインとして読み込み、有効化して下さい。「設定」リンク内にある「マイアップロード画像」より投稿タイプを指定して下さい。

テーマ内で使用するには、ループ中でカスタムフィールドの配列を呼び出します。例えば、下のようになります。

シンプルな出力例

<?php
$my_upload_images = get_post_meta( $post->ID, 'my_upload_images', true );
if ( $my_upload_images ): foreach( $my_upload_images as $img_id ):
 $full_src = wp_get_attachment_image_src ($img_id,'fullsize');
 if ( !$full_src ) continue;
 echo 
 '<a href="'.$full_src[0].'">'.wp_get_attachment_image ($img_id,'thumbnail').'</a>'."n";
endforeach; endif; 
?>

画像に付随する色々なデータを扱う場合の出力例

<?php
$my_upload_images = get_post_meta( $post->ID, 'my_upload_images', true );
$slider = '';
if ( $my_upload_images ): 
 foreach( $my_upload_images as $img_id ):
 $full_src = wp_get_attachment_image_src ($img_id,'fullsize');
 if ( !$full_src ) continue;
 $file = get_post( $img_id );
 $img_title = $file->post_title; // title
 $img_caption = $file->post_excerpt; // caption
 $img_desc = $file->post_content; // desctiprion
 $img_alt = get_post_meta( $img_id, '_wp_attachment_image_alt', true ); // alt
 $thumb_src = wp_get_attachment_image_src ($img_id,'thumbnail');
 $slider .= 
 "t".'<li>'."n".
 "tt".'<a href="'.$full_src[0].'"'.( $img_title ? ' title="'.esc_attr( $img_title ).'"' : '' ).'>'."n".
 "ttt".'<img src="'.$thumb_src[0].'" width="'.$thumb_src[1].'" height="'.$thumb_src[2].'"'.( $img_alt ? ' alt="'.esc_attr( $img_alt ).'"' : '' ).'/>'."n".
 ( $img_title ? "ttt".'<div class="title">'.$img_title.'</div>'."n" : '' ).
 ( $img_desc ? "ttt".'<div class="caption">'.wpautop( $img_caption ).'</div>'."n" : '' ).
 "tt".'</a>'."n".
 "t".'</li>'."n";
 endforeach; 
 echo '<ul class="slider">'."n".$slider.'</ul>'."n";
endif; 
?>

*カスタムフィールドの値が複数なのではなく、一つの値の中で配列にしています。(順序を記録しやすいので。)get_post_metaで呼び出すとき3つ目のパラメータをfalseとやらないようにしてください。

(以前こちらで公開していたコードは、情報が古くなっているため、削除いたしました。ソースはプラグインを参照してください。)

Change log

  • 1.3.72015/11/16編集ボタンを追加、コード内の関数名を変更
  • 1.3.62015/10/18デバッグ
  • 1.3.52015/10/11デバッグ
  • 1.3.42015/09/12サムネイルにキャプションを表示
  • 1.3.32015/06/07メタボックスの位置を指定可能に
  • 1.3.22015/05/10アイキャッチ画像の自動作成に対応
  • 1.3.12015/01/15Javascript デバッグ
  • 1.32015/01/10パブリックバージョンリリース。WP4.1に対応。メディアエディタを呼び出すjQueryを変更しました。wordpressのメディアエディターを利用している都合上、複数サイトでの更新管理が煩雑なのでプラグイン化しました。投稿タイプを選べるように設定画面を追加しました。特にコードに触らないならプラグインでどうぞ。
  • 1.2.12014/12/11画像をセレクト後「画像を選択」ボタンを押さずにウィンドウを閉じた場合でも画像をセレクトしてしまう動作を修正。
  • 1.22014/10/10WPのレスポンシブデザインに対応してjavascriptとCSSを変更。
  • 1.12014/10/3WP4.0にあわせてメディアアップローダー内での画像削除に対応。(3.9以下は旧バージョンを使用して下さい。)
  • 1.02014/04/25イニシャルリリース

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha

18 comments

  1. kanno

    4月 1, 2017

    初めまして。

    add images をメディアライブラリを通さずに、ローカルから直接「ファイルを選択」でアップすることは可能でしょうか。
    その一点のみが懸念点でして、それが可能であれば是非使用させていただきたいのですが…
    ご確認いただけますと幸いです。
    よろしくお願いいたします。

    返信する
    • Mizuho Ogino

      4月 2, 2017

      このプラグインは、通常の「メディアを追加」ボタンと同じ動作をします。

      「ファイルをアップロード」タブを選択すると、「アップロードするファイルをドロップ」または「ファイルを選択」から画像をアップロードすることができます。

  2. reo

    2月 25, 2016

    はじめまして。使わせてもらっています。

    まさに求めていたものそのままの機能で感激いたしました。
    jqueryのスライダーと合わせて使わせていただいてます。

    一つだけ教えてほしいのですが、
    記事の「設置&出力方法」のサンプルコードに追加で
    画像のキャプションを取得する方法はないでしょうか?
    お時間がありましたら教えていただけると助かります。
    よろしくお願いします。

    返信する
    • Mizuho Ogino

      2月 25, 2016

      まだプラグインではなかったときの記事の名残があちこちにあって、出力例も含めていろんな箇所が怪しさ満載でしたので、目に付いた箇所だけ直しておきました。

      出力例の箇所に「タイトル・キャプション・代替テキスト・説明」のすべての出力ができるようなサンプルコードを書いておきました。適当にカスタマイズしてください。

    • reo

      2月 25, 2016

      お早いお返事ありがとうございます。

      無事キャプションを呼び出すことができました!
      とても便利なプラグインなのでこれからも応援しております。

  3. JIN

    9月 30, 2015

    はじめまして。

    まさに欲しかった機能にぴったりのプラグインで大変助かっています。

    そこで1つ気になるところがありました。
    wordpressをdebugで実行していると、Noticeが多数出力されているようです。
    動作には特に問題はないですが、気になりましたのでコメントさせていただきました。

    返信する
    • Mizuho Ogino

      10月 5, 2015

      ご報告ありがとうございます。

      返信が遅くなりました。
      他のプラグインもerror_reportingでチェックしただけでWP_DEBUGをしてません。裏側で出ているnoticeはそのうちそのうちと、思いつつ無視してました^^;

      とりあえずmy upload imagesだけやって1.3.5にアップデートしました。
      おいおい、他のも・・・?

  4. はるのぶ

    9月 28, 2014

    お世話になります

    参考になりました

    一つ質問ですが、
    あと、テーマ内で使用するには、ループ中でカスタムフィールドの配列を呼び出して下さい。
    とありますが、これはどこで呼び出せばいいですか?
    function.phpの中でしょうか、テンプレートのphpファイルでしょうか??

    返信する
    • web.contempo.jp

      9月 28, 2014

      >function.phpの中でしょうか、テンプレートのphpファイルでしょうか??

      テンプレートのphpファイルの中です。singleやctegoryなどのループの中でカスタムフィールド値を呼び出すときと同じように設置してみてください。

    • はるのぶ

      9月 29, 2014

      お世話になります

      ありがとうございます

      マイアップロード画像を管理画面に表示できました。

      しかし選んだ画像をテンプレートファイルに書き込むのが出来てません・・・

      画像をアップロードして、
      画像を選択すると、アイテム画像の追加削除の下に、
      選択した画像が出ます。

      しかし、公開(または更新)ボタンを押すと、
      表示されていた画像が消えてしまうのですが、
      これはデータベースへの書き込みが上手く行っていないのでしょうか?

      重ね重ね質問で申し訳ございません。。

      ご教示いただけたら幸いです。。

    • Mizuho Ogino

      9月 29, 2014

      >これはデータベースへの書き込みが上手く行っていないのでしょうか?

      試しにここで提示している関数群を丸ごとコピペして確認してみましたが、こちらでは問題なく動作しています。
      初歩的なことを伺いますが、きっちりとコピーできているか確認して下さい。また、phpのタグ 

      <?php

       と 

      ?>

       がfunctions.php内に元々あったタグと重複したりしていませんか?

    • はるのぶ

      9月 29, 2014

      ありがとうございます。

      metabox.phpというファイルにまるごとコピペして
      function.phpでrequire(‘metabox.php’);という形で、
      読み込んでますので、そういうミスはないかと・・・

      書き換えたのは、私の場合投稿ではなく、カスタム投稿タイプで使いたいので、
      add_meta_boxの引数を
      add_meta_box( ‘my_upload’, ‘マイアップロード画像’, ‘my_upload_postmeta’, ‘work’, ‘normal’,’high’ ); // ポジションはsideが推奨

      とpostからカスタム投稿タイプのworkに書き換えただけです。。。

      他にカスタムフィールドを使っていますので、
      それの書き込み関数とバッティングしているとかありますでしょうか??

      XAMPP1.8.3 PHP5.5.6で動かしています。。。

    • Mizuho Ogino

      9月 29, 2014

      何パターンかのカスタム投稿タイプで確認済みです。

      はるのぶさんの指定方法でカスタム投稿タイプ「work」に対してそのまま使えるかと思います。

      画像が書き込まれないという症状からすると、カスタム投稿タイプのサポート設定の’capability_type’がデフォルトではないか’post’か’page’以外のものに指定されているためにパーミッションチェックを通らない、という可能性が考えられます。

      capability_typeの設定が別のものになっていて、かつこだわりがなければ’post’に設定してみて下さい。
      capability_typeが変更できない理由がある場合、save_my_upload_postmeta関数内の分岐箇所 ( ‘page’ == $_POST[‘post_type’] )以下を次のように書き換えてみてください。(未検証です)

      if ( 'page' == $_POST['post_type'] ) {
          if ( !current_user_can( 'edit_page', $post_id ) ) // パーミッションチェック
          return $post_id;
      } elseif ( 'work' == $_POST['post_type'] ) {
          if ( !current_user_can( 'edit_work', $post_id ) ) // パーミッションチェック
          return $post_id;
      } else {
          if ( !current_user_can( 'edit_post', $post_id ) ) // パーミッションチェック
          return $post_id;
      }

      試しに上記パーミッションチェックの箇所をすべて削除してみてもらえば、そこが原因かどうか分かると思います。

    • はるのぶ

      9月 30, 2014

      ありがとうございます。

      capability_typeは設定されていませんでしたので、
      ‘post’にしてみましたが、現象変わらず、
      また、パーミッション設定をはずしたり、
      教えていただいたコードに変えましたが、
      現象変わらずです。。。

      あとはどこも変えてないです。

      他にもカスタム投稿タイプの中で、
      カスタムフィールドは使っていますが、
      それは保存されています。。。

      初心者なので、どこをどう調べてよいか分からず、困っています。。。

      申し訳ございませんが、
      よろしくお願いします。。。

    • Mizuho Ogino

      9月 30, 2014

      いただいたfunctions.phpを見ました。

      58行目の echo $my_upload_li を echo isset($my_upload_li) に改変されているのが原因です。

      この機に、変数の定義ミス警告が出ないようにコードもアップデートしておきますので、そちらをお使いください。

  5. gogoweb

    4月 25, 2014

    反映ありがとうございます。

    p.media.controller.Libraryで指定した設定ですと、メディアライブラリを一度選択すと画像を選択するのボタンが変になるのはこちらの検証環境のみでしょうか?

    返信する
    • Mizuho Ogino

      4月 25, 2014

      エラーのご報告ありがとうございます。

      今までまったく気がついてませんでした。
      左のツールバーはプロパティの設定を反映させるために表示されていただけで、本来不要なのでjQueryで無理矢理取り除くことにしました。ボタンのテキストが消える原因は調べてないのですが、これで画面遷移がなくなるので、結果オーライで^^;

      なお、同様のアップローダーを使っていたウェルカート用プラグインはそもそも添付画像しか見えなくていいので、もっとシンプルな仕様に変更しておきました。

  6. […] (というかほぼまるごとコピった)サイトはこちら wordpressの投稿画面にメディアアップローダー付きのカスタムフィールドを設置する。

    画像を一度の処理で複数アップロードできる上に […]

    返信する