WordPressの自作ウィジェットに画像追加機能を実装

WordPressの自作ウィジェットに画像追加機能を実装する方法をご紹介する。Wordpressで画像を選択する際に、出てくるアレ(メディアライブラリ)を表示させたい方は必見。

何をするか

下記画像のように、自作ウィジェットに画像追加機能を実装する。画像一覧が表示されて、そこから選ぶだけで画像を設定できるものだ。わざわざ、画像のURLを探してコピーする必要がない。

実装

下記コードで実装できる。cssやclass名はご自身で修正願う。

仕組み

このコードは、スクロールに追従するウィジェットを作成する際に作ったもの。この記事では、画像追加機能に関する部分だけの仕組みを解説する。

41-56行目 | 画像を選択するボタンを設置

42-51行目あたりは、表示の切り替えのための処理。53行目で、自動的にURLを挿入するためのテキストボックスを設置。54-55行目で、画像を選択したり削除するためのボタンを設置。画像を選択ボタンを押すと、メディアライブラリが起動する。

57-108行目 | メディアライブラリを読み込むためのスクリプト

jQueryで記述。60-64行目で定数などを定義。66行目以降から、画像を選択ボタンを押した場合の処理。69-71行目では、変数frameに値が入っていたらそれを開く。74-83行目でwp.media関数を用いてメディアライブラリに関する設定を記述。85-94行目では、メディアライブラリで選択した画像に関する戻り値を受け取り、53行目で設置したテキストボックスに画像のURLを代入している。96行目でframeを開く。99-104行目は、画像の削除ボタンを押した場合の処理。

参考になるサイト

上記で仕組みを簡単に説明したが、以下サイトをご覧になれば、更に理解が深まると思う。

実際、私はこれらの情報を参考にしつつ、このコードを作成した。

まとめ

自作ウィジェットで画像を簡単に指定できるようになると、かなり便利になると思う。あらゆる場面で活用していきたいと思った。

共有する

このエントリーをはてなブックマークに追加

コメントをする

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


*