【プラグイン無し】WordPressのブログにnoteのrssフィードを読み込んで記事を表示する

2024年10月10日 2024年10月17日

うちらぶ

この記事では、noteの新着記事をWordPressのブログ上に表示する方法を紹介します。

この記事の内容はコピペするだけなので、誰でも使えます。

ただし、環境の問題で動作しないときはプログラミングの知識が必要です。
上手くいかないときは別の手段を考えるのも手です。

当サイトではnoteとブログの違いや使い分けや執筆に役立つツールなどを紹介しています

【実践】WordPressのブログにnoteのrssフィードを読み込んで記事を表示する

下記のような感じでnoteの新着記事が表示されます。

WordPressでnoteのrssを読み込んで記事を表示する手順

WordPressでショートコードを使用してRSSフィードの内容を表示する方法を説明します。

このコードを使用するには、以下の手順に従ってください：

noteのRSSを記事やウィジェットに表示する手順

WordPressテーマのfunctions.phpファイルにこのコードを追加します。
WordPressの投稿や固定ページで、以下のようにショートコードを使用します

[mynoterss src="https://note.com/vast_minnow279/rss" limit="10" cache_time="7200""]

※src属性にRSSフィードのURLを指定し、limit属性で表示したい記事の数を指定します（オプション、デフォルトは5）。
※cache_time属性でキャッシュに保存する時間を設定します（秒単位、デフォルトは3600）

RSSフィードをキャッシュ化して連続で読み込まないようにしています。

これにより、パフォーマンスが向上し、Note.comのサーバーへの負荷も軽減されます。

WordPressのfunction.phpに追加する内容

// functions.php または専用のプラグインファイルに以下のコードを追加します

// ショートコードを登録
add_shortcode('mynoterss', 'my_note_rss_shortcode');

function my_note_rss_shortcode($atts) {
    // 属性を抽出
    $atts = shortcode_atts(
        array(
            'src' => '',
            'limit' => 10,
            'cache_time' => 3600, // キャッシュの有効期間（秒）、デフォルトは1時間
        ),
        $atts,
        'mynoterss'
    );

    // RSSフィードのURLが指定されていない場合は警告を表示
    if (empty($atts['src'])) {
        return 'Error: No RSS feed URL specified';
    }

    // キャッシュキーを生成
    $cache_key = 'my_note_rss_' . md5($atts['src'] . $atts['limit']);

    // キャッシュからデータを取得
    $output = get_transient($cache_key);

    // キャッシュが存在しない場合、RSSフィードを取得して処理
    if (false === $output) {
        // RSSフィードを取得
        $rss = fetch_feed($atts['src']);

        if (is_wp_error($rss)) {
            return 'Error: ' . $rss->get_error_message();
        }

        // 出力をバッファリング
        ob_start();

        // フィードの項目を処理
        $maxitems = $rss->get_item_quantity($atts['limit']);
        $rss_items = $rss->get_items(0, $maxitems);

        if ($maxitems == 0) {
            echo 'No items found.';
        } else {
            echo '';
            foreach ($rss_items as $item) {
                $note_id = basename($item->get_permalink());
                echo '';
                echo '';
                echo '';
            }
            echo '';
        }

        // バッファリングした出力を取得
        $output = ob_get_clean();

        // 出力をキャッシュに保存
        set_transient($cache_key, $output, $atts['cache_time']);
    }

    // Note.comの埋め込みスクリプトを追加
    wp_enqueue_script('note-embed', 'https://note.com/scripts/embed.js', array(), null, true);

    // カスタムCSSを追加
    wp_add_inline_style('your-theme-style', get_note_rss_custom_css());

    return $output;
}

// カスタムCSSを定義する関数
function get_note_rss_custom_css() {
    return "
        .note-rss-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        @media screen and (min-width: 768px) {
            .note-rss-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .note-rss-item {
            width: 100%;
        }
        
        .note-embed {
            max-width: 100%;
            height: 200px;
        }
    ";
}