May52008

WordPress 2.5 のショートコードと wp-kougabu 画像ギャラリー このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

曇のち雨 ひろまさ@ 5 月 5th, 2008 投稿時の月齢:28.6  月名:二十九日月  潮汐:大潮

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版です。

gallery02

では本題。 ショートコード 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 するしかなかったのですが、ショートコードを使うと、ページ作成画面から書くだけですみますので、かなり楽かと思います。 :-)

garally01

# wp-kougabu で nextpage まじえてページ分割をした図。 ちなみに、いまの属性だけだとなんちゃって分割しかできません。 理由は・・・やってみれば分かります。 :-P

基本的に、置換されるだけですので [kaomoji kao="1"] を顔文字画像とかにするプラグインとかはすぐつくれると思います。 難しいことは WP がやってくれるので、PHP の勉強用にも良いですね!

逆光は勝利! 頭上の余白は敵だ!

25 Responses to “WordPress 2.5 のショートコードと wp-kougabu 画像ギャラリー”

  1. 1 yutaka
    5 月 5th, 2008 at Morning

    おはよう〜
    プラグイン入れてみました。記事へのリンクなど問題なく動作しているようです
    画像サイズに関係なく、50エントリー分を表示したら次のページにというような
    分割はできますか?

  2. 2 ひろまさ
    5 月 5th, 2008 at Daytime

    おはようございます〜 :-)

    ページ分割なのですが、画像をキーにして動作している都合で処理がエントリー単位ではなく画像数単位になっていて、これであれば一応手動ですができるようにしています。

    [kougabu start="0" count="16"]
    <!--nextpage-->
    [kougabu start="16" count="16"]
    <!--nextpage-->
    [kougabu start="32" count="16"]
    <!--nextpage-->
    [kougabu start="64" count="16"]
    <!--nextpage-->
    [kougabu start="80" count="16"]
    <!--nextpage-->
    [kougabu start="96" count="16"]

    こんな感じでページ作成してみてください〜

    ただしこの指定だと、お気づきのとおり画像全数が分からないので、画像が増えると後ろのページに押し出されていきます。(笑) いまのところ、あらかじめ多めにページを多めにつくるしかないですね。。

    別件、メールいただいている件は調査中です!

  3. 3 ひろまさ
    5 月 5th, 2008 at Daytime

    業務連絡。

    現在 DB の接頭語が wp_ でしか動きません。 最後に直そうと思って忘れてました。(笑)

    違う方は適当に SQL なおしてください〜

  4. 4 yutaka
    5 月 6th, 2008 at Nighttime

    ありがとうさんでした〜
    テーマの問題でした。page.phpを直したら切り替えてくれるようになりました。good!

  5. 5 ひろまさ
    5 月 6th, 2008 at Nighttime

    お、いいかんじですね! ぬーぶらで笑ってしました。(笑

  6. 6 yutaka
    5 月 6th, 2008 at Nighttime

    今日気がついたんだけど、前のバージョンのwordpressって複数のpage.phpを作っておいて作成ページごとに、どのpage.phpを使うかを選択できましたよね?今のバージョンって出来なくなってませんか?

  7. 7 ひろまさ
    5 月 6th, 2008 at Nighttime

    ページテンプレートですね!

    2.5 からデザイン変更されて、ページ作成画面の下「詳細オプション」の「ページテンプレート」より変更するようになったようです〜 :-)

  8. 8 yutaka
    5 月 6th, 2008 at Nighttime

    無い、無い、詳細オプションが無い!!!
    なぜじゃ〜〜 (>_<)

  9. [...] WordPress 2.5 のショートコードと wp-kougabu 画像ギャラリー @ hiromasa.another :o) [...]

  10. 10 Binsan's Cafe
    5 月 7th, 2008 at Nighttime

    エントリー画像集合…

    wordpress2.5以降に付いた機能「メディアライブラリー」このライブラリー画像をページに表示することが出来ます。しかしせっかくの機能なんですが、ただ画像がどひゃ〜〜っと表示される…

  11. 11 Yuriko.Net
    5 月 12th, 2008 at Nighttime

    今年もWordPressプラグインコンペ開催…

    結局去年は応募しなかった WordPress プラグインコンペティションですが、今年も行なわれるようです (tai さんの記事)。未発表のプラグインであること、ドキュメントが充実していること、…

  12. [...] WordPress 2.5 のショートコードと wp-kougabu 画像ギャラリー @ hiromasa.another :o) [...]

  13. 13 nomade
    6 月 25th, 2008 at Daytime

    はじめまして、nomadeと申します。

    wp-kougabuについてご質問よろしいでしょうか?

    wp-kougabuプラグインを入れ、投稿欄に[kougabu]と入力し
    画面を確認してみたところ、

    There is no photograph in this page yet.

    と表示されました。
    メディアライブラリには画像を数点入れているのですが、
    うまく読み込まれていないようなのです。

    下記フォーラムの質問にて、同じような症状の方がおられるのですが、
    私の場合は[gallery]は機能しております。
    http://ja.forums.wordpress.org/topic/387

    もし何か心当たりがありそうな部分がございましたら、
    ご指摘いただけると幸いです。

    環境ですが、サーバーはロリポ、wpのバージョンは2.5.1を使用しております。

    どうぞよろしくお願いいたします。

  14. 14 ひろまさ
    6 月 25th, 2008 at Nighttime

    nomade さん、こんにちは。 :-)

    詳しくご連絡いただきましてありがとうございます。

    wp-kougabu の画像抽出の条件なのですが、

    ・メディアライブラリに登録されていること。
    ・そのメディアが投稿されていること。
    ・投稿ページが一番の親であること。

    となっています。 どれか該当なさそうなのあるでしょうか?

    とりあえず一番下の条件を解除したものを試験的においてみます。もしよければ試してみてください!

    http://another.maple4ever.net/wp-content/uploads/etc/zip/wp-kougabu-20080625.zip

  15. 15 Rose
    6 月 26th, 2008 at Nighttime

    ぬ?
    はじめまして、通りすがりですが試してみたところ自分もnomade さんと同じ状態になりました。
    一応ご報告までに。

    ちなみに上記の解除版でも残念ながら解決致しませんでした。
    wpのバージョンは同じく2.5.1
    詳しくはないので関係があるかはわかりませんが
    PHPは5.2.5、MySQLが4.1.20です。
    SQLが原因でしょうか…?

  16. 16 nomade
    6 月 26th, 2008 at Nighttime

    ひろまささん

    ご回答ありがとうございます。
    残念ですが、Roseさんと同じく解除版でもエラーになりました。

    もう少し詳しい状況を説明させていただきますと、
    投稿に配置した写真を、写真一覧用に作ったページに
    全数掲載しようとしていました。
    さらに後だしの情報になってしまいますが、
    ローカルではxamppを使って作成していたのですが、
    その時には表示されていたのです。

    RoseさんのMySQLが4.1.20であること、
    ロリポのMySQLが4.0.24であること、
    xampp(最新版)がMySQL 5.0.51aであること、
    以上を比較すると、やはりSQLのバージョンによる問題ということになるのでしょうか?
    はたまたローカルからロリポに移す際に、
    何か設定を忘れてしまっているのか・・・?

    ひろまささんはどのような環境で
    公開されていますでしょうか?

  17. 17 Rose
    6 月 26th, 2008 at Nighttime

    追記

    自分も試してみましたが確かにローカルでは正常に動作しますね。
    自分のXamppではMySQLは5.0.45です。
    しかし、http://wppluginsj.sourceforge.jp/wp-kougabu/
    こちらでは「MySQL 4.1 でも動作しました。」とあったんですが…ふむ。

  18. 18 ひろまさ
    6 月 26th, 2008 at Morning

    nomadeさん
    Roseさん

    情報どうもありがとうございます。非常に助かります。

    原因は MySQL のバージョンのようです。 とりあえずなのですが、4.0 系では配布サイトにありますとおり動作しないはずです。

    ロリポさんは、4.0 でしたっけ? そうすると大変申し訳ないのですがうまく取れません。

    こちらは同じく、ローカル、ここ、ともに 5 系の MySQL で動作確認しています。
    4.1 は他の方が動いたということでしたが、ちょっと細かいバージョンを確認してみます!

  19. 19 ひろまさ
    6 月 26th, 2008 at Nighttime

    nomadeさん

    >ロリポのMySQLが4.0.24であること、

    すいません、ちゃんと書いていました。。 早朝でぼけていたようです…。 申し訳ないです。

    そうですね、 4.0 だと動かないんですよね。。 ちょっと時間ができたら、4.0 でも動く方法考えてみます!

  20. 20 yuriko
    6 月 27th, 2008 at Nighttime

    フォーラムに書きましたが、サブクエリーを使わない SQL に書き換えましたので、これを試してみてください。手元には MySQL 5.0 環境しかないのですが、おそらく 4.0 でも動くでしょう。

  21. 21 ひろまさ
    6 月 27th, 2008 at Nighttime

    yuriko さん、どうもありがとうございました。 :-)
    きっと大丈夫ですね!

    nomadeさん、Roseさん、よければお試しを・・・!

  22. 22 nomade
    6 月 27th, 2008 at Daytime

    yurikoさん

    ありがとうございます!
    フォーラムご指摘部分差し替えましたら、
    無事ロリポで動作いたしました!!

    ひろまささん
    すみません、配布サイトをよく確認しておりませんでした。
    4.0以下はNGだったのですね。
    お手数をおかけいたしました。ありがとうございます。

    お蔭様これで来月うちに来るワンコのブログが
    無事公開できそうです。
    改めて、ありがとうございました!

  23. 23 ひろまさ
    6 月 29th, 2008 at Daytime

    nomade さん

    良かったです。 のちほど、JSeries のほうの配布ファイルも yuriko さん版の SQL に変えておきます。

    おー、ワンコブログ楽しそうですね!! :-)
    今後ともよろしくお願いします。

  24. 24 Rose
    7 月 1st, 2008 at Daytime

    > yurikoさん
    おぉ! 素晴らしいですね。
    自分のところでも上手く動いているようです。
    まだ色々試しているところですがおそらく問題ないでしょう。

    しかし、ちょっと通りがかっただけだったんですがこのプラグインとても良さげですね。
    自分の環境下でも動作するのでしたら問題もないですし
    自分もRecent Illust(image) として使わせて頂こうかと思います。
    ただ、欲を言えばサムネイルから引っ張ってきてくれると言うこと無しなんですが
    (リソース的な意味ではなくレイアウト的な意味で
    実験かつalpha版だそうですからそれはまあ贅沢でしょうか;
    むしろ十分すぎる性能ですね。
    ありがたく使わせて頂きます。

  25. 25 ひろまさ
    7 月 3rd, 2008 at Nighttime

    Rose さん、こんばんは。 :D

    コメントありがとうございました!

    サムネイルひっぱりはやってみたいですね。標準機能で自動的につくられるサムネイルであれば比較的簡単に実装できると思うので、課題としてみます。

    yuriko さんの SQL いれて、ちょっとデフォルト設定かえたら 0.1 くらいでリリースしてみます。

    ちょっと時間がいまとれないため、よければ気長にウォッチしてやっててください。

Leave a Reply

Trackback

http://another.maple4ever.net/archives/244/trackback/