note.com→WordPressへRSS連携
見出し画像

note.com→WordPressへRSS連携

にゃんこ😸@ことほむ加賀支社

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

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

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

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

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

  • サムネイル画像のみ表示するようにしていること。

  • 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;
        }
        $maxitems = $rss->get_item_quantity($num);
        $rss->set_cache_duration(1800);
        $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 (has_post_thumbnail()) {
            $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'];
            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>';
    }
}

// マガジンの表示 
function note_magazine_rss01()
{
    echo '<h2><a href="[マガジンのURL]" target="_blank" rel="noopener">マガジン</a></h2>';
    note_feed_display('[noteのRSS]', '[読み込む数(-1だと全部で、Defaultは6)]');
}
add_action('[アクションフック]', 'note_magazine_rss01');

// note.com rss表示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]ファイルを読み込むようにしています。プラグインフォルダー内にファイルを置いてください。その他、画像ファイルなども置いてあげる必要があります。

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
「スキ」してくれてありがとう! アイコン点灯ヨシッ!
にゃんこ😸@ことほむ加賀支社
「ことほむ」ではゲームコンテンツ・アニメーション作品設定時代考証、観光プロモーション企画・マーケティング・デザイン企画をやってます。僕はWordPressとマーケティング担当。妻が和雪庵という茶室を開いており、茶書研究・茶道体験・お茶ゼミを開催していますが、流行り病で閉庵中です。