サブディレクトリにあるWordPressの記事を、サイトトップのhtmlに表示する

同じサイト内にある　WordPressとは無関係なhtmlでワードプレスの記事を表示する方法には、

rssフィードをPHPで読み込んで表示したりする方法がよく知られています。

ただ、ワードプレスのrssフィードはキャッシュされているため、リアルタイムでトップページに反映させることは困難です。

あるいは、固定ページなどでjson形式でリクエストに応答する仕組みを作って利用したり、xml-rpcのクライアントを作る方法もあります。

ただ、手間も知識も必要になります。

なので、jQueryのコード一行でWordPressのコンテンツを表示する方法を説明したいと思います。

コピペでテストを行うことができるコードは、以下のようになります

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>WordPress Snippet | サブディレクトリにあるWordPressの記事を、サイトトップのhtmlに表示する </title>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script type="text/javascript">
jQuery(document).ready(function() {
 $("#view-entry").load( '/wp3/enough/ #recent-post-groupby-cat-2');
});
 </script>
 </head>
 <body>
 <div><ul id="view-entry"></ul></div> 
 </body>
</html>

コードの説明

 $("#view-entry").load( '/wp3/enough/ #recent-post-groupby-cat-2');

もしあなたの、ホームページが　

http://www.example.com

でワードプレスが

http://www.example.com/wp/

に設置されている場合は

$("#view-entry").load( '/wp/');

という記述だけにするとワードプレスのトップページが、スタイル抜きで表示されると思います

$("#view-entry").load( '/wp/ #recent-post-groupby-cat-2');

という記述にすると　id=”recent-post-2″ の部分（ウィジェットの最近の投稿）の部分だけを読み込みます。

どうです、まるで　cssのルールを指定するように　簡単にロードするhtmlを選択できます

簡単で理解しやすいと思いませんか？

あとは、トップページのスタイルを調整しておしまいです。

注意

このサンプルコードは、あくまでテスト用のサンプルコードです。

jQueryは、google.comから読み込まないで、ダウンロードして使ってくださいね