noteとブログを自動で連携させる方法!【PHP】

備忘録

こんにちは、なっちる先生(@nacchi_jagariko)です。

先日、このようなツイートをしました。

国際恋愛について、
今のブログ内で投稿しようと思っていましたが、
noteと連携させて表示することにします〜✍️ブログの記事までにはしなくてはいいけど、気軽に発信するとなるとnote有用ですな!

ということで、、、noteゆる〜く始めました!

なっちとインドネシア人|note
フリーランスエンジニアのなっちる先生です👩‍💻 noteでは、主に国際恋愛について、記事にするほどじゃないけど、コンテンツにしたいことを気軽に発信していきます〜🥰 ブログもやってます〜👉

noteいいんですよね〜。

ブログよりも気軽にコンテンツを投稿できて、最高です〜。

noteで発信してるなら、せっかくブログと連携させたいところです。

ということで、今回はnoteとブログを連携させる方法を説明していきます〜。

この記事は以下のような人向きです。

ブログとnoteを自動で連携させるためには、どうしたらいいの?

では、参りましょう〜。

スポンサーリンク

 完成形

以下のページで一応の完成形が見れます。

なっちとインドネシア人
デザイン未完成です。。。 地球が回ってるだけでもおもしろいよ!

こんな感じの一覧ですね。

※デザインは未完成なので、気にしないでくださいm(._.)m

最新の記事を6記事、表示できるようにしています。

 加えるコード

加えるコードは2つあります。

まず、function.phpにコード①を書きます。

コード①

次に、表示させたい部分にコード②を書くだけで完了です。

※「https://note.mu/nacchi_aischan」の部分を、自分の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()」から取得できます。(以下参照)

本文内容

本文内容は、「get_description()」や「get_content()」から取得できます。(以下参照)

リンク

リンクは、「get_link()」や「get_permalink()」から取得できます。(以下参照)

aタグのクリック範囲をcssで親要素全体に反映させれば便利ですね。

公開日

公開日は、「$item->get_date()」から取得できます。(以下参照)

get_date()の中身で、公開日のフォーマットが変更できます。

画像

画像の取得は、少し勝手が違います。

noteのapiを使わなければいけないようでした、、。。(以下参照)

noteのapiのURLが、「https://note.mu/api/v1/notes/ユーザー名(私の場合nacchi_aischan)」であることを利用していますね。

apiのURLから得たjsonデータから、トップ画像のURLを拾ってきています。

ここで、

をうって、jsonデータを見てみたら、いろいろな情報が取れます。

もっとカスタマイズしたいとなれば、そのjsonデータからひろって見ればできますね。

 まとめ

以上、noteとブログを連携させる方法の紹介でした〜。

いかがだったでしょう?

意外と簡単に設定できますね!

ここでは、コードしか紹介していないので、デザインのcssは各自好きなものを設定してみてください〜。

noteの良さ、ブログの良さをうまく使って、これからもコンテンツを作り続けていこうと思います〜。

以上で、なっちる先生の授業を終わります。

よいnoteライフを!!!

タイトルとURLをコピーしました