見出し画像

WORDPRESSにnoteを組み込んだ話

数年ぶりにnoteを再開して、流れでほったらかしのWeb(kkgk.jp)も再開しました。その際にブログ機能はnoteに集約したいなと思ったので色々調べて自分なりのインテグレートができたのでその記録です。

結論は以下です。

  • 解決すべき課題(持たせたい機能)


①<Q>note更新がされたら最新の記事が自動的にWeb(WORDPRESS)でもアップデートされるようにしたい。

これはよくあるWebのTOPページに色々なコンテンツの最新版が表示されるようにしたい、というやつです。

私のWebはこんな感じ。

私の場合、以下の構成です。

  • TOPイラスト+タイトル

  • note

  • イベント出演情報(活動してるけど更新は4年放置)

  • 最近始めた部屋スタグラム

  • プロダクト(イラスト、デザイン)

なるべくシンプルにしたかったんですが、昔ほどミニマル思想に囚われていらず自分が何をしている人かわかる1枚絵に出来たらいいなと思うようになりました。最近はアパレルを作成してるのでそれも余裕があれば追加したい。

そんなわけで私の理想は更新した最新記事がWebのTOPにも反映される形です。なので色々探してみました。参考にさせていただいた皆様の記事などは以下。

めっちゃ参考になる。もっといいねされろ。

最終的に採用させていただいたプラグインを教えてくれた。最高。

そして解決編です。


<A>無料のRSSプラグインを利用。

【FeedWind】を使う
noteのようなブログサービスをWordPressに自動で組み込んでくれる便利なサービス。◆FeedWind https://feed.mikle.com/ja/

https://note.com/location_quest/n/n8b37da9ad58d

これで完璧です。
私のページの「note」の部分のような見え方で自動更新がされます。

これは画像投稿ですが記事も同じです。
タイトルの表示などはFreewindのサイトでいじれます。
高さ、横幅、色々いじれます。
noteの場合はプロフィールのRSSのURLを左上に入力。


後は出力されたコードを貼り付ければOK。引用元記事には14日の試用期間後は有料化と記載されていたのですが、1記事表示であれば(最新記事だけを表示)無料で使用できます。

デフォルトは2Feed以上なので設定ページで減らしましょう。

上記の方法で無事WebのTOPページにnoteの最新記事を表示する、を無料で解決することができました。

なお、私のWebはTOPページに載せる場合、ショートコードにする必要がありましたので、「FeedWindを貼り付けるためのコードをショートコード化する」という工程を解決していますが、それはまたの機会にでも。


さて次です。

②<Q>Webで記事一覧を出すとnoteの一覧が出てくるようにしたい。



これは超簡単。
noteデフォルトで発行できるコードをHTMLに貼り付けるだけ。


<A>Web側のレイアウトとnoteのデフォルト貼り付けURLを使用。


これは自動化できなかったので(RSSのプラグインでできたのですが、いばえが気に入らず)デフォルト機能を使います。

note記事の末尾にある「・・・」からサイトに貼るコードをコピー。


ブログ記事作成のページに貼り付けます。


するとこんな感じに。
デフォルトの機能なのでいいねも反映され、PCだと2列、スマホだと1列のレスポンシブです。


上記の要領でWebとnoteを連携することができました。
貼り付けの方はマニュアルですが、記事を書いたらコードを貼り付けるまでを一連の工程と認識していますので問題ない負荷だと思っています。


読了ありがとうございます。

この記事が気に入ったらサポートをしてみませんか?