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.phpwp_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.phpwp_head()より下に以下を記述。
    トップページ以外に新着情報を掲載したい場合や階層が違う時は’rss.php’の部分を絶対パスで’http://サイトのURL/rss.php’のように書くとよい。

    <script>
    jQuery(function($){ 
    ;(function($){
      $(function(){
        $.get('rss.php',function(data){
          $('#feed').html(data);
        })
      })
    })(jQuery);
    });
    </script>
  3. feedを表示させたい部分に以下を記述。これでOK♪
  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を読み込んで、
手順2の jQuery(function($){    }); を抜いたものを記述する方法もある。
一応、これでも動くのは確認したけれど、他で誤作動を起こしそうな気もするので
やっぱりバージョンアップに気をつけつつheader.phpに記述がいいかなと思う。

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