Wordpressプラグインの作り方〜初級編

X (Twitter) Facebook Hatena Pinterest Email Pocket

この記事の目次

１．プラグイン作成の前知識
２．Wordpressプラグインの作成、まずはデモから
３．APIとは何か？ライブドア天気情報APIを使う
４．プラグインのコードを書いてみよう
５．管理画面付きのショートコードプラグイン作成時のコツ
６．API初心者が覚えておくと良い表記や文法（PHP版）
７．いろいろなAPIを使ってみよう
８．プラグイン作成でつまづいたら

１．プラグイン作成の前知識

WordPressのプラグインは、以下のようなエントリーがすでにあります。

＞＞プラグインの作成 – WordPress Codex 日本語版
＞＞ゼロからWordPressプラグインを作成するためのチュートリアル:phpspot開発日誌
＞＞WordPressプラグインの作り方 ?フィルタ編? – しばそんノート
＞＞WordPressプラグインの作り方 ?アクション編? – しばそんノート

とくにショートコードについては、多くの記事で取り上げられています。

そこで、本エントリーでは、

・プラグインが作ってみたいなぁ?
・ifとか変数とか、PHPの基本はわかるけど、ゼロから組んだことない・・・
・でも管理画面とか作ってみたいじゃん！
・APIもいじってみたいじゃん！

という、かなり限定された方向けの内容になっていますｗ。

ところで、ショートコードとは、記事中に[ldtenki]という独自に作った命令（ショートコード）を記述すると、それがプラグイン（もしくは関数）として処理され自動的に置き換わる、というもの。Wordpress標準の状態でも、captionタグといったショートコードが実装されています。

今回は、そんなショートコードを自作し、その設定を管理画面で扱え、更にAPIから値を取得する、というプラグインにしてみたいと思います。

２．Wordpressプラグインの作成、まずはデモから

ショートコードを使って、このような天気を表示させるWordpressプラグインを作ってみましょう。

まずは、ダウンロードはこちらから。
明日の天気表示プラグイン

ダウンロード後解凍し、Wordpressのプラグインフォルダに入れて下さい。

WordPress管理画面＞＞設定＞＞明日の天気、と選べるようになっているはずですので、地域コードを入れて保存します。

あとは、記事内に[ldtenki]といったショートコードを入れれば、天気情報が表示されます。[ldtenki　date=”0″]とすれば今日、1で明日、2で明後日となります。

プラグインを自作すれば、このようなショートコードを誰でも簡単に作ることができるのです（勿論、ショートコード自体はプラグインでなくとも実装可能ですが、プラグイン作成の習作としては扱いやすいので）。

３．APIとは何か？ライブドア天気情報APIを使う

APIを使うのに、まずは以下のAPIで試してみました。

＞＞お天気Webサービス仕様 – Weather Hacks – livedoor 天気情報

ライブドアさんが提供されています、各地の天気情報を提供するAPIです。指定された地域コード入りのURLをリクエストすると、天気情報が返ってくる、というとても扱いやすいAPIです。

なお、地域コードはライブドア天気のページにアクセスし、地域をどんどんクリックしていきます。

http://weather.livedoor.com/area/41/123.html

URL末尾の「xxx.html」の数字の部分が地域コードですので、控えておきます。

４．プラグインのコードを書いてみよう

設定画面を伴うショートコードプラグインでは、主に次のような構成になります。

１．プラグインの概要表記
２．メインの処理
３．ショートコード定義文
４．メニュー表示定義文
５．メニュー表示用のＨＴＭＬ

そして、それらを作る前に以下のことを決めておきましょう。

１．プラグインの名前
２．ショートコードの名前
３．ショートコードで使う変数（属性）

ところで名前は重要です。必ず、公式のWordpressプラグインサーチやGoogleで、チェックしておきます。

＞＞WordPress WordPress Plugins

例えば、入力した文字を半角にしたいなあ、とするならば、上記サイトで検索し見つからなければ、よし！ショートコード名[hankakujp]にするぞ！などです。

さてそれでは、実際のコードです。注釈が入っていますので参照して下さい。

また、ショートコード名や設定画面名などは、ショートコード名に１とか２とか番号をつけて定義していますが、深い意味はありません。

なお、保存時には文字コードをUTF-8Nにして下さい。あとは、xxxx.php など任意の名前を付けプラグインフォルダに入れ有効化すればテスト出来ます。

