WordPressでnoteの記事を取得して表示する方法

デジタルマーケティング大学校では、コンテンツマーケティングをnoteで行っていますが、本体サイトは独自ドメイン＋WordPressで作成しています。

そこで生まれた要望が、本体サイトの方でnoteの最新記事を拾えないかということ。

コピペで貼るとかではなく、あくまで自動で取得してくれるものが理想です。

こういう時は、大体先駆者がいらっしゃるので、素直にその恩恵にあずかりたいと思います。

やろうと思えばここまでできるみたいです。

rss-nuxt-app.netlify.com

が、これは本職のエンジニアでないと難しそうなので。。。もうちょっと簡単なやり方を探します。

例えば、検索で見つけたこちらの記事

RUBYDESIGN(ルビーデザイン)noteをワードプレス側のサイトに表示させる手順

これによると、WordPressのfunctions.phpを変更し、該当noteのrssを取得すれば良いことが書いてありますね。

（上記参考記事ではfunction.phpとありますが、functions.php、「s」月が正しいです）

早速やってみたいと思います。

1. WordPressのfunctions.phpを編集する

WordPressのfunctions.phpは管理画面上の「外観>テーマエディター」から編集することができます。

すでにいっぱい記述があると思いますので、スクロールして一番下まで行き、おそらく一番下の行に書いてある

?>

の上に下記コードをコピペします。

//RSSの読み込み
function my_feed_display($feedURL, $num){
   if(!$feedURL){return false;}
   if(!$num){$num = 5;}
   include_once( ABSPATH . WPINC . '/feed.php' );
   $rss = fetch_feed( $feedURL );
   if ( !is_wp_error( $rss ) ) {
       $maxitems = $rss->get_item_quantity($num);
       $rss_items = $rss->get_items( 0, $maxitems );
   }
   if ( !empty( $maxitems ) ) {
       if ($maxitems == 0){
           echo '<!-- RSSデータがありませんでした -->';
       }else{
           echo '<div class="box_blog">';
           foreach ( $rss_items as $item ){
               echo '<div class="blogbox clear_fix">';
               echo '<a href="'.$item->get_permalink().'">';
               $first_img = '';
               if (preg_match('/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi',$item->get_content(), $matches )) { $first_img = $matches[1]; }
               if (!empty($first_img)){
                   echo '<p class="thumb"><img src="'.esc_attr($first_img).'"  alt="'.$item->get_title().'" /></p>';
               }
               echo '<div class="txtarea_topic">';
               echo '<p class="date_blog">'.$item->get_date('Y/m/d').'</p>';
               echo '<p class="name_blog">'.$item->get_title().'</p></a>';
               echo '</div>';
           }
           echo '</div>';
       }
   }
}

慣れていない方はコピペ場所を間違わないように気をつけてください。

2. noteのRSSを取得する

次に読み込みたいnoteのRSSを取得します。

マイページを表示して、プロフィール欄にあるTwitterマークの横のアンテナみたいなアイコンをクリックしますと、リンクで別ページが開きます。

このアドレス（URL）こそが取得したいものです。

こちらRSSさえあれば、noteの内容を読み込めますので、たとえば特定の「マガジン」の内容を読み込むということもできます。

マガジンのページにもアンテナアイコンがあるのがわかりますか？

このマガジンの内容を読み込みたいのであれば、こちらをクリックした時のURLを取得すれば良いわけです。

3. WordPress上に表示させる

WordPressの表示させたい箇所（テンプレート上です、投稿とかページの中ではないです）に次のコード

  <?php my_feed_display('xxxxxx','6');?>

を入れます。

XXXXXXの部分には、先ほど取得したURLを入れてください。

「'」を誤って消さないように注意です。

そして「6」とあるところが、読み込みたい記事数になりますので、こちらは適宜調整してください。

例えば、サイドバーに入れてみようと思った場合は、sidebar.phpを編集ですね。

こうして入れてみると

確かに表示されました！

あとは、デザインを整える必要がありますね。

とりあえず読み込めることはわかったので、もうちょっと調整していきたいと思います。