Notionで管理している記事を、WordPressに自動で表示できたら便利だと思いませんか？今回ご紹介する「Simple Notion Database to Sync」は、Notionのデータベースと連携し、WordPress上に記事一覧を表示できるプラグインです。この記事では、プラグインの基本機能、設定方法、デザインのカスタマイズについてご紹介します。
プラグインの設定方法・ダウンロードはこちら
プラグインの設定方法・ダウンロードは、こちらのページからできます。
WordPress「Simple Notion Database to Sync」プラグイン作成しました（ページ内よりプラグイン無料ダウンロード可）｜eguweb
Notionで管理している記事を、WordPressに自動で表示できたら便利だと思いませんか？今回ご紹介する「Simple Notion Database to Sync」は、Notionのデータベースと連携し、WordPress上に一覧を...
note.com
NotionデータベースとWordPressの連携とは？
このプラグインは、Notion APIを利用して指定したデータベースの内容を取得し、ショートコードを使ってWordPress内に記事一覧を表示する仕組みです。
管理画面からAPIキーとデータベースIDを入力すれば、あとは自動で記事が読み込まれます。
プラグインの特徴
- Notion APIとの簡単連携
- データベースIDは自動でUUIDフォーマットに変換
- ショートコード
[notion_blog]で好きなページに表示可能 - 画像・タイトル・抜粋の自動表示
- レスポンシブ対応の美しいデザイン付き
管理画面での設定手順
プラグインを有効化すると、管理メニューに「Notion Blog」という項目が追加されます。
必要な情報を入力する
- Notion API Key
Notionで作成したインテグレーションのキーを入力します。 - Database ID
表示したいNotionデータベースのIDを入力します。
※データベースIDはハイフンなしでもOK。自動的に整形されて保存されます。
表示用ショートコード
記事一覧を表示したいページにショートコードを挿入するだけでOKです。
[notion_blog]デザインも設定済み
このプラグインには、初期状態からCSSスタイルが含まれています。以下がその特徴です。
主なデザイン要素
- 記事ボックス
白背景＋シャドウで清潔感のあるカード風に - 画像ホバー効果
画像にマウスを乗せると軽くズームするアニメーション付き - 抜粋表示
読みやすい行間と落ち着いた文字色で構成
以下はCSSファイルの抜粋です。
.notion-blog-item {
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notion-blog-item:hover .notion-blog-image img {
transform: scale(1.05);
}💡 カスタマイズしたい場合は、ご自身でCSS を編集して、サイトに合ったスタイルに仕上げることもできます。
今後の展望
このプラグインは現在、Notion内の「タイトル」「抜粋」「画像」プロパティをベースに構成されていますが、今後は以下の機能追加も予定しています。
- 日付・タグ・カテゴリー対応
- 記事詳細ページへのリンク生成
- キャッシュの導入で高速化
プラグインの設定方法・ダウンロードはこちら
プラグインの設定方法・ダウンロードは、こちらのページからできます。
WordPress「Simple Notion Database to Sync」プラグイン作成しました（ページ内よりプラグイン無料ダウンロード可）｜eguweb
Notionで管理している記事を、WordPressに自動で表示できたら便利だと思いませんか？今回ご紹介する「Simple Notion Database to Sync」は、Notionのデータベースと連携し、WordPress上に一覧を...
note.com
