【2022年最新版】WordPressにnoteの記事一覧を表示させる方法

＊Local by Flywheelなどを使って、WordPressのローカル環境で構築されている場合は、
うまく動かないかもです。
本番環境では問題なく使えており、クライアントのサイトにも、今からご紹介するコードを使用しております。

（WordPressにnoteの記事一覧を埋め込む方法に関する参考サイトが、
圧倒的に少ないので、備忘録的にブログを書きました。）

rssについてそこまで知識がないので、その書き方は違うよってコメントは、
お問い合わせフォームよりご連絡ください。

以下のコードを、適当にコピペで使ってください。

<?php
  include_once(ABSPATH . WPINC . '/feed.php');
  $rss_arr = array('https://note.com/〇〇/rss'); // noteのURL
  $rss = fetch_feed($rss_arr);
?>

<?php if(!is_wp_error($rss)): ?>
<?php
  $maxitems = $rss->get_item_quantity(12); // 全部表示する場合は -1 // *25件以上は不可
  $rss->set_cache_duration(1800); // キャッシュ 1800秒=30分
  $rss_items = $rss->get_items(0, $maxitems);
?>
<?php endif;?>

<div class="cards">
  <!-- 取得できた RSS フィードが0件の時は、「No items.」と表示 -->
  <?php if ($maxitems == 0): ?>
    <?php echo '<p>No items.</p>' ?>

  <!-- 取得できた RSS フィードが1件以上ある時 -->
  <?php else: ?>
    <?php foreach($rss_items as $item): ?>
      <article class="card">
        <!-- アイキャッチ画像の取得 -->
        <?php
          $hash = substr($item->get_link(), strrpos($item->get_link(), '/') + 1);
          $api_data = file_get_contents('https://note.mu/api/v1/' . 'notes/' . $hash);
          $eyecatch = json_decode($api_data, true)['data']['eyecatch'];
        ?>

        <!-- 本文1枚目の画像の取得 -->
        <?php $first_img = ''; ?>
        <?php if(preg_match('/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $item->get_content(), $matches)): ?>
        <?php $first_img = $matches[1]; ?>
        <?php endif; ?>

        <!-- アイキャッチ画像がある時 -->
        <?php if(!empty($eyecatch)): ?>
          <a class="card__link" href='<?php echo $item->get_permalink(); ?>' target="_blank" rel="noopener noreferrer">
            <img class="card__img" src="<?php echo esc_attr($eyecatch); ?>" alt="<?php echo $item->get_title(); ?>">
          </a>

        <!-- アイキャッチ画像がない、かつ本文1枚目の画像がある時 -->
        <?php elseif(empty($eyecatch) && !empty($first_img)): ?>
          <a class="card__link" href='<?php echo $item->get_permalink(); ?>' target="_blank" rel="noopener noreferrer">
            <img class="card__img" src="<?php echo esc_attr($first_img); ?>" alt="<?php echo $item->get_title(); ?>">
          </a>

        <!-- アイキャッチ画像も、本文にも画像がない時 -->
        <?php else: ?>
          <a class="card__link" href='<?php echo $item->get_permalink(); ?>' target="_blank" rel="noopener noreferrer">
            <img class="card__img" src="<?php echo esc_url(get_theme_file_uri('ここにダミー画像')); ?>" alt="<?php echo $item->get_title(); ?>">
          </a>
        <?php endif; ?>

        <div class="card__body">
          <time class="card__time" datetime="<?php echo $item->get_date('Y.m.d'); ?>" itemprop="datePublished"><?php echo $item->get_date('Y.m.d'); ?></time>
          <p class="card__title"><?php echo $item->get_title(); ?></p>
          <div class="card__text">
            <!-- 記事の本文を60文字抜粋して表示 -->
            <?php echo wp_trim_words($item->get_description(), 60, '…'); ?>
          </div>
        </div>
      </article>
    <?php endforeach; ?>
  <?php endif; ?>
</div>

【note公式】ダミー画像のリンク先

【note公式】ロゴデータ

エラーの場合

PHPの構文をチェックする
PHP構文チェッカー

コードを載せている参考サイトがありますが、
よくPHP構文チェッカーでエラーを返されることが多々あります。

アイキャッチ画像が表示されない場合

file_get_contents動いておらず、allow_url_fopenがOFFになっている

簡単に説明すると、サーバ環境の設定で、アイキャッチ画像が取得できていないかもです。

参考urlを載せます。
file_get_contentsが動かない？cURLを使いallow_url_fopenがOffのサーバに対応