コピペOK!別サイトの記事をRSSで取得する方法

2018/05/19 　

WEBサイトを作っていて「別のHPの記事を抜き出して一覧表示したい」と思うことはありませんか？
各CMSやブログサービスでは、更新状況を知らせる「RSSフィード」のアドレスを無料で公開しているのです！
そのデータを取得する方法をおぼえると、最新記事の一覧などを他のサイトで公開することができます！

jQuery+PHPを使う

必要なコードは３つです。

①html → 取得した情報を表示します
②php　　　→ 異なるURLの情報を取得します
③jQuery → 取得する情報について設定します

①html　→ 取得したRSSフィードを出力する場所

②phpファイル → 別オリジンのデータを取得できるようにします

これでphpファイルを作成しWebサーバーにupします。

③jQery → htmlファイルの直後に直接記述、またはタグで読み込みします

おまけのCSS

CSSはサイトの見た目を整えるものです。
外部cssファイルまたはstyleタグで読みこみます。

/*--------------------------
     RSSフィードの見た目設定
--------------------------*/
/*<h3>*/
.ttl_3{margin: 1em 0 1em 0.5em;
    border: 1px solid #d3f4f4;
    display: inline-block;
    padding: 0.5em 1em;
    background: #d3f4f4;
    position: relative;
color: #565656;}

/*<section>*/
.rss {
    margin: 1em auto;
    display: block;
    padding: 1em;
    width: 90%;
}

/*<ul>*/
#newkiji {
	margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.5em;
}

/*リスト表示*/
#newkiji li {
    text-align: left;
    color: #555;
    
}

/*リンクテキストの表示*/
#newkiji li a {
    text-decoration: none;
	display: inline-block;
	border-bottom: 1px dashed #ddd;
	    color: #555;
	font-weight: bold;
	padding: 1em 0.3em;
}

↓こんな感じで表示されます。

WordPressで使う場合の書き方（php）

WordPressではRSSフィード用の関数が用意されています。
［fetch_feed］という関数がそれです。

詳しい書き方はこちらのサイトに載っていました。

オンズ開発ブログ｜【WordPress】外部サイトのRSS情報を取得して表示させる方法。

［fetch_feed］関数をWordPressのテンプレートファイルで使うだけです！
ありがたい（TT）、WordPress様々。

WordPressでアメブロの新着記事を表示させる（php）

またアメブロの記事をWordPressで表示させたかったので、色々調べて作ってみました。
このコードをテンプレートのphpファイルに読み込むと表示できます。

私はいつもこの内容をコピーして別のphpファイルを作成し、

<?php get_template_part('phpファイルまでのパス、拡張子なし'); ?>

でpage.phpなどテンプレートファイルに読み込んでいます。
別オリジンの情報を取得する他のファイルを用意しなくていいので、簡単です。
こんな楽ばかりしていると脳みそが溶けてしまう…

書き方はこちらのサイトを参考にしました。

いつもお世話になっています♪

NxWorld｜WordPress：外部サイト（アメブロ・外部WordPress・Facebook）のRSSフィードを取得・表示する方法

あなたの役に立つかもしれないWeb制作放浪記

コピペOK!別サイトの記事をRSSで取得する方法