カラーミーショップに別サイトの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]
			&lt;{fetch file="http://hoge.com/notify.php"}&gt;
[/html]

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

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

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

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

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

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

1件のコメント

  1. お世話様です。
    本記事を拝見し、カラーミーショップにワードプレス内の最新記事を出力することができました。
    ありがとうございます。
    ですが、どうしてもサムネイル画像(アイキャッチ)が表示することができません。
    可能でしたらご教授頂けませんでしょうか。
    お忙しいところ恐れ入りますが、よろしくお願いします。

    Reply
      • ご返信いただきありがとうございます。
        頂いたURLで説明されていた通り、RSS設定の方はアイキャッチが表示されるように設定済みとなります。
        functions.phpに追加記述でRSSに画像が表示されたのは確認しました。
        ちなみにプラグインでも試しています。(こちらも表示確認済み)
        上記の設定のみですと、やはりカラーミー側にアイキャッチを表示することはできませんでした。
        phpはど素人なもので、どういった記述をして表示するのかわからず途方に暮れております。
        可能であればご教授お願い致します。
        お忙しいところ恐れ入りますが、よろしくお願い致します。

        Reply
  2. こんにちは。
    この記事でカラーミーショップにWordPressのRSSフィードを読み込む事ができました!
    とても助かりました。ありがとうございます。

    可能であればご教授頂きたいのですが、日付の表示を「月」と「日」が1桁だったときに頭に 0 が付く様にしたいのですが、
    PHPがあまり理解できていないので分かりませんでした。
    お手数をお掛けいたしますが、宜しくお願い致します。

    Reply
    • かのこさん
      ご覧いただきありがとうございます。
      日付のフォーマットについてですが、公式ページを参照されてもいいかもしれません:

      https://wpdocs.osdn.jp/日付と時刻の書式

      ご希望の形式の場合であると、

      < ?php the_date("Y年m月d日"); ?>

      のような形とされるといいかもしれません。

      Reply
  3. ご返信ありがとうございます。
    教えて頂いた書式で希望通りの表示ができました!
    ありがとうございました。

    Reply
  4. 2019年1月21日(月)より、デザインテンプレート内における記述方式「fetch(フェッチ)」の利用が全面的に禁止されることになったようです。

    Reply
    • Kishiさん 情報ありがとうございます!
      代替案を検討しなければならないですね。
      includeなどでできそうですが、検証してみたいと思います。

      Reply

Leave a Comment.