noteの記事一覧をWordPressに表示させる方法

noteの記事をWordPressのサイトに一覧表示させる方法です。

↓こんな感じ

やり方をサクッと説明すると、「WordPressの外観→ウィジェットから、RSSフィードを入れる」です。この説明でわかる方は以下は読まなくてOK。「どゆこと?」と思った方は読んでみてください。

noteの記事一覧の表示方法

WordPressの管理画面から、外観>カスタマイズ>ウィジェットを選択すると、以下画面になります。

エリアの一覧の中から、noteの記事一覧を表示させたいエリアを選びます。(使っているテーマによってウィジェットを表示できるエリアは違います)

今「TOPページ上部エリア」に表示させている状態なので、ためしにサイドバーに表示させてみます。
「通常サイドバー」の「ウィジェットを選択」を押すと、追加できるウィジェットが出てくるので、その中から「RSS」を選択。

ウィジェット:RSSの入力内容はこちら。

【RSSフィードのURL】
noteのマイページURLの最後に「/rss」と付けたもの
例:マイページが「https://note.mu/2erire7」だったら、「https://note.mu/2erire7/rss」

プロフィールのところのフォロワーの横(PC版で見た場合)にあるRSSマークをクリックして確認することもできます。(クリックすると英数字がばーーっと並んだページが出てくるので、そのページのURLをコピー)

「このフィードにタイトルをつける (オプション)」以下は実際にいじって表示がどんな風に変わるかを見つつ、お好みの設定にしてみてください。

サイドバーのところに表示させてみたのがこちら。(文字装飾には、使っているテーマのスタイルが適用されます)

noteドメイン変更(.mu→.com)するようなので(以下記事参照)、ドメイン変わったら書き換えた方が良いかも。多分リダイレクトかけてくれるとは思いますが、念のため。

参考記事:
note が note.com のドメインを取得。サービスURLの移行も検討。
https://note.mu/info/n/n12bba5e4ee75
(てゆか「note」で.comと.jpドメイン取得ってすごいな……めちゃくちゃ高そう……)

特定のnoteマガジンだけ表示したい場合

上記のやり方だと、すべての投稿が表示されます。
私の場合、noteに投稿したエッセイだけを表示させたかったので、「エッセイまとめ」というマガジンに追加した記事だけを一覧表示させるようにしています。

マガジンのページに行って、右サイドバーにあるRSSフィードマークをクリック→表示されたページのURLをコピー。

そして、ウィジェットのところで入力する「RSSフィードのURL」にそのURLを貼って完了。

アイキャッチ画像も表示させられるかも?(試してない)

テーマファイルとかいじればアイキャッチ画像も引っ張ってこられそうなんですが、やり方がよくわからず。
参考になりそうな記事を見つけたので貼っておきますが、WordPresssのフィードの話だから、コードそのままコピペじゃ実装できないっぽい。

WordPressのフィード・RSSに画像を含めたり、タグ構造をカスタマイズするのに必要な作業まとめ
https://website-homepage.com/wordpress/feed-rss-template-custom-add-thumbnail/

テキストのみの方がすっきりしてていいなと思うので今のところやる予定はないですが、気が向いたら試してみるかもしれません。もし実装できたよ、という方いたらやり方教えてください。