wordpressのプラグインを作成する【#3】メディアライブラリを使用する

アップロードした画像を選ぶためにメディアライブラリを表示させる

前回の記事でプラグイン内に入力フォームを作成してwordpressのカスタムフィールドに登録することができました。

最終目標はスライドショーの画像を登録することが目標ですので、次はwordpressのメディアライブラリを表示させて、自分でアップロードした画像の中から画像を選択できるようにします。

まず、作成しているクラスの中にメディカルライブラリを使用する関数を書きます。

function show_text_option_page() {
        //オブション画面に表示する内容
        wp_enqueue_media();
        if ($_POST['posted'] == 'slider_save') {
        //設定画面で入力された設定値を保存
        update_option('slider_image_select_plugin_entry_form', $_POST['slider_image_select_plugin_entry_form']);
        }

wp_enqueue_media();

これです。これを入れて更新してみます。

見た目は一緒なのですが、ソースを見るとこのフォームの下にメディアライブラリのコードが増えていることがわかります。便利…

次にこのソースを操作するjavascriptを読み込むコードも書きます。

function show_text_option_page() {
        //オブション画面に表示する内容
        wp_enqueue_script( 'media-uploader-main-js', plugins_url( 'js/media-uploader-main.js', __FILE__ ), array( 'jquery' ) );
        wp_enqueue_media();
        if ($_POST['posted'] == 'slider_save') {
        //設定画面で入力された設定値を保存
        update_option('slider_image_select_plugin_entry_form', $_POST['slider_image_select_plugin_entry_form']);
        }

これも見た目は変わりません。フォームに画像を選択するHTMLを追加します。

<form method="POST" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">テストテキスト</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" name="slider_image_select_plugin_entry_form" value="<?php echo esc_attr(get_option('slider_image_select_plugin_entry_form')); ?>" type="text" placeholder="なんか入れて">
        </div>
    </div>
    <div class="uk-margin">
        <button id="media-upload" class="uk-button uk-button-primary uk-margin-bottom">画像を選択する</button><br>
        <img id="image-view" src="<?php echo plugins_url( 'images/no-image.gif', __FILE__); ?>" width="260">
        <input id="image-url" type="text" class="large-text">
    </div>
    <input type="hidden" name="posted" value="slider_save">
    <button class="uk-button uk-button-primary" type="submit">登録</button>
</form>

更新すると…

javascriptを読み込むコードは書いたのですが、読み込むjavascriptファイルをまだ作っていません。

コードで書いた読み込むjavascriptと同じファイルパスでjsファイルを作成してください。ここではindex.phpと同じ階層にjsフォルダを作成し、その中にmedia-uploader-main.jsのファイルを作成しました。中にはこのように書きます。

(function($) {
  $(function() {
    var custom_uploader = wp.media({
      title: 'Choose Image',
      library: {
        type: 'image'
      },
      button: {
        text: 'Choose Image'
      },
      multiple: false
    });
 
    $("#media-upload").on("click", function(e) {
      e.preventDefault();
      custom_uploader.open();
    });
  });
})(jQuery);

idがmedia-uploadのボタンをクリックするとメディアライブラリが開くような内容になっています。

これがこんな簡単に実装できるなんて感動…ユーザーログインだったらユーザーごとの画像になるんでしょうか？それだったら最強ですが。

ただ、この処理だけだと画像を選択してもフォームに反映できないのでできるような処理をjavascriptに追記します。

custom_uploader.on("select", function () {
      var images = custom_uploader.state().get('selection');
     
      images.each(function(file) {
        $("#image-url").val(file.toJSON().url);
        $("#image-view").attr("src", file.toJSON().url);
      });
    });

メディアライブラリで選択ボタンを押したあと、idがimage-urlのところに画像のurlを、idがimage-viewのところにもurlを挿入するようなコードを追加します。

更新して画像を選択すると…

正常にURLを取得することができました。あとはこのテキストを前のフォームと同じようにデータベースに登録するだけです。

inputの部分は書き換えられないようにhiddenのフォームにしてしまっても大丈夫です。

書き忘れていましたが、フォーム内の画像もjavascriptと同じようにindex.phpと同階層にimagesフォルダを作成して初期画像を入れるようにしています。スライドショーで初期画像がある場合は必要ないです。データベースに初期画像のURLを有効化の時にいっしょに入れるようにしておけば使うことはありません。

あと肝心なコードを入れるのを忘れていました。クラスを書き始める手前に下記コードを書いてください。

/*直接プラグインのファイルにアクセスできないようにする処理*/
if(!defined( 'ABSPATH' ))exit;

この処理多分大事です。直接このプラグインにアクセスできなくするコードです。

さいごに

ここまででプラグイン作成としては基本的な部分はほぼ終わりました。あとはスライドショーと言っているので複数画像を登録できるようにするだけです。

javascriptのコードをコピペして増やして本番はやりました。

ただほんとはループ処理でやりたかったのですが、なぜかうまく動かなくて…

次回は一応その処理を書いていこうと思うのですがうまく動かなければボツになるかもしれません。

お知らせ

株式会社プラン・ドゥでは一番くじなどで馴染みのあるミシン目の入ったくじの販売を行なっております。

他社ではなかなかできない製品を最適な価格でご案内させていただいておりますのでぜひお問い合わせください。その他の取扱商品はこちらからご覧いただけます。
https://plando-inc.co.jp/product

お問い合わせはこちら

前の記事へ次の記事へ