カラーミーショップに別サイトのwordpressからの更新情報を掲載する

国内ECサイトの雄、カラーミーショップはカスタマイズ特性が高いので便利ですが、独自タグで実現可能な範囲というルールがあります。

とあるECサイトに、関連ブログの投稿更新通知を表示させたい、と思ったのですが直にPHPを書き込んでも機能させられません。

そのため、投稿更新を読み込むファイルを別で作り、その外部ファイルをカラーミーショップのテンプレートに読み込む方法で実現することにしました。

RSSフィードにてwordpressの更新情報を読み込むファイルを作成する

別のwordpressブログの新着記事を一覧表示するためには、wordpressのRSS機能を使用します。ここでは投稿日時、またタイトルだけを表示させますが、RSSの仕様に基づいて画像やディスクリプションを読み込むことも可能です。

[php highlight="5,14,25"]
<?php
	$rssdata = simplexml_load_file("http://hoge.com/?feed=rss2");

	// 読み込み件数を決定する
	$num_of_data = 1;

	//出力内容の初期化
	$outdata = "";

	//設定した読み込み件数分だけ取得を繰り返す
	for ($i=0; $i<$num_of_data; $i++){ $entry = $rssdata->channel->item[$i]; //記事1個取得
		$date = date("Y.n.j", strtotime($entry->pubDate));
		$title = $entry->title; //タイトル取得
		$title = mb_convert_encoding($title, "EUC-JP", "auto");
		$link = $entry->link; //リンクURL取得

		//出力内容に日付けを入れる
		$outdata .= '

<a href="' . $link . '" title="' . $title . '" target="_blank">' . $date;

		//出力内容にリンク付きでタイトルを入れる
		$outdata .= ' <span>' . $title . '</span></a>

';
	}

	echo '
<div>' . $outdata . '</div>

'; //実行結果を出力する
[/php]

5行目にあるように、読み込み先の仕様に合わせて読み込み件数を指定します。
もし5件の表示の場合はここを5とします。
もしリスト形式のhtmlタグでコーディングしたい場合は、18行めのを<p>に変え、29行目の<li>を<ul>に変えると良いでしょう。

ポイントの一つは、wordpressは文字コードがUTF-8で運用しているケースがほとんどだと思いますが、カラーミーショップではEUC-JPが文字コードであるため、同ファイルをEUC-JPで保存します。

そのため、上記のコード内14行目にあるように、文字コードを指定する必要があります。

[php]
		$title = mb_convert_encoding($title, "EUC-JP", "auto"); //文字コードを指定
[/php]

これをしなければ、文字化けした新着表示が表示されることになります。

このファイルを例えばnotify.phpなどのファイル名とし、文字コードをEUC-JPにて、ブログサイトの最上位階層に保存します。

外部ファイルをカラーミーショップに読み込む

これは、カラーミーショップはsmartyのタグを支えるため、そのfetch fileで上記にアップロードしてあるファイルを読み込んで表示させることにしました。

カラーミーショップのテンプレートの表示させたい位置に下記のコードを挿入します。

[html]
			<{fetch file="http://hoge.com/notify.php"}>
[/html]

読み込むファイル名、またサーバの宛先は任意のものに変えてください。

これによってブログの更新情報がカラーミーショップに表示されるようになります。

なお、表示させる新着情報の装飾ですが、CSSはカラーミーショップ内のスタイルシートに記載すれば反映されます。

他のファイルの読み込みにも使えるかも？

この方法を使用すれば、カラーミーショップでは実現できない他の機能をAPIのようにして読み込むことが理論上できるということになりますが、セキュリティ的な観点から十分に注意を払いながら行いたいところです。

追記（2018年1月）：
カラーミーショップにてfetchが禁止になり代替案を探していましたが、RSSサービスを埋め込む方が良いかと思います。下記にその方法をまとめました。