この記事は2009年6月18日に書いたもので、内容が古い可能性がありますのでご注意ください

EC-CUBEにWordPressの新着を表示させる

朝起きてTwitterをざっと見たら、半分くらいの人は問題なくアップデートできてたみたいなので(^^;
私もiPhoneのOSを3.0にアップグレードしてみました。
…とりあえず問題なく作業は完了。動作も今のところ問題ないようです。。

で、それを待ってる間ヒマだったので、先月からEC-CUBEで構築中の新しい筆文字ショップのトップページに、元からあるWordPressの筆文字サイトの「お知らせ」を表示させる改造に取り組んでみました。

思い立ったきっかけはこちらの記事で
静的 HTML に WordPress を埋め込む方法

WordPressのテンプレートタグを利用して、静的HTMLページに新着記事のタイトルなどを表示させようというTips。

これができれば、お知らせを書く時、WordPressで更新すれば両方のサイトに新着が表示されるので、お知らせを書く手間が1度で済んで便利ですよね。ぜひ取り入れたい!

でもうちの場合は、相手が静的HTMLではなくて、EC-CUBEのテンプレートになるので、ど〜なのかな〜と。。ちょっとやってみたけどできなかったし、自分でも到底できる気がしなかったので、この方法はさっさとあきらめ。
同ページで紹介されていた、Google AJAX Feed APIを利用してFeedを読み込む方法にチャレンジしてみました。

これならFeedを表示させるだけなので、読み込ませるサイトはWordPressじゃなくてもどこのブログでもOK。そして、javascriptだけで動くので、EC-CUBEのテンプレートに直接書き込んで大丈夫です。

参考にしたのはこちら
Google AJAX Feed API

文中のリンクをたどって、まずGoogle AJAX Feed API の登録をして、APIキーという、なが〜い文字列を取得しておきます。

それから、表示させたいページにスクリプトを追加するのですが、< head>〜< /head>に書き込まなくてはならないので、EC-CUBEの管理画面内のデザイン変更ではできません。直接ページのテンプレートファイルに追加します。
書き込むファイルはこれ。
data/Smarty/templates/使用中のテーマフォルダ/site_frame.tpl

このファイルの< head>〜< /head>内に、上記ブログで紹介されているスクリプトをコピペすればとりあえずOK。

でも、できれば記事が更新された日付も入れたいよね、という場合は、こちらのページで紹介されているソースを参照しましょう。

Google AJAX Feed API 日付の2桁(ケタ)表示

コピペするとき、2カ所だけ書き換えてください。
”YOUR_KEY_HERE”にさっき取得した長いAIPキー。
”YOUR_RSSURL_HERE”に、読み込ませたいページのRSSフィード。

これで仕込みはOK!
あとは、ページ内にこれを表示させるHTMLソースを書きます。
新規ブロックを作って書いておくと扱いが楽でいいかなーと思います。
たとえばこんな感じで。

< h2>お知らせ< /h2>
< div id=”feed”>< /div>

そしてちょっと待つと、こんなふうに日付とタイトルがリスト表示されます!
(Feedを取ってくるのに数分かかるみたいです。最初はデータがないので空欄のまま)

すご〜い!超簡単!
自分でスクリプトを書けなくても、コピペで動くんで(^^;
ぜひお試しください。
Googleすごいなー。

ちなみに、うちのEC-CUBEのテンプレートは、トップページと一覧と詳細の3種類でheadの中身を一部差し替えられるような改造がしてあるので、今回のスクリプトはトップページにだけ挿入しておきました。他のページでは新着表示しないので必要ありませんからね。

このheadの件については長くなるのでまた今度。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. てすと より:

    携帯テスト