こんにちは、なっちる先生(@nacchi_jagariko)です。
先日、このようなツイートをしました。
国際恋愛について、
今のブログ内で投稿しようと思っていましたが、
noteと連携させて表示することにします〜✍️ブログの記事までにはしなくてはいいけど、気軽に発信するとなるとnote有用ですな!
— なっちる先生@バンコクで先生 (@nacchi_jagariko) 2019年4月8日
今のブログ内で投稿しようと思っていましたが、
noteと連携させて表示することにします〜✍️ブログの記事までにはしなくてはいいけど、気軽に発信するとなるとnote有用ですな!
ということで、、、noteゆる〜く始めました!
noteいいんですよね〜。
ブログよりも気軽にコンテンツを投稿できて、最高です〜。
noteで発信してるなら、せっかくブログと連携させたいところです。
ということで、今回はnoteとブログを連携させる方法を説明していきます〜。
この記事は以下のような人向きです。
ブログとnoteを自動で連携させるためには、どうしたらいいの?
では、参りましょう〜。
完成形
以下のページで一応の完成形が見れます。
こんな感じの一覧ですね。
※デザインは未完成なので、気にしないでくださいm(._.)m
最新の記事を6記事、表示できるようにしています。
加えるコード
加えるコードは2つあります。
まず、function.phpにコード①を書きます。
コード①
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//RSSの読み込み function my_feed_display($feedURL, $num){ if(!$feedURL){return false;} if(!$num){$num = 6;} 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 class="note_list">'; foreach ( $rss_items as $item ){ echo '<li>'; echo '<a href="'.$item->get_permalink().'" ></a>'; $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']; echo '<img src="'.$eyecatch.'" alt="'.$item->get_title().'">'; echo '<p class="title">'.$item->get_title().'</p>'; echo '<p class="date">'.$item->get_date('Y-m-d').'</p>'; echo '</li>'; } echo '</ul>'; } } } |
次に、表示させたい部分にコード②を書くだけで完了です。
1 2 |
<?php my_feed_display('https://note.mu/nacchi_jagariko','6'); ?> |
※「https://note.mu/nacchi_jagariko」の部分を、自分のnoteのrssのURLに変更してください。
以下の丸いマークのところをクリックすればわかります。
※ちなみに、worpressでは、テーマによって少し違いますが、
- index.phpはトップページ
- single.phpは投稿ページ
- page.phpは固定ページ
- sidebar.phpはサイドバー
を表しています。(詳しくはググってください)
※ちなみにですが、なっちる先生のサイトでは、国際恋愛の固定ページだけ違うファイル(page-love.php)を作って、コード①②を一緒に書いています。
好きなようにコードを活用していただければと思います。
参考:https://memo.ark-under.net/memo/3464
軽いコードの説明
noteとブログを連携させると言っても、原理は外部のRSSファイルを読み込んで、表示させることと同じです。
自由に各自カスタマイズできるように、なっちる先生のnoteのrssの例を示しながら、どのコードで何が表示できるか、簡単に説明します。
タイトル
タイトルは「get_title()」から取得できます。(以下参照)
1 |
echo '<p class="title">'.$item->get_title().'</p>'; |
本文内容
本文内容は、「get_description()」や「get_content()」から取得できます。(以下参照)
1 |
echo '<p class="text">'.$item->get_content().'</p>'; |
リンク
リンクは、「get_link()」や「get_permalink()」から取得できます。(以下参照)
1 |
echo '<a href="'.$item->get_permalink().'" ></a>'; |
aタグのクリック範囲をcssで親要素全体に反映させれば便利ですね。
公開日
公開日は、「$item->get_date()」から取得できます。(以下参照)
1 |
echo '<p class="date">'.$item->get_date('Y-m-d').'</p>'; |
get_date()の中身で、公開日のフォーマットが変更できます。
画像
画像の取得は、少し勝手が違います。
noteのapiを使わなければいけないようでした、、。。(以下参照)
1 2 3 4 5 6 7 |
$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']; echo '<img src="'.$eyecatch.'" alt="'.$item->get_title().'">'; |
noteのapiのURLが、「https://note.mu/api/v1/notes/ユーザー名(私の場合nacchi_jagariko)」であることを利用していますね。
apiのURLから得たjsonデータから、トップ画像のURLを拾ってきています。
ここで、
1 |
echo $api_data; |
をうって、jsonデータを見てみたら、いろいろな情報が取れます。
もっとカスタマイズしたいとなれば、そのjsonデータからひろって見ればできますね。
まとめ
以上、noteとブログを連携させる方法の紹介でした〜。
いかがだったでしょう?
意外と簡単に設定できますね!
ここでは、コードしか紹介していないので、デザインのcssは各自好きなものを設定してみてください〜。
noteの良さ、ブログの良さをうまく使って、これからもコンテンツを作り続けていこうと思います〜。
以上で、なっちる先生の授業を終わります。
よいnoteライフを!!!