- WordPressだけではなく、note.comでも
- WordPressでnoteの記事一覧を貼り付けたい
- note.comへリンクはRSSで設置できるのはわかってるけど、テキストだけなので見栄えがよくないと思っている
こんにちは。私はこのサイトの他に、note.comにて記事を投稿しています。
私は常々、こう思っていました。
WordPressで綺麗にnoteの記事を表示できる方法はないかな…?
WordPressのデフォルトの機能でも、RSS機能を使って記事一覧を表示できる機能はあります。しかし、テキストのみになるため、味気ないものとなります。
今回は、note.comのデザインのように、noteの記事一覧をWordPressに表示させるWordPressプラグイン「note.com RSS Display Block」を作りました！！！
作ったプラグインはこちら！！！
早速ですが、私の作ったプラグインでは、下記のように表示されます！！！
※設定により、note.comのサイトのように全幅（ブラウザの横幅いっぱい）で表示させることも可能です。
※なるべくnote.comのデザインを忠実に再現しようとCSSの調整をしていますが、スライダーで利用しているSwiper.jsの仕様や、なるべく色々なテーマでCSS崩れが起きないような調整が必要なため、あえて異なる仕様にしている箇所がございます。ご了承ください。
ダウンロード方法
BOOTHからダウンロードしてください。
このプラグインでできること
- note.comの記事一覧をWordPressに埋め込み表示できる
- note.comのデザインに近い見た目で記事を表示できる
- ショートコード形式とブロック形式の2種類から選んで設置できる
- スライダー表示（Swiper.js）とリスト表示を切り替えられる
- 表示件数を自由に指定できる
- 横幅を「全幅（ブラウザいっぱい）」または「コンテンツ内」に切り替えられる
- 商用利用も可能
このプラグインでできないこと
- ブロックエディターの管理画面上で、ユーザー閲覧画面を完全な形で再現すること
- すべてのテーマとの完全な互換性保証
- 不具合修正や個別のカスタマイズ対応
- note.com側の仕様変更に伴う即時対応の保証
プラグインのインストール方法
「note.com RSS Display Block」プラグインは下記からインストールできます。
- 管理画面左メニュー「プラグイン」>「プラグインを追加」
- こちらのタイトル横の「プラグインのアップロード」を押す
- 「ファイルを選択」からBOOTHでダウンロードしたファイルを選択
- 「いますぐインストール」を押してください。
使い方
「note.com RSS Display Block」プラグインは、ショートコード形式とブロックエディター形式の2つの形式で設置ができます。
ショートコード形式
以下のショートコードを、表示したい位置に貼り付けてください。
[note_rss feed_url="https://note.com/ayaoriko" items="3" fullwidth="off" slide="on"]
オプション
feed_url：noteユーザーのURL
※ URLの末尾に/rssは不要です。プラグイン側で自動補完しますslide：スライダー機能を有効にするかどうか。"on"を指定すると、記事がスライダー形式で表示されます。"off"を指定すると、サムネイル付きの固定リスト表示になります。items：表示件数
多すぎるとサイトが重くなるので、10件程度がおすすめ。fullwidth：横幅をコンテンツ内に収めるかどうか"on"を指定すると、全幅（ブラウザの横幅いっぱい）で表示される仕様になります。"off"を指定すると、コンテンツ内に収まる仕様になります。
note.com の表示仕様について
note.com ではブロックの横幅が全幅（ブラウザの横幅いっぱい） に設定されています。
ただし通常のサイト利用では扱いづらいため、本プラグインではデフォルトで全幅指定をオフにしています。
ブロック形式
プラグインをインストールすると「メディア」の項目のところに「note.com RSS Display Block」が追加されるので、クリックすることでnoteの記事一覧が表示されます。
下記はスライダー機能を無効にした時のレイアウトです。
オプション
- URL
表示させたいnoteのURLを指定してください。 - 表示件数
多すぎるとサイトが重くなるので、10件程度がおすすめ。 - スライダー機能
有効にすると、記事がスライダー形式で表示されます。
無効にすると、サムネイル付きの固定リスト表示になります。
※JSの不具合を防ぐため、管理画面上ではスライダーを無効の状態で表示しています。
ブロックエディターで横幅の指定ができるため、設定画面上ではショートコード形式では全幅（ブラウザの横幅いっぱい、fullwidth）で表示されるかどうかの設定項目は設けておりません。
もし、全幅で表示させたいがエディター上で表示されていない場合、下記記述をテーマ側のfunctions.phpに追記することで、横幅の設定ができるようになります。
add_theme_support( 'align-wide' );FAQ
Q. 動作環境を教えてください。
A. 本プラグイン Ver1.3.3 は PHP 7.3 以上の環境で動作するように指定しています（詳細は note-rss-display-plugin.php に記載）。
また、WordPressの本体はVer.6.8.3で動作確認済みです。
Q. テーマを適用したら、デザインが崩れてしまいました。
A. Swiper.js を利用しているため、テーマや他プラグインの CSS と干渉してレイアウトが崩れる場合があります。
当方では WordPress 標準テーマ（Twenty シリーズ）および JIN（無印）で確認済みですが、すべての環境での表示を保証するものではありません。必要に応じて CSS を調整ください。
Q. 商用利用可能ですか？
A. 商用利用可です。テーマ側で別途CSSを追記して、好きなデザインに変更していただくことも可能です。
アンケート＆ご支援のお願い
このプラグインは自由にダウンロードしてご利用いただけますが、実際に使っていただいたユーザーの皆さんの声は、私の活動の貴重なヒントになります。
もしプラグインをご利用いただけたなら、今後の開発・活動に役立てるため、ぜひアンケートにご協力いただけると嬉しいです！
また、「活動を応援したい！」と感じていただけたなら、ほしい物リストからご支援いただけると大変励みになります。開発を続けるモチベーションアップにつながりますので、ご検討いただけると幸いです。
