WordPress 2.5 から備わっているショートコードという API の研究がてら、画像ギャラリープラグイン、 wp-kougabu をつくってみました。 ショートコードの動作をみるのが主体だったので、かなり動きはやばめのプラグインです。
とりあえず、実動作をみたほうがはやいと思うのでこちらよりどうぞ。
hiromasa.another のぽんこつギャラリーは、いままで コアを改造してやっていたのですが、今回から wp-kougabu で動かすようにしています。
hiromasa.another :o) » Gallery
画像リンクからその画像が使われている記事に飛びます。
68 queries. 0.268 seconds.
一応、プラグインも暫定的にダウンロードできるようにしておきます。 ショートコード API の作成サンプルくらいにはなると思います。
WordPress Plugins/JSeries » wp-kougabu
WordPress の投稿やページにアップロードされた画像ファイルを抽出し、サムネイル表示するショートコードを提供します。
もしも実働させてみよーって方は、サーバリソース的にやばいプラグインなのでソースを注意深くご確認ください。
使い方を簡単に書くと、プラグイン有効化後、ページ作成してその本文に [光画部] と書いてください。
**↑ほんとは "光画部"は kougabu と書いてください**
(書くとここでギャラリーが発動しちゃうので!)
動作を書きます。
- the_content が適応する部分(投稿やページなど)に kougabu ショートコードを書くと、WordPress のメディアライブラリからコンテントタイプ image の画像ファイルをすべてを取得し、整形して本文へのリンク付で画像ギャラリー HTML を出力します。
- ショートコードとは、[ショートコード] とかきます。 wp-kougabu の場合は、kougabu を[]括弧でくくってかきます。
- 取得してくる画像は、サムネイルではなく本物です。 HTML のタグでリサイズしています。 なのででかい画像をアップロードしている方で、大量に画像がある方は転送量がやばいです。 反面、うまく条件をくめば lightbox 系のスクリプトで"びょーん"ができるかもしれません。
- 現在、画像取得条件は最新のものから降順で、数くらいしか指定できません。 なので 1000枚くらい画像があると管理が大変です。 デフォルトでは全部出力します。 DB クエリー数はうちで 70 クエリ弱。 また、前述のとおりネットワーク帯域も消耗します。
- WordPress のメディア管理を利用したプラグインです。 なのでこの管轄以外でアップロードされたファイルは抽出できません。 また、ショートコードをつかうため、WordPress は2.5 以降、画像抽出にサブクエリとか使っているので MySQL は 5 系で、4.1 でも動くかもですが確認はしていません。
- メディアファイル抽出は、WP の標準的な手法で行って"いない"です。 コアと DB 解析でできた、のら SQL でとっています。 なので、WP のバージョンアップとともに動かなくなるかもしれませんし、画像がブログによっては抽出できないかもしれません。 一応、2.5 以前にアップロードされた画像もとれるようにはなっています。
てなかんじで、まだまだalpha版です。
では本題。 ショートコード API とは何か。
以下、kougabu と書いてしまうとギャラリーが動いてしまうので、サンプルは[光画部] と漢字で表記します。
- the_content の適応範囲(投稿、ページ、全文 RSS等)で、[光画部]等の [] で文字列が囲まれた形式、もしくは[光画部]ほげほげ[/光画部] 形式で書かれた形式がショートコードとして機能する。
- ショートコードのWordPress のコアの実装自体は、ただの the_contens のフィルタープラグインのひとつで、ショートコードを発見すると登録されている関数を呼び出し、置換してくれる。
- 登録は、 add_shortcode(‘kougabu’, 関数名); という 2.5 で新設された関数で行う。 kougabu の部分が追加されるショートコード名称となり、関数名が実際に動く関数で、これの「return 値がショートコードと置換」される。
- ショートコードは引数をもつことができ、[光画部 属性1="値" 属性2="値"] が 2.5 の新設 API で簡単に取り出せる。 また [光画部]ほげほげ[/光画部] のほげほげ部分もとれる。
要は、・・・wp-tegaki で苦労したのはなんだったんだ。(笑)
てな感じです。
属性取得部分は wp-kougabu のソースをみるのがはやいですが、
1: extract(shortcode_atts(array(
2: 'itemtag' => 'dl',
3: 'icontag' => 'dt',
4: 'captiontag' => 'dd',
5: 'columns' => 3,
6: 'max_width' => 150,
7: 'max_height' => 150,
8: 'start' => -1,
9: 'count' => 0,
10: ), $attr));
こんな感じにするだけで、[光画部 max_width="200" max_height="200" columns="2"] とかのタグがプログラムから簡単に取得できます。
ちなみに wp-kougamu でこの指定は、横縦のサムネイルを MAX 200px (アスペクト維持)で、2 カラムという指定になります。 で、ソース上右に書いてあるのがデフォルト値です。 標準は横縦のサムネイル 150px の 3カラム。(他の属性もちょろっとありますので、興味のある方はソースをみてください)
というわけで、かなりプログラムを書くのが楽になります。
また、使う側にとっても、たとえばページの中にこういった動的なものを作る場合、以前はページテンプレートファイルを新規につくって、中に <?php kougabu(); ?> とかするか、php exec みたいなプラグインをつかって eval するしかなかったのですが、ショートコードを使うと、ページ作成画面から書くだけですみますので、かなり楽かと思います。 🙂
# wp-kougabu で nextpage まじえてページ分割をした図。 ちなみに、いまの属性だけだとなんちゃって分割しかできません。 理由は・・・やってみれば分かります。 😛
基本的に、置換されるだけですので [kaomoji kao="1"] を顔文字画像とかにするプラグインとかはすぐつくれると思います。 難しいことは WP がやってくれるので、PHP の勉強用にも良いですね!
—
逆光は勝利! 頭上の余白は敵だ!