<?php
/*
Plugin Name: Livedoor Weather Lookup
Plugin URI: //www.kagua.biz/wp/howto-wp-plugin.html
Description: 概要を書きます。名前はWORDPRESS公式サイトのプラグイン検索などで検索して、被らないようにしましょうね！
Author: 作者名
Version: 1.0
Author URI: //www.kagua.biz/
Description: 説明その２。長くなってもＯＫです。
とりあえず属性地を何日後の指定にして、設定画面では地域をいれます。
［ldtenki date="1"］とかにしてみましょう。ライブドア天気以外にも、写真共有サイトの
フォト蔵さんなども扱いやすいAPIですので、ぜひチャレンジしてみて下さい！
*/

//◆１．メイン部分　◆
//ショートコード定義のメイン部分
function ldtenki1($atts, $content = null) {

//無効な値ならデフォルトを今日（０）にしちゃいます。
extract(shortcode_atts(array('date' => '0'), $atts));

//あさって以上は取得できないので、それ以外は今日にしちゃいます。
if($date=='0'){$date="today";}
elseif($date=='1'){$date="tomorrow";}
elseif($date=='2'){$date="dayaftertomorrow";}
else{$date="dayaftertomorrow";}

//設定画面が空欄なら何を入れておくか。デフォルト値ですね。そうで無ければ読み込みます。
//get_option()で設定値を読み込めます。
if(!get_option('tiiki')){$tiiki="113";}
else{$tiiki=get_option('tiiki');}

//ライブドア天気APIのXMLを取得します。
$req = "http://weather.livedoor.com/forecast/webservice/rest/v1?city=".$tiiki."&day=".$date;

//リクエストURIをシンプルXML命令で読み込みます。
$xml = simplexml_load_file ($req);

//RETURNの部分がショートコードに置き換わります。$xml->image->urlとすると、XML内のURLを取得できます。
//$xml->image->url（天気アイコンのＵＲＬ）、$xml->title（天気のタイトル）
return "<div align="center" class="livedoorweather"><img src='".$xml->image->url."'/><br/>".$xml->title."</div>";
}

//◆２．ショートコード定義　◆
//ショートコード設定を設定します。前述のfunctionと被ってるはずです。
add_shortcode("ldtenki","ldtenki1");


//◆３．設定画面定義　◆
//管理ページの定義をします。admin_menuとするとＯＫです。
add_action('admin_menu', 'ldtenki2');

//前述のメニュー名と被っているはずです。
function ldtenki2() {
  add_options_page('LDweather', '明日の天気', 8, __FILE__, 'ldtenki3');
}

//前述のメニュー追加のfunctionと被ってるはずです。
//一旦PHPが切れますが、タグを書くからです。
function ldtenki3() {

?>
<div class="wrap">
<h2>ライブドア天気情報</h2>
<p>地域コードを入れてください。詳しくは以下URLまで。※地域をたどっていき天気情報が表示されたURLの末尾の数字です。<br/>
<a href="http://weather.livedoor.com/" target="_blank"><strong>天気予報 きょうの気象情報 - livedoor 天気情報</strong></a></p>

<!--FORM文はこのまま使います-->
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<table>
<tr valign="top">
<th scope="row">地域ＩＤ</th>

<!--INPUT文のNAME属性を前述の変数と合わせます。-->
<td><input type="text" name="tiiki" value="<?php echo get_option('tiiki'); ?>" /></td>
</tr>
</table>

<!--ここのhiddenも必ず入れてください。複数あるときは、page_optionsは半角カンマで区切って記述。a,b,c　など-->
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="tiiki" />
<p class="submit">

<!--SUBMITは英語で表記。_eで翻訳されるんです。便利！-->
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>

<!--//最後は閉じます。-->
<?php
 
}

?>

参考：フォト蔵用のWordpressプラグインを作る（その2） | AZ::Blog

５．管理画面付きのショートコードプラグイン作成時のコツ

・管理画面で扱う変数
・ショートコードの追加属性で設定する変数

これらが、想定外の値や未入力だったときの、判断処理を入れることです。

例えば、このプラグインでは、ショートコード追加属性で、今日なのか明日なのかを指定する仕様としました。しかし、それが空欄の場合は・・・デフォルト値を設定！また、3など規定外の入力時には・・・ゼロに強制置換！という処理を入れました。

このように、設定値は通常では最初は空欄でしょうから、その処理も組み込まないとならないんですね。

ところで、デフォルト値の設定として、使用されるのがextract()です。

//無効な値ならデフォルトを今日（０）にしちゃいます。
extract(shortcode_atts(array('date' => '0'), $atts));

この1行を入れることで、属性地のデフォルト値を0にすることが出来ます。

６．API初心者が覚えておくと良い表記や文法（PHP版）

１．XMLデータの取り出し

XMLというのは、階層構造を持ったデータ形式のことです。例えばこんな感じです。

