products

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

sc-2014-10-02-16.38

PLUGIN : MY UPLOAD IMAGES

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

 

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

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

投稿タイプを指定します

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

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

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

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

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

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

レスポンシブに対応

WPの管理画面のレスポンシブデザインに対応して自由な位置にメタボックスを表示できます。
My upload images : メディアアップローダー付きのカスタムフィールドを設置するプラグイン。

 

設置＆出力方法

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

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

シンプルな出力例

<?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で呼び出すとき３つ目のパラメータを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イニシャルリリース

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

  1. 初めまして。

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

    返信

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

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

  2. はじめまして。

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

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

    返信

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

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

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

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

  3. はじめまして。

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

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

    返信

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

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

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

  4. お世話になります

    参考になりました

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

    返信

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

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

    2. お世話になります

      ありがとうございます
      マイアップロード画像を管理画面に表示できました。

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

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

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

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

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

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

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

      <?php

      　と　

      ?>

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

    4. ありがとうございます。

      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で動かしています。。。

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

      はるのぶさんの指定方法でカスタム投稿タイプ「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;
}

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

    6. ありがとうございます。

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

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

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

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

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

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

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

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

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

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

    返信

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

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

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

  6. ピンバック: ゴーゴーウェブマーケット技術ＢＬＯＧ | メディアアップローダーを使ってカスタムフィールドに画像を登録する。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です