【簡単】jQueryを使って、wordpressのRSSを取得し記事を表示する方法【プラグイン不要】
jQueryを使ってwordpressサイトからRSS情報を取得し、別サイトに記事を埋め込みたい。
phpでRSSを取得する方法はわかるが、phpが使えない環境。javascriptは使える。
このような悩みを解決します。
本記事ではjQueryを使ってajax通信を用い、wordpressサイトからRSS情報を取得し、別サイトに記事を埋め込む方法について解説します。
※本記事ではjQueryを使うので、事前にライブラリを読み込んでるのが条件です。
RSS情報を取得
https://wordpressサイトのドメイン/feed/
まずは、取得したいwordpressサイトにRSSフィードがあるか確認します。
ブラウザのURL入力欄から、取得したいwordpressサイトのドメインを入力し、末尾に/feed/を追加してページを開きます。
下記のようなxmlのソースが現れば成功です。
RSSを取得したいサイトの埋め込み箇所に取得コードを記述（サンプル）
<script>
$(document).ready(function() {
$.ajax({
type: "get",
url: "https://取得したいwordpressサイトのドメイン/feed/" //(ここに取得したいwordpressサイトのドメインを入力)
}).done(function(result) {
$(result).find("item").each(function() {
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var img = $(this).find('description').attr('href');
var category = $(this).find('category').text();
var contents = '';
firstImg = $(this).find("content\\:encoded, encoded").text();
firstImg = $(firstImg).find("img").first().attr("src");
var pubDate = $(this).find("pubDate").text();
var Dates = new Date(pubDate);
var Dday = Dates.getDate();
var Dmonth = Dates.getMonth() + 1;
var Dyear = Dates.getFullYear();
$(".rssbox").append('<a class="" href="' + url + '"><img src="' + firstImg + '"><span>' + category + '</span><span>' + title + '</span><time>' + Dyear + '/' + Dmonth + '/' + Dday + '</time></a>');
});
});
});
</script>
<div class="rssbox">
</div>
上記がRSSを取得するサンプルコードになります。
詳細は以下の通りです。
$.ajax関数内のurlオプションに取得したいwordpressサイトのfeedURLを入れます。
eachメソッドを使って、取得したRSSのxmlからitem要素をあるだけ繰り返し取得します。
xmlを見たらわかるのですが、item要素内に記事情報が入ってます。
item要素の数はwordpressの表示設定からRSS/Atom フィードで表示する最新の投稿数項目で投稿数を決めれます。
タイトル・画像・カテゴリー ・ 投稿日を取得するコード
//タイトル
var title = $(this).find('title').text();
//カテゴリー
var category = $(this).find('category').text();
//記事内の最初の画像を取得
var contents = '';
firstImg = $(this).find("content\\:encoded, encoded").text();
firstImg = $(firstImg).find("img").first().attr("src");
//投稿日を取得
var Dates = new Date(pubDate);
//日
var Dday = Dates.getDate();
//月
var Dmonth = Dates.getMonth() + 1;
//年
var Dyear = Dates.getFullYear();
記事情報取得コードのサンプルです。
上記をeachメソッド内で変数を定義する事で、 タイトル・画像・カテゴリー ・ 投稿日 を取得できます。
append()関数を使って、ブロック要素内に取得した記事情報を追加
$(".rssbox").append('<a class="" href="' + url + '"><img src="' + firstImg + '"><span>' + category + '</span><span>' + title + '</span><time>' + Dyear + '/' + Dmonth + '/' + Dday + '</time></a>');
最後に、append()関数を使って、RSSで取得した情報を任意のブロック要素内に追加します。
append内で先ほど定義した変数とhtmlを用いて記事の枠組みを作りましょう。
以上の流れで、RSS情報を取得し、記事を埋め込む事ができます。
まとめ
以前、phpを使ってRSS情報を取得する方法を記事で投稿しましたが今回はjQuery編です。わりとphpが使えない状況があったので、本記事にjQueryで埋め込む方法をまとめました。
phpでワードプレスのRSSフィードを取得する方法はこちら
以上で解説を終わります。