note.com→WordPressへRSS連携

2022年3月31日 17:46

DUB DESiGNさんの記事に「プラグインなしでnoteの画像付き記事カードを表示させるスニペット」というものがあり、子テーマのfunctions.phpに書くことで、note.comのRSSをWordPressサイトに表示することができるんですが…弊社サイトは最近子テーマを使ってないので、セルフプラグインとして実装することにしました。

ということで、少しコードを書き直したので晒しておきます…が、コピペするだけではエラーが出ますし、「重大なエラーが…」メッセージが出ます。

とはいえ、FTPを使ってプラグインをアップするならば、直せるチャンスあるかと思うので、それ以外の方法でアップするのはやめてあげてください。

プラグインフォルダー名は、公式プラグインと被らないように、自分のドメイン名など組み合わせて一意になるように工夫しましょうね。
その他、プラグインを作成するときは下記を一読しませう。

で、こちらがnote.comのRSSを読み込むプラグインの本体です。
基本構成はDUB DESiGNさんに掲載されているままです。変更点は‥

サムネイル画像のみ表示するようにしていること。
※2023年6月にMRSSフィードを処理するよう書き換えました。
RSS本文に「…続きをみる」が入っているので、消していること。
複数のRSSを処理できなくなっていること。

です。また表示に関してはアクションフックを利用していますので、テーマなどのアクションフックを活用してください。
また［マガジンの表示］部分を工夫してもらうことで、複数RSSの処理も可能です。

/**
* @package [プラグイン名]
* @version ［バージョンナンバー］
*/
/*
Plugin Name:　[プラグイン名]
Description:　［プラグインの説明］
Author: [作者名]
Version: ［バージョンナンバー］
*/

if (!defined('ABSPATH')) {
    exit;
}

function note_feed_display($rss_url, $num)
{
    include_once(ABSPATH . WPINC . '/feed.php');
    $rss = fetch_feed($rss_url);
    if (!is_wp_error($rss)) {
        if (empty($num)) {
            $num = 6; //6件の情報を取るように設定。note.com無料版では最大25件。
        }
        $maxitems = $rss->get_item_quantity($num);
        $rss->set_cache_duration(1800); //この値を大きくすることでrssを取得しに行く間隔が長くなる。
        $rss_items = $rss->get_items(0, $maxitems);
    }
    if ($maxitems == 0) {
        echo '<p>No items.</p>';
    } else {
        $output = '';
        foreach ($rss_items as $item) :
        $output .= '<article class="notecardtype__article">';
        $output .= '<a class="notecardtype__link" href="'.esc_html($item->get_permalink()).'" target="_blank" rel="noopener">';
        $output .= '<p class="notecardtype__img">';
　　　　　　　　　　　　　　　　if (isset($item->data["child"]["http://search.yahoo.com/mrss/"]["thumbnail"][0]["data"])) {
	　　　　　　　　　　　　　　　　$eyecatch = $item->data["child"]["http://search.yahoo.com/mrss/"]["thumbnail"][0]["data"];
　　　　　　　　　　　　　　　　}
        if (!empty($eyecatch)) {
            $output .= '<img src="'.$eyecatch.'" alt="'.$item->get_title().' eyecatch" width="640" height="auto">';
        }
        if (empty($eyecatch) && empty($first_img)) {
            // アイキャッチがないときに表示させるDefault画像を自分のサイトにアップするなりして指定してあげると良いです。
            $output .= '[アイキャッチが無いときに変わりに表示する何か]';
        }
        $output .= '</p>';
        $output .= '<div class="notecardtype__article-info">';
        $output .= '<time class="notepubdate entry-time dfont" itemprop="datePublished" datetime="'.esc_html($item->get_date('Y.m.d')).'">'.esc_html($item->get_date('Y.m.d')).'</time>';
        $output .= '<h3 class="notecardtitle">'.esc_html($item->get_title()).'</h3>';
        $output .= '</div>';
        $output .= '</a>';
        // 左肩に表示する高さ60ピクセルの画像をpluginフォルダーに置いておく
        $output .= '<figure class="dfont notecat-name catid60"><img src="'.plugins_url('note_logo.png', __FILE__).'" alt="note"></figure>';
        //　本文の文字数丸め。WordPressと合わせて［110］にしてある
        $notedescription = esc_html(mb_substr(strip_tags($item->get_description()), 0, 110));
        $notedescription = str_replace('…続きをみる', '', $notedescription);
        $output .= '<p class="notedescription">'.$notedescription.' ...</p>';
        $output .= '</article>';
        endforeach;
        echo '<div class="notecardtype cf">'.$output.'</div>';
    }
}

// 2022.08追加分　note.comからのボットを判断させる

function note_bot()
{
  $ua = getenv("HTTP_USER_AGENT");
  $note_bot = 0;
  if (strstr($ua, "notebot")) {
    $note_bot = 1;
  }
  return $note_bot;
}


// マガジンの表示　
function note_magazine_rss01()
{
    echo '<h2><a href="[マガジンのURL]" target="_blank" rel="noopener">マガジン</a></h2>';
    note_feed_display('[noteのRSS]', '[読み込む数（-1だと全部で、Defaultは6）]');
}
//　2022.08追加分 notebot をパスさせる
if (note_bot() == 0) {
    add_action('[アクションフック]', 'note_magazine_rss01');
}

// note.com　rss表示css読み込み　※必要があれば自分でCSSを書いた場合のファイル読み込み
function note_rss_css()
{
    wp_enqueue_style('note_rss_style', plugins_url('note-style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'note_rss_css');

スタイルはそのまま活用させていただいたので、こちらに再掲することはやめておきます。
最後の行でプラグインフォルダーに設置した［note-style.css］ファイルを読み込むようにしています。プラグインフォルダー内にファイルを置いてください。その他、画像ファイルなども置いてあげる必要があります。

キャッシュがあるとnotebotがプイッとしてしまう場合

//キャッシュを無視
function bypass_cache($buffer) {
    if (note_bot() == 0) {
        header("Cache-Control: no-cache, must-revalidate"); // キャッシュを無効にし、再検証を要求
        header("Pragma: no-cache"); // 古いHTTP/1.0キャッシュ制御のためのヘッダー
        header("Expires: Thu, 01 Dec 1994 16:00:00 GMT"); // 過去の日付を設定してキャッシュを無効にする
    }
    return $buffer;
}

// 出力バッファリングを開始する関数
function start_buffering() {
    // 'bypass_cache'関数をコールバックとして設定してバッファリング開始
    ob_start("bypass_cache");
}

// 出力バッファリングを終了する関数
function end_buffering() {
    // バッファに何かがあるかチェック
    if (ob_get_length()) {
        // バッファの内容を送信してバッファリングを終了
        ob_end_flush();
    }
}

// WordPressの初期設定後に出力バッファリングを開始するアクションフック
add_action('after_setup_theme', 'start_buffering');
// WordPressのシャットダウン時に出力バッファリングを終了するアクションフック
add_action('shutdown', 'end_buffering');

notebotが来たらキャッシュを無視するようにしました。

実装は自己責任でお願いします。というかphpの知識がないと厳しいですので、わからない人は諦めてください。
またこちらのコードを使って出たいかなる損害も、当方では一切責任を持ちません。あくまでも参考コードとしてお使いください。

2022.08改変
note.com でリンクしたときに下記のサムネイルを作ってくれなくなるのに対応しました。

2024.06改変
キャッシュが有効だとnotebotが帰っちゃう問題に対応しました。

この記事が気に入ったらサポートをしてみませんか？