WaffleDB 1 / 12
WordPress プラグイン紹介・実画面つき詳細版

WaffleDB

コードを書かずに、サイトに"使えるデータベース"を。

このあとの画面キャプチャは、実際にWaffleDBで作成した「くだもの図鑑」と「寿司店紹介」の2つのテーブルです。 管理画面とサイト表示を見ながら、テーブル作成から公開までの流れを紹介します。

全体の流れ

3ステップでサイトに公開できます

このあと、それぞれのステップを実際の管理画面キャプチャで見ていきます。

STEP 1

テーブルを設計する

テーブルと、必要な項目(カラム)を管理画面で決めます。

STEP 2

データを登録する

フォームからデータを入力。一覧・詳細ページは自動で作られます。

STEP 3

サイトに公開する

ショートコードを貼るだけで、来訪者に表示されます。

STEP 1 — テーブル設計 画面: カラム一覧

テーブルの構造を作る

「fruits(くだもの)」というテーブルに、名前・産地・画像URLといったカラム(列)を追加しています。 列の追加・並び替え・編集はすべてこの画面から行えます。

WordPress管理画面 ▸ WaffleDB ▸ カラム一覧
WaffleDB管理画面のカラム一覧。fruitsテーブルにname、area、image_url、aaaの4つのカラムが定義されている
Point

列名・表示名・データ型・桁数を自由に設定でき、あとから追加や並び替えもできます。

STEP 1 — テーブル設計 画面: カラム追加

項目タイプは20種類以上

カラムを追加する際、テキスト・数値・日付・画像URL・Markdown・リレーション・プルダウンなど、 データの性質に合わせて入力形式を選べます。

WordPress管理画面 ▸ WaffleDB ▸ カラム追加
カラム追加画面のコンポーネント選択プルダウン。整数、テキスト、Markdown、リレーション、URL、画像URL、日時など多数の項目タイプが並んでいる
Point

画像・URL・メールアドレスなどは、入力チェックや表示形式もタイプごとに最適化されます。

STEP 2 — データ登録 画面: データ一覧

登録したデータは一覧で管理

登録したデータは表形式で一覧表示されます。画像URLのカラムは自動でサムネイル表示され、検索・並び替えもその場で行えます。

WordPress管理画面 ▸ WaffleDB ▸ データ一覧
WaffleDBデータ一覧画面。fruitsテーブルにスイカ、桃、ブドウなどの果物データが画像サムネイル付きで表示されている
Point

1,000件を超える大きな表でも自動でAJAX表示に切り替わり、検索・並び替えが快適に動作します。

STEP 2 — データ登録 画面: 詳細表示

詳細ページも自動で作られる

一覧の「詳細」リンクから、1件分の情報だけを見やすくまとめた詳細ページが自動で表示されます。

WordPress管理画面 ▸ WaffleDB ▸ 詳細表示
WaffleDBの詳細表示画面。スイカのデータについて名前、産地、画像URLの項目が1件分だけ表示されている
Point

サイト側でも [waffledb_item table_id="1" item_id="5"] で同じ詳細表示を公開できます。

STEP 3 — サイトに公開 画面: フロントエンド表示

貼るだけ、挿入するだけで公開

固定ページや投稿にショートコードを貼る、またはブロックを挿入するだけで、 ログイン不要の一般公開ページとしてテーブルの内容がそのまま表示されます。

サイト表示(フロントエンド) ▸ 寿司店紹介ページ
フロントエンドのショートコード表示例。寿司というタイトルのページに東京の名店26を紹介する説明文と、店名・紹介画像・紹介文の一覧表が表示されている
Shortcode

固定ページ・投稿に [waffledb table_id="5"] を貼り付け。

Block

ブロックエディタで「WaffleDB」と検索し、「WaffleDB Table」ブロックを挿入してテーブルを選ぶだけ。

Point

サイトのテーマ(デザイン)にそのまま馴染む見た目で表示され、来訪者は管理画面を意識せず閲覧できます。

応用例 画面: カラム一覧(別テーブル)

テーブルはいくつでも、自由な構成で

同じ仕組みで、まったく違うテーブルも作れます。この「sushi(寿司店)」テーブルは 店名・紹介画像・紹介文の3列だけで構成されています。

WordPress管理画面 ▸ WaffleDB ▸ カラム一覧
sushiテーブルのカラム一覧画面。tenmei(店名)、imgup(紹介画像)、description(紹介文)の3つのカラムが定義されている
Point

くだもの図鑑からお店紹介まで、目的に合わせてテーブル構造をゼロから自由に設計できます。

活用シーン

こんな場面で活躍します

商品・作品カタログ(例:くだもの図鑑)
店舗・グルメガイド(例:寿司店紹介)
会員名簿
施設予約状況
FAQ・お知らせ一覧
写真・資料ギャラリー
入手方法

WordPress公式プラグインディレクトリに公開中

WaffleDBは WordPress.org 公式プラグインディレクトリに正式登録されているプラグインです。 管理画面の「プラグインを追加」からキーワード検索するだけで、誰でも無料でインストールできます。

まとめ

WordPressだけで完結する、ノーコードのデータベース

STEP 1テーブルを設計する
STEP 2データを登録する
STEP 3ショートコードで公開する

専門知識がなくても、管理画面だけでオリジナルのデータベース機能をサイトに追加できます。

まずは1つ、表を作ってみましょう。
作者紹介

時田正彦 Tokita Masahiko

WaffleDBの開発者です。WordPressサイトの構築・カスタマイズなど、お仕事のご相談がありましたらお気軽にご連絡ください。

取得認定資格

AWS Certified Solutions Architect AWS Certified Cloud Practitioner OSS-DB Silver