日本＞関東＞埼玉＞人口
関東＞東京＞人口

APIをリクエストして得られる値も、こういった階層構造のまま受け渡されます。

しかし、通常はデータ全部が欲しいわけではなく、一部が欲しいことも多いかと。例えば「埼玉の人口」等。

そこで、XML全体の中から特定の値を取り出したくなるわけですが、それが「->」という表記です。上の例ですと、「Ａ＝日本->関東->埼玉->人口」と表記すれば、Ａには埼玉の人口が入りるんです。便利でしょぉ。長いんですけど、この表記一まとまりで一つの変数として考えて下さい。

２．ピリオド

PHPの文法になるのですが、文字列を結合させるときに「．」（ピリオド）を使います。

Ａ＝”東京”．”都”；

としますと、Ａには、”東京都”が入ります。＋や＆ではないので、慣れましょう。

３．foreach()

XMLデータは、前述のように階層構造をもったデータ郡です。ただ、それをPHPなどで扱うときには、一旦別な器（変数など）に入れる必要があるわけです。その時、PHPであれば配列変数や連想配列などとなります。

そのとき、データが全部で何個あるか、いちいち調べて、その回数だけ「読み込み＞＞代入」としてたら面倒ですよね。そこで、foreach{}。

この制御文を使いますと、XMLのデータが何個あろうとも、自動で個数を判別して、繰り返してくれます。

foreach ($配列 as $変数) {繰り返しの処理内容}

$a = array(1,2,3,4,5,6,7,8,9,10);
foreach ($a as $b) {
var_dump($b);
}

$aに格納された10個の数字を、ひたすらダンプ（表示）します。

＞＞foreachで配列の中身を全部足してみるPHP超初心者による「PHP入門講座」

さらに、連想配列を使うことも出来ます。配列というのは、a[1]=1、a[2]=2、というように通し番号で管理されることが基本となっていますが、PHPではこの通し番号の代わりに任意の単語を使うことができます。その単語をインデックスといいます。Google Analytics のカスタム変数みたいですね。

$a=array(
	'red'=>'Apple',
	'green'=>'Melon',
	'pink'=>'Peach',
);

＞＞連想配列をつくってみるPHP超初心者による「PHP入門講座」

ですから、その連想配列に代入しながらforeachを使うとこうなります。$aにインデックス、$bに値を同時に入れながら、個数分繰り返してくれます。便利ですね。

foreach ($xml as $a=>$b) {
	処理;
}

７．いろいろなAPIを使ってみよう

以下のAPIは、登録不要でとても扱いやすいものです。ぜひ、上記テンプレートを活用して、プラグイン作成してみて下さい。楽しいですよ！

◇フォト蔵で公開されている写真を取り込む
photo_info APIメソッド – 写真共有サイト「フォト蔵」

◇グルメサーチ！
ホットペッパー | APIリファレンス | リクルートWEBサービス

◇戻り値がすごい。
WikipediaAPI – ウィキペディア情報をサイトで利用できるAPI

◇APIを使ったマッシュアップの殿堂！
Mashup Award 6 (#MA6) on CREYLE

◇APIを使ったマッシュアップサイトのポータル。
ワッフル/WAFL｜みんなで作るWeb API&マッシュアップ情報一覧サービスサイト

◇その他、登録必須のものも含めてこちらに一覧があります。
Ajaxで使えそうなWEBサービスAPI一覧 – Ajax専

◇Wordpressの全国のコミュニティのポータルです。勉強会などイベント情報。
WordBench | Home

◇次のステップ、スライドの「フックの理解」がとても参考になります！
WordBench 東京勉強会（カスタマイズ基本編）スライド資料・アンケート結果 at WordBench 東京

８．プラグイン作成でつまづいたら

上記テンプレートを利用しても、新たなAPIを組み込んだりチャレンジをしていると、どうしてもうまく動作しないことがあります。そんなときの解決のコツを紹介します。

１．実装できるものから実装する

問題が多いとどこが原因なのか特定しにくくなります。ですから、全体の大枠が問題なければ（変数名や構造をチェック）、例えばAPI処理は無くして、echoなど簡単な処理に置き換えて、うまく動くか試してみる、設定画面も最低限のタグだけにしてみる、など。

２．適宜echoやダンプを入れ格納されている値をチェックする

正しく動いているかを確認するために、echo()を入れて変数の中身を表示させましょう。処理と処理の間にダンプする処理を入れて、処理内容をチェックするのです。可視化することで問題のある処理を特定しやすくなります。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル電子書籍: 宮内隆行、西川伸一、岡本渉、三好隆之: Kindleストア

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

プラグインづくり、楽しいよ！

Post Views: 118