WordPressサイトにアメブロRSSを広告なしで表示

アメブロのRSSをWordpressサイトの新着情報欄に読み込んで使いたいと思い、
http://www.goo-yan.com/blog/275
https://www.willstyle.co.jp/blog/213
の記事を参考にやってみた。

rss.phpにアクセスすれば正しくfeedは表示されるのに、サイトにそれを読み込めない。 http://primarytext.jp/blog/1298　の記事を読んで、
WordPressの多くのテーマではjQueryがもともと読み込まれているけれど
そのままだとjQueryの「$」が使えない、ということがわかった。

スクリプトの前後を　jQuery(function($){　　　 });　で囲んで
必ず、header.phpのwp_head()の下に書きなさい、とのこと。
※wp_head()でjQueryを読み込んでいるので、それより上では動かない。

これで解決できた。

前置きが長くなったけれど、以下、手順。

  1. 以下、[アメブロID]部分を差し替え、rss.phpを作成。
    WordPressのindex.phpと同じ階層にアップ。

    <?php 
date_default_timezone_set('Asia/Tokyo');
$url = "http://feedblog.ameba.jp/rss/ameblo/[アメブロID]/rss20.xml";
$rss =  simplexml_load_file($url);
$output = '';
$i = 0;
// 取得件数
$max = 5;
if($rss){
    foreach( $rss->channel->item as $item )
   {
        /**
        * タイトル
        * $item->title ;
        * リンク
        * $item->link ;
        * 更新日時のUNIX TIMESTAMP
        * $timestamp = strtotime( $item->pubDate ) ;
       * 詳細
        * $item->description;
         */
        if(!preg_match('/^PR:/',$item->title )){
            if($i < $max){
                $timestamp = strtotime( $item->pubDate );
                $date = date( 'Y.m.d',$timestamp );
                $output .= '<li>';
                $output .= '<time datetime="' . $item->pubDate . '">' . $date . '</time>　';
                $output .= '<a href="'. $item->link .'" target="_blank">' . $item->title . '</a>';
                $output .= '</li>';
                $i++;
            }
        }
        
    }
}
 
echo $output ;
  2. header.phpのwp_head()より下に以下を記述。
    トップページ以外に新着情報を掲載したい場合や階層が違う時は’rss.php’の部分を絶対パスで’http://サイトのURL/rss.php’のように書くとよい。

    <script>
jQuery(function($){ 
;(function($){
  $(function(){
    $.get('rss.php',function(data){
      $('#feed').html(data);
    })
  })
})(jQuery);
});
</script>
  3. feedを表示させたい部分に以下を記述。これでＯＫ♪
    4. <ul id="feed"></ul>

ただし、header.phpに書くと
テーマのバージョンアップで上書きされることがあるので、忘れず書き換えないといけない！

 

Simplicityのheader_insert.phpなど
<head>に追記できる部分を別に用意してくれているテーマもあるけれど、
wp_head()より上に配置されるものが多いので動かない。

この部分に、
WordPress以外の、もともとjQueryの読み込みのないページのように

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>;

を記述して再びjQueryを読み込んで、
手順２の　jQuery(function($){　　　 });　を抜いたものを記述する方法もある。
一応、これでも動くのは確認したけれど、他で誤作動を起こしそうな気もするので
やっぱりバージョンアップに気をつけつつheader.phpに記述がいいかなと思う。

 

※アウトプットする項目・順番・形式などrss.phpの中で変えたり、
cssで表示を変えたりできる。

 

タイトルとURLをコピーしました