noteの更新情報やRSSをWordPressに表示するスニペット

このブログ以外でも、なんでもない雑記などをnoteに書いているのですが、どうせならこのブログにもnoteの更新情報を表示させようと思い、やってみました。

コピペでできる!noteの更新情報を追加する方法

条件として、WordPressで作成されているサイトでのみ使えます。
(Google Feed APIがサービスを終了してしまったので、静的なサイトにはつかえません)

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 '<ul>';
            foreach ( $rss_items as $item ){
                echo '<li>';
                echo '<a href="'.$item->get_permalink().'" target="_blank">'.$item->get_title().'</a><span class="date">'.$item->get_date('Y-m-d').'</span>';
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}

noteのRSSを取得する

↑の○部分を右クリックで「URLをコピー」します。
私のnoteの場合↓のようになります。

https://note.mu/mei331/rss

表示したい箇所に呼び出しコードを記載

sidebar.phpなど、表示したい箇所に下記のように記載します。

<?php my_feed_display('https://note.mu/mei331/rss','5'); ?>

最初の引数部分にnoteのRSS、第2引数に表示したい数を追加します。
すると、以下のようなHTMLコードになります。

<ul>
<li><a href=“note記事URL" target="_blank”>noteタイトル</a><span class="date">公開日付</span></li>
:
<li><a href=“note記事URL" target="_blank”>noteタイトル</a><span class="date">公開日付</span></li>
</ul>

このコードなら、noteのほかにも、WPのRSSなどでも使用できます。
WPサイトを複数運営している方なども使えるのでは。

画像付きの記事リストにしたい場合

RSSに画像のURLが含まれていれば、以下のスニペットで画像付きのリストにすることもできます。
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 '<ul>';
            foreach ( $rss_items as $item ){
                echo ‘<li>';
                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 ) ){
                    $first_img = preg_replace('/(.+)\.(.+)/', ‘$1\.$2', $first_img);
                    echo '<figure class="thumb"><img src="'.esc_attr( $first_img ).'" alt="" /></figure>';
                }
                echo '<p class="entry_title">'.$item->get_title().'</p>';
                echo '<time>'.$item->get_date('Y.m.d').'</time></a>';
                echo ‘</li>';
            }
            echo ‘</ul>';
        }
    }
}

表示する時のコードは同じです。

WPの場合、RSSにアイキャッチ画像は含まれていないので、配信するfeed側に画像を含める必要があります。

noteのfeedにも設定した画像が含まれるようにしたりとか、設定で変えられたらいいのになぁ。

UPDATE : / Tags

人気のタグ:jQueryカフェ育児CUD(カラーユニバーサルデザイン)寝かしつけ雑記JavaScriptファンタジーアプリお金の話

関連記事

新着記事

コメントを残す