WordPressをホームページの更新システムとして使う

ホームページの更新システムを一から構築するのは骨が折れるのでBlogを使ってしまおう。
今回ご紹介するのは弊社のブログでも採用しているWordpress。 最近のサーバーは簡単インストールと銘打ち、Wordpressをワンクリックでインストールするサービスが多い。
GMOインターネットサービスのお名前.comレンタルサーバーがスペック・サービス面でコストパフォーマンスが良いです。

さて、本題です。
■必要なもの
１．WordpressのRSSフィードURL…【インストール先のURL】+【?feed=rss2】です。（ここのブログの場合）
２．Google AJAX Feed APIのキー…ココから取得してください　※英語ですがURLを入れてGenerate API Keyボタンを押すだけ
３．表示させるHTML…設置をお考えのトップページ等
４．取得コード…後記

■設置方法
１．</head>直前に

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=【取得したキー】”>
</script>
<script type=”text/javascript”>
google.load(“feeds”, “1″);
</script>

を挿入。

２．表示させるHTMLの希望箇所に下記ソース

<div id=”feed”></div>
<script type=”text/javascript”>
function initialize() {
//RSSフィードの取得
var feed = new google.feeds.Feed(“【WordpressのRSSフィードURL】”);

//取得するフィード数
feed.setNumEntries(10);

//実際に読む込む
feed.load(function(result) {

//読み込めたか判別
if (!result.error) {

//表示部分を選択
var container = document.getElementById(“feed”);

//変数の初期化
var useFeed = “”;

//Feedの処理
for (var i = 0; i < result.feed.entries.length; i++) {

//Feedを一つ抽出
var entry = result.feed.entries[i];

//リストに挿入
useFeed +=
‘<li><a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a>’;
}

//リストを表示させる
container.innerHTML = ‘<ul>’ + useFeed + ‘</ul>’;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</div>

を挿入。

■CSS装飾
CSSで背景色やPaddingや下線をデザインすれば既存のHPのデザインとマッチします。

動きましたか？
時間があるときにWordpressで登録した画像の取得も書こうと思います。