無料プラグインだけで「1商品×複数バイヤーが個別交渉できる」WordPressマーケットプレイスを作った記録

古着(アパレル古物)の卸取引サイトを、WordPressの無料プラグインだけで構築した際の記録です。同じような構成に挑戦する方の参考になればと思い、つまずいた点も含めてまとめます。

サイト概要

業態: 古着(アパレル)のBtoB卸取引マーケットプレイス

核となる機能: 1つの登録商品に対して、複数のバイヤーがそれぞれ個別にチャットで価格・条件交渉できる仕組み

参加条件: 出品者・購入者ともに古物商許可が必須。一般ユーザーは登録不可(許可証の提出・管理者承認制)

デザイン方針: ZOZOTOWNのような白背景・余白を活かしたシンプルなグリッドデザイン

開発方針: 有料プラグイン・有料テーマは使わず、無料プラグインのみで構築

採用した構成

役割プラグイン/テーマ備考テーマAstra(無料)軽量でDokanとの相性が良い。Starter Templatesと併用EC基盤WooCommerce商品登録・カート機能の土台マルチベンダー化Dokan Lite出品者ごとのストア・ダッシュボードを提供チャット土台BuddyPressプライベートメッセージのコア機能交渉チャット本体Better Messages(無料版)BuddyPressを拡張。WooCommerce/Dokan連携で商品ページに自動でチャットボタンを設置見積もり機能(任意)YITH WooCommerce Request a Quote自由文チャットと別に正式見積もりを扱いたい場合会員登録+許可証審査Forminatorファイルアップロード項目+ユーザー登録+管理者承認が無料版で揃っている

検討したが採用しなかったもの

Webkul「Marketplace Buyer Seller Chat」: 正規版は$149+本体プラグイン+Node.jsサーバー運用が必要で有料。海賊版(nulled)サイトでの無料配布も見つかったが、バックドア混入等のセキュリティリスクが高く不採用。

「User Registration」プラグイン: ユーザー登録+承認フローは無料だが、肝心のファイルアップロード項目がPro限定だったため、免許証提出用途には使えず断念。最終的にForminatorに切り替え。

構築手順(概要)

Astraテーマを導入し、Starter Templatesでストア系デモをインポート

このとき自動提案される「Free Live Chat」等の追加機能は、今回のチャット構成と役割が重複するためオフにする

WooCommerceをインストールし、店舗情報・通貨・決済方法を設定

Dokan Liteを導入し、セットアップウィザードでベンダーダッシュボード等のページを自動生成

「販売オプション」でベンダー登録を手動承認制に変更

BuddyPressを導入し、コンポーネントで「メッセージ」を有効化

Better Messagesを導入し、「連携(Integrations)」→WooCommerceタブ内にある「Dokan Marketplace連携」から「ベンダーライブチャット」を有効化

Dokan連携は独立したタブではなく、WooCommerceタブの中に自動で表示される点に注意(後述)

各ベンダーもDokanダッシュボードの「ショップ設定」で個別にライブチャットを有効にする必要がある

Forminatorで会員登録フォームを作成し、古物商許可証のアップロード項目+管理者承認フローを設定

つまずいたポイント一覧

1. セットアップウィザードのReactエラー

Astra/Dokanのセットアップウィザード進行中に Failed to execute 'insertBefore' on 'Node' というエラーが発生。ブラウザ拡張機能(広告ブロッカー・翻訳ツールなど)がDOM操作に干渉するのが典型的な原因。シークレットウィンドウでの再現有無を確認するのが定石。

2. Better MessagesにDokanタブが出ない

「その他のプラグイン」タブなど別の場所を探し回ったが見つからず。正解は**「WooCommerce」タブの中に「Dokan Marketplace連携」という項目として自動表示される**という仕様だった。公式ドキュメント(better-messages.com)で確認して解決。

3. ベンダーダッシュボードの「ライブチャット」タブが真っ白

最も長く苦戦した問題。切り分けの流れは以下の通り。

Consoleに出ていた aos.min.js のエラー → Astraウィザードが自動導入したSpectra Blocksのアニメーション機能が原因と判明、無効化して解消

それでも空白 → DevToolsの「デバイスツールバー(レスポンシブモード)」が誤ってオンになっており、モバイル判定されていたことが判明。オフにしても症状変わらず

シークレットウィンドウでも再現 → ブラウザ拡張機能が原因ではないと判明

Network/Consoleともにエラーなし、通信もすべて200 OK → JS実行自体は正常

実際のDOM(Inspect)を確認すると、Reactアプリの外枠(サイドバー・ヘッダー)は描画されているのに、本文コンテンツ部分だけ丸ごと存在しないことが判明 → アプリ内部のルーティングが機能していないことが濃厚に

最終的な原因はパーマリンク設定が「基本」(?p=123形式)のままだったこと。Dokanの新ベンダーダッシュボードは/dashboard/products/のようなクリーンURLでの内部ルーティングを前提にしており、「基本」設定ではルートが一致せず本文だけ描画されない、という挙動だった

パーマリンク設定を「投稿名」に変更したことで解決

教訓: Reactベースの管理画面アプリ(新しいDokanダッシュボードなど)が「エラーは出ないのに一部だけ描画されない」場合、CSS崩れやプラグイン競合だけでなく、パーマリンク設定のようなWordPress基本設定も疑うべき。

4. 商品名が日本語の場合のURL問題

パーマリンクを「投稿名」にすると、日本語タイトルはURLが長いパーセントエンコード文字列になる(ブラウザ上は普通に日本語表示されるが、SNS等にURLをそのまま貼ると見た目が崩れる)。SNS共有を意識する商品ページは、公開時に手動でスラッグを英数字に直すのが現実的な対処。

5. 「無料プラグインの承認機能」に潜む罠

古物商許可証の提出+管理者承認フローを実現しようとした際、User Registrationプラグインは承認機能自体は無料だが、ファイルアップロード項目がPro限定という制約に気づかず選定してしまった。フィールドを選ぶ画面で初めて有料アイコンに気づき、Forminator(無料版でファイルアップロード・ユーザー登録・管理者承認の3点セットが揃っている)に切り替えた。

教訓: 「無料プラグイン」と謳われていても、必要な項目タイプ(特にファイルアップロード)単位でPro限定になっているケースが多い。機能名だけでなく、使いたい項目タイプが無料範囲かを個別に確認する必要がある。

まとめ・注意点

海賊版(nulled)プラグイン配布サイトは、機能要件を満たしていてもセキュリティ・法的リスクの観点から使わない方が良い

Reactベースの管理画面/ダッシュボードで原因不明の描画崩れが起きたら、JS個別のエラーだけでなくパーマリンク設定も確認する価値がある

「無料プラグインで実現可能」と判断する際は、機能単位ではなくフィールドタイプ/項目単位で無料範囲を確認する

業界特有の法規制(今回は古物営業法)がある場合、承認フローに書類アップロードを組み込めるプラグイン選定が重要になる

追記

Dokan Marketplace、Better Messagesをインストールする際はサーバー側のWAF機能を停止する事をお薦めします。501エラーが頻発します。