noteの投稿をrssで取得してWordPressで表示する

Wordpress

ワードプレスの固定ページ内でnoteを表示したい場合のコードメモです。

functions.php内に関数を記述して、表示させたいページに関数を書いて呼び出し、という流れ。

完成するとこんな風に仕上がります。
適当なハッシュタグ のrssから取得したので私の投稿ではありません〜。


cssは省略しますが、こんな感じで投稿者のアバターと名前、投稿時間、記事タイトル、本文を抜粋し、ご本家のnoteへ飛ばすリンクを設置する形になっています。

WordPressのfeedは使わず。。

これを実装した時点で、ワードプレスにデフォルトでフィード取得用ファイルがあるとは知らなかったので、別のfeedファイルをダウンロードしてそちらを使いました。

で、この記事を書く前に気がついてワードプレスデフォのfeedを使ってみたのですが、意外と記述やfeed内容を取得する関数が変わってしまってうまくいかず。。

結局別途ダウンロードした方のfeed.phpを使用しています^^;

githubよりダウンロードできます。(srcディレクトリ内にある、feed.phpというファイルをWPのテンプレートと同階層に入れて使いました)

テンプレートファイルの記述

先に、表示させるテンプレートファイルの記述を載せておきます。

私の場合はトップページに使っていたfront-page.phpに、

<!-- note呼び出し --> 
<?php note_feed_display('https://note.com/呼び出したいアカウント/rss', '1' ,'80'); ?> 
<!-- /note呼び出し -->

こんな感じで記述しました。

関数を書いた場所にhtmlがボンと出力されるので、呼び出したい場所に関数を記述してくださいね！

引数は３つ作っていて、

１つめ：呼び出したいnoteアカウントのrss
２つめ：表示したい投稿数
３つめ：表示したい投稿の文字数

となっています。

functions.phpに関数を書く

では関数はこちらになります。(fucntions.phpの最後の行などに記述してください)

ちょっと長いですがそのまま載せます！

//note取得
function note_feed_display($feedUrl, $num = 1 , $length = 80) {

/* ファイル呼び出しや変数設定など*/
if(!$feedUrl) { return false; } 
$i = 0; 
if ($length != 0) { $length = ($length * 2) + 2; } 
require_once "feed.php"; 
$feed = new Feed;

try { 
$rss = $feed->loadRss($feedUrl); 

  if(!$rss) { 
  throw new \Exception('feedが取得できませんでした'); 
  } if($rss->item) { 
     //投稿があればauthor情報取得 
    $creatorImg = $rss->item->children('note', true)->creatorImage;
    $creatorName = $rss->item->children('note', true)->creatorName;

    //各投稿を表示
    foreach ($rss->item as $item) { 
    if ($i >= $num) { 
          //何もしない } 
         else {
        $title = $item->title;
        $link = $item->link; 
        $timestamp = strtotime($item->pubDate); // 更新日時
        $date = date("Y/m/d", $timestamp); 
        $thumbnail = $item->children('media', true)->thumbnail;
     
    if (!($thumbnail)) { 
       $thumbnail = get_template_directory_uri() . "/img/noimage.jpg"; 
    } 

       $description = $item->description; // 詳細
       $description = str_replace("続きをみる", "", $description); // 続きを読むなど、決まった文章が詳細にはいっている場合除外 
      $description = strip_tags($description); 
     
    if ($length != 0) { 
      $description = mb_strimwidth($description, 0, $length, "…", 'utf-8'); 
    } 

 $str =<<< EOM 
<div class="blog__note"> 
<div class="note"> 
<div class="note__header"> 
<p class="note__authorImg">
<img src=" {$creatorImg};" alt=""></p> 
<div class="note__authorInfo"> 
<p>{$creatorName}</p> 
<p>{$date}</p> </div> </div> 
<div class="note__imgWrapper" style="background-image:url('{$thumbnail}');"> </div> 
<div class="note__body"> <div class="note__ttl"> 
<a href="{$link}"> {$title} </a> </div> 
<div class="note__txt"> {$description} </div> 
<p class="more"> <a href=" {$link} ">もっと見る</a> </p> </div>
<!-- /.note__body --> </div> </div><!-- /.blog__note -->
EOM; 

echo $str; 
    $i++; 
} 
}
} else { 
   throw new \Exception('feed itemが取得できませんでした'); 
  } 

} catch(\Exception $e) { 
    echo '<!-- ' .$e->getMessage(). ' -->'; 
}
}

try catchで括っているのはfeed.phpの該当関数内でエラーをスローする記述があったので使ってみたのですが、
他の方の記事を見ていてtry catchをつかっている方を見なかったので実質不要なのかも？しれません。

あと、アカウントはあっても投稿がゼロの場合もあるのでその場合は一切表示しない仕様のため、if( $rss->item ) で投稿があれば後続処理、としています。

エラーがあった場合のcatch内ではhtml上にコメントアウトの形でエラーメッセージを載せるような仕様になっているので、ここは自由に変更してください。

また、htmlの出力部分は長かったのでヒアドキュメントにしています。

コピペする場合は　$str =<<< EOM　や　EOM;　の余白・改行など気をつけてください！

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