久しぶりに新しいプラグインを作りました。
このプラグインは、テーマディレクトリ内の画像を、投稿編集画面の「メディアを追加」から挿入できるようにするプラグインです。
と、そのままプラグインの説明に入ろうと思いましたが、今見ているこのページ、勝手ながら”二部”に分けることにしました。
- 第一部 : プラグイン開発中のうっぷん。
- 第二部 : プラグインについてのご説明
プラグインの説明を期待されている方が9割以上もしくは10割だと思います。
このプラグインを作ることに、予想以上に時間が掛かり、ちょっとだけうっぷんが溜まっていたので、その鬱憤晴らしを書きました。。鬱憤については読まなくても、プラグインの使用方法に全く影響しません。
プラグインを使いたいだけの方はそのままプラグインの説明までスクロールしてください。 😉
↓ここからうっぷん開始。
だいぶ、だいぶ、疲れました。。 😳
このプラグインを必要とする方はあまりいないと思います。あと、このプラグイン自体使ってみればわかりますが、もの凄い機能を持ったプラグイン。という訳ではありません。
なので、気持ち、ぱぱっとやって、動作チェック。としたかったのですが、知識やスキルが少なかった分、想像以上に時間が掛かりました。
ちなみに、なんでこのプラグインを作ったかと言うと、別の記事「WordPressのマルチサイト作成、運営で思ったこと」に書いていることへの対策方法として、作りました。
私の場合、マルチサイト内の投稿の本文にテーマディレクトリ内の画像を挿入することがよくあります。
テーマフォルダ内の画像を投稿に挿入する方法として、
- 「メディアを追加」を押して、「URLから挿入」を選択
- ブログのURLをコピペ
- /wp-content/ からはじまり、テーマフォルダ内の画像が入っているフォルダまでのパスを記入
- テーマフォルダ内の挿入したい画像ファイル名をコピペ
- 最後に、整列やらリンクやら選んでキャプションやらを書いて挿入
という感じだと思います。
テーマフォルダ内の画像を投稿に挿入するまでのこの手順。初めは何とも思っていませんでしたが、投稿が多くなるにつれ、かなり手間でした。 🙁
挿入したはずの画像が表示されない。
「あれ？画像のパス合っているはずだけど…。」入力したパスが微妙に違っていたり。 🙁
FTPでサーバに接続してファイル名を確かめにいったり。。 🙁
これをもっと手軽に、今の「メディアライブラリ」のように、画像の一覧から選択して、はい、そーにゅー。
手間を最大限省きたかったので、このプラグインを作りました。
また、作りあがるまでの途中についてですが、
このプラグインの作成に取り組み始めるまでは、簡単にこうこう、こうして、こうすれば、あぁん違う。もっとこうぅ。とか、「media_upload_tabsにフックして、あれこれすればいけそうかな」と考えていました。
色々と試してみました。
が、結果、できませんでした。メニューやページは作れても、挿入が出来ない。 😕
（他にやり方があるのかな…。結構試しましたが出来ませんでした。）
とにかく、まだ情報が足りないようなので、色々とググってみましたが、あまり参考になるような情報が出てきませんでした。
うーん、まいった。 😥
誰か他の方が、同じ機能のプラグイン作ってくれていたら嬉しかった。。（それとも既にあったりするのかな。。だとするなら、そのプラグインを探しきれなかった。。）
情報が無い以上しょうがないので、フックさせる所を探す為に、WordPressのコアファイルとひたすらにらめっこ。 😯
そして、にらめっこをし続けて、なんとなく出た結果。
Javascriptで動作させているような感じでした。
「media-view.js」あたりがメディアを挿入する際の画面レイアウトを作成しているような。
jQueryはよく触る機会があるので、なんとかなるだろう。
と思い、media-view.jsのコードとひたすらにらめっこしました。
ひたすらにらめっこした結果、今回のプラグインを作成する為に必要な知識やスキルは全く別物でした。 
Backbone.jsってなんですか？Underscore.jsってなんですか？ 😯
<script type=”text/html” id=”tmpl-attachment”>ってなんですか？
そんな状態です。。見なけりゃ良かった。。でも見ないと進まない。。
そもそも、Backbone.jsというフレームワークの存在を私は知らなかったので、フレームワークを使用している存在に気づくまでに時間が掛かりました。
MVCについては何となーく…なら分かりますが、Selectionってなんですか？ 🙁
なんだこのinitializeやら、eventの設定の仕方は…。
どういう仕組みでやっているのか理解するまでに、かなり時間が掛かりました。。
Backbone.jsについての情報をぐぐりました。
基本中の基本、みたいな所は何となく分かりましたが、これをWordPressの場合にどういう風にしたらいいのかが分からない。。
ひたすらググって、なんとかアテになりそうな情報を見つけました。 😮
Add a menu item to WordPress 3.5 Media Manager
こちらのページの情報が、今回のプラグインを作るための情報として一番の候補になり、この情報をもとにあーだこーだをひたすら、ひたすらやって、なんとかできました。。。。あー。
↑グチ、ここまでです。人間って言葉に出すだけで気が晴れる生き物ですね。私だけかな。。。
ここから、プラグインの使い方について記載しています。
使い方
いまのところ、WordPress 3.5 ～ 3.5.2 までの対応となっていますのでご注意ください。
（試してはいませんが、3.5未満はおそらく動かないと思います。3.5から画像挿入の機能が変わったはずなので。）
私のプラグインは基本、WordPress 3.4.2 からの対応をしているのですが、今回は対応させませんでした。
サポートフォーラムなんかで3.4.2への対応希望者がいれば、対応するかもしません。 😉
インストール方法は、プラグインインストールの画面から「Media Insert from Themes Dir」と検索すると、そのまんまのプラグイン名が出てくると思うので、それをインストールして有効化してください。
インストールした後、有効化しても画面上、何も変化もなく設定画面も存在しません。
ちょっとわかりづらいですが、これで使用可能な状態です。
投稿編集画面などで「メディアを追加」をクリックすると、「URLから挿入」の下に「テーマディレクトリから挿入」のメニューが追加されます。
メニュー追加部分
「テーマディレクトリから挿入」を選択すると、現在選択しているテーマディレクトリ内の画像やフォルダを読み込み始めます。読み込みが完了すると、画像とフォルダ一覧が表示されます。
画像・ファイル一覧
もちろん、サブディレクトリ内の画像も読み込みます。 🙂
あとはいつも通り、投稿に挿入したい画像を選んで、リンクをつけるなり整列を変更するなりして、「投稿に挿入」をクリックすると本文に挿入できます。
画像選択時
簡単に、テーマフォルダ内の画像を投稿に挿入できます。
どうぞご利用ください。
Media Insert from Themes Dir
