weblog

当サイトでは、アフィリエイト広告を利用しています。

ワードプレスのショートコードで楽天APIを呼ぶプラグインの作り方

ワードプレスのショートコードとは、記事投稿で使えるマクロのこと。PHPを使って一連の作業を自動化できる。[gallery]のように組み込みショートコードもあるが、APIを使って自作もできる。今回は、楽天APIを呼ぶプラグインの作り方。

WordPress プラグインの作り方 で基本的なことはおさえたので応用編。

<?php
/*
Plugin Name: Rakuten Shortcode
*/
?>

とりま、プラグインの最小構成：ヘッダーコメント欄にプラグイン名を記したPHPファイルを rakuten-shortcode.php として保存。zip形式で圧縮してワードプレスへアップロード。プラグインエディターで編集。

・・、最悪サイトがお星様になるので、慣れない人はテスト環境を用意しましょう。

ショートコード API

add_shortcode 関数でショートコードを登録。パラメータは、ショートコード名（投稿の本文で使う文字列）とコールバック関数の名前。

コールバック関数は、3つのパラメータを持てる。属性の連想配列、囲み型ショートコードで囲まれたコンテンツ、共有コールバック関数で便利なショートコードのタグ。必要なパラメータのみ使えばよい。

最小構成のショートコード

// [rakuten]
function rakuten_func(){
	return 'rakuten';
}
add_shortcode( 'rakuten', 'rakuten_func' );

コールバック関数に、パラメータを何も持たないショートコード。記事中に [rakuten] と入力すれば、rakuten と表示される。と言っても、このままではIMEに辞書登録するより長文をどの端末でも使えるってくらい。

楽天API利用なら、ランキング等デフォの表示用かな。。

自己完結型ショートコード

最小構成のショートコードのように、[rakuten] だけ。または、[rakuten kw=’ワードプレス’ page=’2′] のように属性値を持つショートコード。連想配列が使えるから、複数のパラメータを渡せる。属性値を省略するとデフォ値が入力される。

// [rakuten]
function rakuten_func( $atts ){
	$a = shortcode_atts( array(
		'kw' => '初期値',
		'page' => '1',
		), $atts );
	return "キーワードは、 {$a['kw']}";
}
add_shortcode( 'rakuten', 'rakuten_func' );
// 出力結果：キーワードは、初期値

・・、属性値を忘れそう。。

囲み型ショートコード

[rakuten]ワードプレス[/rakuten] のようにコンテンツを囲むショートコード。コールバック関数の第2パラメータとして受け取るので、自己完結型ショートコードとの併用も可能。第1パラメータを使わない場合でも、第1パラメータ用の変数は忘れず置くこと。パースエラーになる。

// [rakuten]ワードプレス[/rakuten]
function rakuten_func( $atts, $content = '初期値' ){
	return "キーワードは、 $content";
}
add_shortcode( 'rakuten', 'rakuten_func' );
// 出力結果：キーワードは、ワードプレス

キーワードを囲む形にすれば、忘れず使えそう。。

楽天APIを呼ぶ

楽天APIのアプリIDを用意。囲み型ショートコードの関数を以下のように変更。

// [rakuten]ワードプレス[/rakuten]
function rakuten_func( $atts, $content = null ){
	$id  = 'あなたのアプリIDをここに';

	$content = urlencode( $content );
	$url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=$id&keyword=$content";
	$obj = file_get_contents( $url );
	return $obj;
}

urlencode — 文字列を URL エンコードする。file_get_contents — ファイルの内容を全て文字列に読み込むので、[rakuten]ワードプレス[/rakuten] とショートコードを入力したところに結果がずらずらと表示される。

返却結果の整形

流石に、このままでは見辛い。というか、意味がないのでAPIからの返却結果を整形。楽天市場系APIでJSON形式出力フォーマットバージョン２での返却を前提。

