WordPressにNoteの記事を表示する方法

/ blog /

クリエイター向けのプラットフォームとして人気を集めている「note」。
多くの著名人も書いていることもあり、今では一般的なブログツールの１つになっているかと思います。
そんな中、Noteで書いた記事をWordPressで作ったHPにも表示したいという声がありましたので、下記に方法をご説明します。

この記事はこんな人向け

  • WordPressにNoteで書いた特定の記事を表示させたい。
  • WordPressにNoteの記事を自動で追加していきたい。

RSSやサイトに貼り付ける機能を用いてサイトに表示していくことになります。それぞれ順番にご説明します！

WordPressにNoteで書いた特定の記事を表示する方法

こちらはとても簡単です。表示の手順としては、

手順の説明

  1. WordPressに載せたい記事のiframeを取得する
  2. 取得したコードを表示したいページに貼り付ける

詳しく説明をしていきます。

WordPressに載せたい記事のiframeを取得する

記事の下部にある「…」をクリックし、「サイトに貼る」を選択。（イメージ内赤枠）

取得したコードを表示したいページに貼り付ける

「サイトに貼る」を選択すると記事のiframeが表示されるのでコピーしてください。レイアウトなどはstyleの数値を変更することでも調整が可能です。

3. WordPress内の表示したいページにコードを貼り付けます。ブロックエディターを使っている方は「カスタムHTML」にコードを貼り付けるだけでページに記事が表示されます。

WordPressにNoteで書いた記事を自動で表示する方法

こちらはRSSを利用して、最新の記事をすべて自分のサイトのお知らせ欄に表示するものです。
色々とやり方があるようですが、ここではWordPressを構成しているファイルの１つである「functions.php」というファイルにコードを追加して行う方法でやってみたいと思います。

functions.phpはサイトを構築する重要なファイルです。
間違えるとサイトが表示されなくなってしまうので、phpの編集に慣れていない方はご注意ください。

と、いっても決まっているコードを貼り付けるだけなのであまり難しくはないと思います。それでは説明いたします。

Noteで書いた記事を取得する方法

RSSのURLについては、トップページの赤枠部分より取得できます。

RSSのURL（https://note.com/自分のアカウント名/rss）をコピーします。

functions.phpの編集

WordPress管理画面を開き、外観　⇨　テーマファイルエディター　⇨　functions.phpを開きます。
functions.phpを開いたら、下記のコードを貼り付けてください。（FTP経由でももちろんOKです）

/* RSSフィード */
function rss_func( $atts ) {
include_once( ABSPATH . WPINC . '/feed.php' );

$blog_rss = shortcode_atts( array(
'url' => 'url',
'num' => '数値',
'img' => 'タイトル画像がないときに表示させたい画像のURL'),
$atts );

$feed_url = $blog_rss['url'];
$feed_num = $blog_rss['num'];
$img_url = $blog_rss['img'];
$feed_content = '';
$feed_contents = '';

$rss = fetch_feed( $feed_url );
if ( !is_wp_error( $rss ) ) :
$maxitems = $rss->get_item_quantity( $feed_num );
$rss_items = $rss->get_items( 0, $maxitems );

   foreach ( $rss_items as $item ) :
       $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'];

       $feed_url = $item->get_permalink();
       $feed_title = $item->get_title();
       $feed_date = $item->get_date('Y.m.d');
       $feed_text = mb_substr(strip_tags($item->get_content()), 0, 160);

       $feed_content .= '<a rel="noopener" href="' . $feed_url . '" title="' . $feed_title . '" class="blogcard-wrap" target="_blank">';
       $feed_content .= '<div class="blogcard">';
       $feed_content .= '<figure class="blogcard-thumbnail">';
       $feed_content .= '<img src="' . $eyecatch . '" class="blogcard-thumb-image" alt="">';
       $feed_content .= '</figure>';
       $feed_content .= '<div class="blogcard-content">';
       $feed_content .= '<div class="blogcard-title">' . $feed_title . '</div>';
       $feed_content .= '<div class="blogcard-abbreviation">' . $feed_text . '…</div>';
       $feed_content .= '</div>';
       $feed_content .= '<div class="blogcard-post-date">' . $feed_date . '</div>';
       $feed_content .= '</div>';
       $feed_content .= '</a>';
   endforeach;

else:
$feed_content = '

RSSフィードを取得できません';
endif;

$feed_contents = '

' . $feed_content . '';

return "{$feed_contents}";

}
add_shortcode( 'rss', 'rss_func' );

小テーマのfunctions.phpではなく親テーマのfunctions.phpに追記してください。

コードを貼り付けたら下記の部分を修正します。

‘url’ => ‘url’,　⇨ 先ほど取得したurlを貼り付け（’https://note.com/自分のアカウント名/rss’）
‘num’ => ‘数値’, ⇨ 表示する件数の設定（３であれば最新の記事が３件表示される）
‘img’ => ‘タイトル画像がないときに表示させたい画像のURL’),
$atts );

フィードを表示したい部分にショートコードを追加してください。

貼り付けるショートコード

[rss url=”https://note.com/自分のアカウント名/rss”]

以上です！
ショートコードを追加すると、表示はできるのですが縦並びになってしまうと思うので、横に並べて３つとか表示したい場合はCSSを書いて調整します。そのコードについてもそのうち公開できればと思います！

繰り返しにはなりますが、functions.phpの編集は間違えると大変なのでくれぐれもお気をつけください。
※上記方法はすべて自己責任でお願いいたします(´・ω・｀)

最後までお読みいただきありがとうございました！

上部へスクロール