Written by Kasumi

【簡単】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フィードを取得する方法はこちら

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

【簡単】固定ページで親ページがあるか条件分岐、親ページの情報を子ページで取得する方法【wordpress】

2022.03.05
4262
WordPress

投稿記事をCSVで管理!CSVのエクスポート、インポートを簡単にできるプラグインを紹介【ワードプレス】

更新日:2019.11.28
2207
WordPress

All-in-One WP Migrationプラグインを使ってワードプレスの引越しを簡単に!

更新日:2019.11.28
610
WordPress

【簡単】WordPressで蛍光マーカー線を導入する方法【結論:プラグインで解決】

2022.05.26
4755