WordPressの更新内容をHTMLサイトに自動で表示する方法
JavaScriptを利用して外部RSSを読み込む※方法
※外部のRSSを読み込みサイトに表示する
HTMLサイトの任意の場所に、WordPressで投稿（更新）した記事のタイトル（リンク）を自動で表示する。また、WordPressの「任意のカテゴリのみ」を表示する場合など。
以前は、「Google AJAX Feed API」を利用するためにはAPIキーが必要だったが、現在は不要になった。HTMLサイトの任意の場所（表示させたいところ）に専用のコードを記述すれば簡単に表示できる。
Google Feed APIの概要
RSSには、RSS1.0・RSS2.0・atomなど複数の種類があり、形式によって設定の仕方が違う。
しかし、「Google Feed API」を使えばどの形式のRSSでも成形してくれる。他のRSSサービスとは違い余計な広告は表示されず、またスピードも軽い。
設定手順
- JavaScriptコードの取得（確認）
- フィードの表示を整形
- JavaScriptコードを外部化する（jsファイル）
- RSSフィードを表示させたい場所にスクリプトを記述
- その他
1.基本形のJavaScriptコードの取得（確認）
Google Feed APIへアクセス（要ログイン）して基本となるコードを取得する。
1-1.「Feed API」メニューをクリック
1-2.「Developer’s Guide」メニューをクリック
1-3.「The “Hello World” of Feed」と書かれた箇所
1-4.<head>～</head>に以下のコードを記述
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("RSSのURL");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
※RSSのURL→表示させたいブログのRSSフィード（例：http://example.com/feed/）
1-5.表示させる箇所（<body>～</body>）に以下のコードを記述
<div id="feed"></div>
上記で生成されるJavaScriptをそのまま使用すると以下のソースが吐き出される。
<div id="feed">
<div>記事1のタイトル</div>
<div>記事2のタイトル</div>
<div>記事3のタイトル</div>
</div>
2.フィードの表示を整形
どのような形で表示させるのかコードをカスタマイズして整形する。
【参考サイト】
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。 | ウェビメモ
デジ丸ブログ ブログのRSSフィードを自サイトに表示（Google AJAX Feed APIを使用）
ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能 – Cre’ps inc.
3.JavaScriptコードを外部化する（jsファイル）
上記のJavaScriptコードを<head>内ではなく、別.jsファイルにする。
3-1.テキストエディターを開く3-2.「google.load("feeds", "1");」から記述する（注：RSSのURLを変更する）
3-3.「任意の名称.js」で保存する（例：rss.js）
3-4.サーバーにアップロード（jsフォルダの中に）
3-5.表示させたいサイトの<head>内にスクリプトを記述する
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="保存先のファイル名/rss.js" charset="UTF-8"></script>
※保存先のファイル名→（例：js/rss.js）
4.RSSフィードを表示させたい場所にスクリプトを記述
<ul id="feed"></ul>
5.その他
WordPressなどである特定のカテゴリだけを表示させたい時
1-4にある「RSSのURL」に以下を記述する。
http://example.com/feed/
↓http://example.com/?feed=rss2&cat=[カテゴリ番号]
もしくは、
http://example.com/category/[カテゴリパス]/feed/
最新の記事に「new！マーク」をつける
編集中
以上
あわせて読みたい関連記事
タグ
2012年10月21日 | コメント／トラックバック(0) |
カテゴリー:WordPress カスタマイズ（技術）関係
