フォト蔵用のWordPressプラグインを作る（その１）

written by overQ

ブログを修正したついでに、フォト蔵用のプラグインを二つ作りました。

・その１：　記事にフォト蔵の写真を貼り付ける。
・その２：　表紙ページの上のところに出ているサムネイルのリンク。

どちらもごく簡単なものなので、作り方を順番に書いてみます。今度作るときに便利なように。
…というより、フォト蔵関連のWordpressプラグインが少ないので、こうやって基本を書いておけば、誰か作ってくれるかも、とひそかな企み。

プラグインの名前を好き勝手に付けよう

何はともあれ、まず、プラグインの名前とか機能を書きます。
このファイルを「tekito.php」などの名前でプラグインフォルダにアップすれば、プラグインの一覧のところに表示されます。
中身なんて、なくても大丈夫です。。

<?php

/*
Plugin Name: フォト蔵は「ふぉとぞう」なのか「ふぉとぐら」なのかプラグイン
Plugin URI: http://www.overcube.com/wordpress/
Description: フォト蔵の写真をブログに貼る。(そしてのりピーに捧ぐ)
Author: overQ
Version: 0.1
Author URI: http://www.overcube.com/wordpress/
*/

?>

楽しい名前を付けるとよいかもしれません。あとあと困ることもあります。
まだまだ、「のりピー」でいけると思います。

Wordpressプラグインを作る（プラグイン画面）

ショートコードという便利なもの（があることを先週知った）

「プラグインの作り方（初心者篇）」みたいなページには、
add_filter(the_content, my_first_plugin);
というフィルタがよく書いてあるのですが、ショートコードというのがあって、そっちのほうが手っ取り早い。
◇ショートコード API – WordPress Codex 日本語版

どんなプラグインを作ろうとしているかというと、
[photoZou number="27071804"]
という、フォト蔵の写真の番号を入れると、以下のように記事に写真が表示されるもの。

八千代の巻き寿司

the_contentを使うと、自分でこの短いコードを定義する必要がありますが、ショートコードを使えば、それがたちまちにできてしまうまいます。

function my_photozou($atts, $content = null) {

//写真の番号は属性「number=""」で指定。
extract(shortcode_atts(array(
	"number" => ''
	), $atts));

//ここにあとで機能を書きますから。

}

add_shortcode("photoZou", "my_photozou");

これをさっきの無駄なプラグイン名の説明の下に書きます。

以上で、ショートコードの定義は完了。
[photoZou]というショートコードの属性「number=」に、写真のナンバーを書き込めば、
「function my_photozou」という機能で、写真が表示される仕組み。
その機能（関数とゆいます）をこれから作ります…ぴー（ちょっとためらいがちな、のりピー言葉）。

フォト蔵APIの利用

フォト蔵の写真を持ってくるためには、フォト蔵APIを利用します。
Webサービスではどこでもよく、この手のAPIが提供されています。
◇フォト蔵APIとは – 写真共有サイト「フォト蔵」

今回はとりわけシンプルな、photo_infoというのを使ってみます。

http://api.photozou.jp/rest/photo_info?photo_id=写真の番号

というので、その番号の写真の情報がいろいろ得られます。
例えば、27071804番の「八千代の巻き寿司」の写真の情報は、

http://api.photozou.jp/rest/photo_info?photo_id=27071804

XMLで書かれた情報が出てきます。
＜＞で区切られて、入れ子状になって、各種の情報が並びます。

PHPでXMLを扱うには、simplexml_load_fileという、マンモスうれピー機能を使います。

$req = "http://api.photozou.jp/rest/photo_info?photo_id=".$number;
$xml = simplexml_load_file ($req);

これで、属性「number=」に書いた番号が変数「$number」になって、写真の情報XMLが、扱えるようになります。
で、扱ってみますと。

return "<div class=\"photozou\"><a rel=\"shadowbox[photozous]\" href=".$xml->info->photo->original_image_url."><img alt=".$xml->info->photo->photo_title." src=".$xml->info->photo->image_url."/></a><br />".$xml->info->photo->photo_title."ピー</div>";

「->」で入れ子になった情報を指定していきます。簡単です。
XMLを見ると、＜large_tag＞のような、すでに全部セットしてあるのもあるのですが、それを貼るだけでは芸がないので、もうちょっと細かく指定。（さらに、いちおう「ピー」機能も付き。）

同じ要領で、もっといろんな情報や、HTMLのタグを入れたりもできますね。
（「rel=”shadowbox[photozous]“」というのは、うちのブログで使ってる、shadowbox.js用。写真をクリックすると、ぶわーと広がるやつ。shadowboxを使ってないなら不要ですが、まあこれをつけるために、このプラグインは作ったようなものだから。 ）

これで完成だピー！　簡単だピー！（のりピーというより、キスケだな。。）

編集画面にボタンを付ける

Wordpressプラグインを作る（ボタンを作る）

せっかくなんで、投稿の編集画面にボタンを付けてみます。
これも、やり口があるんだそうです。先週知りましたが。

//編集画面にボタンを作っちゃう。
add_action('admin_print_scripts', 'my_custom_quicktags');

function my_custom_quicktags() {
	wp_enqueue_script(
		'my_custom_quicktags',
		plugin_dir_url(__FILE__) . 'my-custom-quicktags.js',
		array('quicktags')
	);
}

というのを付け加えて、このプラグインと同じフォルダに、以下のような「my-custom-quicktags.js」ファイルを作ります。

edButtons[edButtons.length] =
new edButton('ed_photozou'
,'フォト蔵'
,'[photoZou number="'
,'"]'
,''
);

すると、投稿編集の画面に、ボタンが表示されます。
この関数は便利なので、ボタンをいろいろ自作するなら、一括して別なプラグインを作ってみるのも、よいかもしれません。（そしたら、関数名も重複しないし。）

全部まとめてみると。

<?php

/*
Plugin Name: フォト蔵は「ふぉとぞう」なのか「ふぉとぐら」なのかプラグイン
Plugin URI: http://www.overcube.com/wordpress/
Description: フォト蔵の写真をブログに貼る。(そしてのりピーに捧ぐ)
Author: overQ
Version: 0.1
Author URI: http://www.overcube.com/wordpress/
*/

//ショートコードを使う。
function my_photozou($atts, $content = null) {

//写真番号は属性「number=""」で指定。
extract(shortcode_atts(array(
	"number" => ''
	), $atts));

//フォト蔵APIのXMLを利用する。
$req = "http://api.photozou.jp/rest/photo_info?photo_id=".$number;
$xml = simplexml_load_file ($req);

return "<div class=\"photozou\"><a rel=\"shadowbox[photozous]\" href=".$xml->info->photo->original_image_url."><img alt=".$xml->info->photo->photo_title." src=".$xml->info->photo->image_url."/></a><br />".$xml->info->photo->photo_title."ピー</div>";

}

add_shortcode("photoZou", "my_photozou");

//編集画面にボタンを作っちゃう。
add_action('admin_print_scripts', 'my_custom_quicktags');

function my_custom_quicktags() {
	wp_enqueue_script(
		'my_custom_quicktags',
		plugin_dir_url(__FILE__) . 'my-custom-quicktags.js',
		array('quicktags')
	);
}

?>

これくらいのプラグインだと、とくにプログラミングの知識がなくても、できてしまいそう。
ショートコードは、もっとたくさん属性をとるときにも威力を発揮できるはず。

COMMENTS

Comments are closed.