E-store step02

少し時間が空いてしまいましたが、ショップサーブのサイトリニューアルの第3回目です。
第1回目はプロローグとして『したいこと』をまとめ、
第2回目では「jQueryを利用しURLを取得して、bodyにclass名を追加する」という方法から、
ページ毎にスタイルを変更する方法をまとめました。

今回は『別のサーバーで作成したWordPressの記事を読み込む』について書きます。

2014年9月より、Eストアのショップサーブで、WordPressが使えるオプションサービスが開始されています。

･･･が、今回は別サーバーのWordPressを読み込みます。

記事を読み込む方法はRSSを利用します。

WordPressのRSSから、更新日・タイトル・記事一部そして、アイキャッチ画像を読み込みます。

まずはWordPress側の設定
WordPressのRSSには、デフォルトではアイキャッチ画像を読み込んでくれません(;_;)
ですので、RSSにアイキャッチ画像を表示させます。

function.phpの最後に以下を追加します。

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '
' . get_the_post_thumbnail($post->ID,array(200,200)) //指定サイズ .
'
' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

これで、アイキャッチ画像をRSSに表示することが可能です。
WordPress側はOKです！

次に、読み込み側のショップサーブの設定です。RSSを読み込む方法は以下の記事を参考にさせていただきました。

WordPressで画像つきのrssフィードを取得。静的htmlに表示

実際には、参考サイトのrss.jsをデザインに合わせて順番や、クラス名を変更しています。

ちなみに…
WordPress全ての記事ではなく特定のカテゴリーのみ、読み込みをしたかったのでフィードのURLを
カテゴリーページURL/feed
としています。

URLの末尾をID表記にしている場合は
http://[サイトのトップURL]/?feed=rss2&cat=[カテゴリID]
となるようです。

リアルタイムとは行きませんが、2.3時間毎には更新されているようです！

フィードを使った読み込み…
他でも使えそうです。

Written by IShiko