// [rakuten]ワードプレス[/rakuten]
function rakuten_func( $atts, $content = null ){
	$id  = 'あなたのアプリIDをここに';

	$content = urlencode( $content );
//$url に formatVersion=2 を追加
	$url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=$id&formatVersion=2&keyword=$content";
	$obj = json_decode( file_get_contents( $url ) );
	$result = null;
// 結果をループ処理
	foreach( $obj->Items as $value ) {
		$result .= <<<"RAKUTEN"
<a href="$value->itemUrl"><img src="{$value->mediumImageUrls[0]}"
 alt="$value->itemCaption" />$value->itemName</a>
RAKUTEN;
	}

//クレジット表示
$result .= '<!-- Rakuten Web Services Attribution Snippet FROM HERE -->
<a href="https://webservice.rakuten.co.jp/" target="_blank"><img src="https://webservice.rakuten.co.jp/img/credit/200709/credit_22121.gif" border="0" alt="楽天ウェブサービスセンター" title="楽天ウェブサービスセンター" width="221" height="21"/></a>
<!-- Rakuten Web Services Attribution Snippet TO HERE -->';

	return $result;
}

json_decode ー JSON エンコードされた文字列を PHP の変数に変換。ヒアドキュメント構文 (“<<<“)で区切った文字列を結合代入演算子(‘.=‘)でつないで、$result に代入。最後にウェブサービスのクレジットを追加。

記事本文中と文下に返却結果を表示

ショートコードは、ショートコードを入力された場所に結果を表示する。よって、文中と文末に返却結果を表示したい場合は２種のショートコードを用意するか属性値を使って場合分けすることになる。

めんどくさい。。

フィルターでフック

フック (hook)とは、WordPress がプラグインを作動させるのに使う API 。フィルターとアクションがある。

フィルターとは、実行中の特定のポイントやデータに何かのアクション（データベースへの追加やブラウザスクリーンに送り出すなど）を行なう前にデータが通過する関数。

アクションとは、実行中の特定ポイントもしくは特定イベント発生時にプラグイン関数などを作動させるためのもの。

フィルターもアクションも、あるポイントで関数が実行される点で似たようなものだけど、公式が分けてるので、、

ショートコードが記事本文中で使用されるので、直後に発動する after the content 的なアクションフックを探すも見つからず。loop_end は、汎用性高いが記事末との間にコメント欄が入るので使い勝手がイマイチ。よって、フィルターで記事本文に返却結果を表示することに。

add_filter('the_content', '返却結果用関数名', 12);

ポイントは、第３引数のプライオリティ値をショートコードの実行後になるよう １２ 辺りを指定すること。ちなみに、ショートコードは、 11 で実行される。

プラグインを有効化すると、こんなカンジに↓↓

← ここにショートコードが埋まっている。

まとめ

プラグイン rakuten-shortcode.php の中身。

<?php
/*
Plugin Name: Rakuten Shortcode
*/

// [rakuten]ワードプレス[/rakuten]
function rakuten_func( $atts, $content = null ){
	$id  = 'あなたのアプリIDをここに';

	$content = urlencode( $content );
	$url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=$id&formatVersion=2&keyword=$content";
	$obj = json_decode( file_get_contents( $url ) );
// ショートコード埋め込み場所に表示用
	$first = <<<"FIRST"
<aside style="font-size:50%;"><a href="{$obj->Items[0]->itemUrl}" rel="nofollow"><img src="{$obj->Items[0]->mediumImageUrls[0]}" alt="{$obj->Items[0]->itemCaption}" style="float:left;" />{$obj->Items[0]->itemName}</a></aside>
FIRST;

// add_filter() 用関数で使い回す為にグローバル変数化
	global $result;
	$result = '<aside style="font-size:50%;"><p style="text-align:right;">楽天市場</p><div style="display:flex;flex-wrap:wrap;justify-content:space-around;">';
// 結果をループ処理
	foreach( $obj->Items as $value ) {
		$result .= <<<"RAKUTEN"
<a href="$value->itemUrl" rel="nofollow" style="flex-basis:128px;"><img src="{$value->mediumImageUrls[0]}" alt="$value->itemCaption" />$value->itemName</a>
RAKUTEN;
	}

//クレジット表示
$result .= '<!-- Rakuten Web Services Attribution Snippet FROM HERE -->
<a href="https://webservice.rakuten.co.jp/" target="_blank"><img src="https://webservice.rakuten.co.jp/img/credit/200709/credit_22121.gif" border="0" alt="楽天ウェブサービスセンター" title="楽天ウェブサービスセンター" width="221" height="21"/></a>
<!-- Rakuten Web Services Attribution Snippet TO HERE --></div></aside>';

	return $first;
}

function con($the_content){
	global $result;
	return $the_content . $result;
}

add_filter('the_content', 'con', 12);
add_shortcode( 'rakuten', 'rakuten_func' );
?>

投稿日

カテゴリー:

投稿者:

webloger

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。