ElementorでSimplio3D WordPressプラグインを使用する方法

Simplio3D WordPress プラグインには専用のElementorウィジェットはありませんが、必要もありません。各Simplio3Dブロックはショートコードでもあり、ブロックごとにElementor標準のショートコードウィジェットを1つ使って配置します。ショートコードはブロックとまったく同じ内容を表示するため、Elementorの製品コンフィギュレーターはWordPressブロックエディターで作成したものと同様に動作します。すべてのウィジェットで共有される1つのライブ設定、3Dツールバー、寸法、AR、リアルタイム価格、概要、見積もり依頼、WooCommerceカートに対応します。

このガイドでは、IDの確認、レイアウト作成、カートへの追加、よくあるミスの修正までを最短手順で解説します。プラグインバージョン2.0.3向けに作成されており、Elementorの無料版で利用できます。

始める前に

• WordPress.orgプラグインディレクトリから入手できるSimplio3Dプラグイン（バージョン2.0.3以降）を、Simplio3D v3モードで実行していること。新規インストールではこのモードで開始されます。バージョン1.xから更新したサイトは、Simplio3D → 移行で切り替えるまでレガシーモードのままです。
• Simplio3Dアカウントが接続済みであること：WordPressでSimplio3D → Simplio3Dにログインを開きます。
• 公開済みのプロジェクト：Simplio3Dで共有を開き、共有リンクを有効にしてパスワードは設定しないでください。埋め込みドメインを制限している場合は、サイトのドメインを追加します。
• Elementor。無料版で十分です。
• カートに追加する場合：WooCommerceと、価格が設定されたシンプル商品。

WooCommerceでカートに追加

ブロックエディターでは、「カートに追加」ブロックで商品を選択すると、その商品がプロジェクトにリンクされます。ショートコードではそれができないため、まず商品を手動でリンクしてください。

1. 商品で、通常価格が設定されたシンプル商品を編集します。
2. 商品データ → Simplio3Dを開き、Simplio3Dプロジェクトを対象のプロジェクトに設定し、カート価格をSimplio3D計算価格（サーバー側で検証）または商品のWooCommerce価格に設定します。更新をクリックします。
3. 商品IDを確認します。商品一覧で商品にカーソルを合わせるか、編集画面のアドレスバーにあるpost=123を確認してください。
4. 送信ウィジェットを[simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]に置き換えます。購入者が数量を選べるようにするにはquantity_mode="selector"を追加し、カートへ移動させるにはafter_add="cart"を追加します。

その後、カート、チェックアウト、注文メール、およびWooCommerce → 注文に、設定内容、その画像、検証済み価格が表示されます。

Simplio3D価格がリンクされた商品はコンフィギュレーター経由でのみ購入できるため、商品ページにあるWooCommerceの通常の「カートに追加」ボタンでは、購入者に先に設定を求めます。Elementor無料版では、コンフィギュレーターを専用ページに配置し、たとえば短い説明文に「自分用にカスタマイズ」リンクを追加して商品ページから誘導してください。Elementor Proでは、Elementorの「カートに追加」ウィジェットの代わりにSimplio3Dショートコードウィジェットを使う単一商品テンプレートを作成できます。公開前にこの設定をプレビューしてください。

よく使う設定

設定は、半角の引用符とアンダースコアを使ってショートコード内に追加します。Word、Google Docs、Slackからコピーすると引用符がスマートクォートに変わることがあり、その場合WordPressは設定を認識しません。

• Viewerのheight="620px" mobile_height="400px"は、デスクトップおよび幅781 px以下の画面での高さを設定します。
• ページ上部にあるViewerのloading="eager"は、画面内にスクロールされるのを待たずにすぐ読み込みます。
• Optionsウィジェットのlayout="dropdown"は、選択肢をドロップダウンに切り替えます。オプションの種類に応じて、grid、list、buttonsも使用できます。
• columns="4" thumbnails="small"を使用すると、各行により多くの選択肢を表示できます。
• Priceのprefix="From" tax_display="exclude"は、価格の前にテキストを追加し、税抜価格を表示します。これはWooCommerceカートと一致します。
• Summaryのsummary_mode="compact" hide_defaults="yes"は、各オプションを1行に表示し、デフォルト値のままの項目を省略します。
• Viewerのdisplay="hosted"は、オプションを含む完全なSimplio3Dコンフィギュレーターを1つのウィジェットに表示します。オプションIDは不要です。
• セット内のすべてのウィジェットにinstance="oak"を設定すると、1つのページにある2つのコンフィギュレーターを分離できます。同じインスタンスを持つウィジェットは1つの設定を共有します。

Elementorのデザインに合わせる

• 各ショートコードウィジェットの詳細設定タブで、余白、パディング、背景、枠線、レスポンシブ表示を設定できます。Viewerは列いっぱいに広がるため、幅を広くまたは狭くしたい場合は列またはコンテナの幅を設定してください。
• ブロックはページのフォントと文字色を引き継ぎます。アクセントカラー（選択中の項目、フォーカスリング、ボタン）は、Hello Elementorのようなクラシックテーマではほぼ黒にフォールバックするため、外観 → カスタマイズ → 追加CSSでElementorのアクセントカラーを設定してください：.simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• その他のプロパティには、角丸用の--s3d-radius、サムネイルサイズ用の--s3d-thumb、ボタン用の--s3d-button-bgがあります。特定のウィジェットだけをスタイル設定するには、そのショートコードにclass="my-finish"を追加し、CSSで.my-finishを指定してください。