WordPressでは、WooCommerceやWelcartなどのECサイト用のプラグインを導入することで、本格的なネットショップを構築できます。
ただ、これらのプラグインの機能をテーマに組み込むためのカスタマイズや、決済システムの契約、設定など、初心者には導入のハードルがやや高いです。
そこで、ネットショップを手軽に開設したいという方には、BASE(ベイス)などのネットショップ作成サービスの利用がおすすめです。
BASE(ベイス)でネットショップを作成した上で、WordPressサイト側でプロモーションを展開していくというやり方もできます。
この記事では、BASEの商品リンクをWordPressサイトに埋め込む方法をご紹介します。
BASE(ベイス)とは
BASE(ベイス)は、無料でネットショップを開設できるサービスです。
2024年現在、国内最大手のネットショップ開設サービスであり、初期費用や月額料金は無料、クレジットカード決済、コンビニ決済などの各種決済機能も利用可能です。
ただし、購入が成立した際の決済手数料やサービス利用料がかかります。
手数料や利用料が発生するのは、売上ができてからになるので、まずは気軽にネットショップを開いてみたいという方にもおすすめです。
なお、BASEでのアカウント取得や商品登録などについては、公式動画などで確認してもらうと解り易いかと思います。
BASEの商品リンクをWordPressサイトに埋め込む
それでは、BASEで登録した商品(アイテム)のリンクを、WordPressの投稿記事や固定ページに埋め込む方法について解説していきます。
商品の埋め込みコードを作成する
下記のコード(iframeタグ)を使用して、BASEの商品を埋め込みます。
埋め込みサイズ 160×220px
<iframe frameborder="0" width="160" height="220" src="【商品ページのURL】/widget/small"></iframe>
埋め込みサイズ 220×380px
<iframe frameborder="0" width="220" height="380" src="【商品ページのURL】/widget"></iframe>
埋め込みサイズ 320×480px
<iframe frameborder="0" width="320" height="480" src="【商品ページのURL】/widget/large"></iframe>
【商品ページのURL】の部分を、BASE商品ページのURLに置き換えます。/widget
以降は必要なので削除しないでください。(例)https://xxxxx.base.shop/items/12345678
WordPressのエディタに貼り付ける
ブロックエディタの場合は「カスタムHTML」に埋め込みコードを貼り付けます。
プレビューで確認
ページをプレビューすると、埋め込まれた商品リンクが表示されます。
以下のような商品リンクが表示されます
Sサイズ(160×220px)
埋め込みコードサンプル
<iframe frameborder="0" width="160" height="220" src="https://htdesign.base.shop/items/86295519/widget/small"></iframe>
通常サイズ(220×380px)
埋め込みコードサンプル
<iframe frameborder="0" width="220" height="380" src="https://htdesign.base.shop/items/86295519/widget"></iframe>
Lサイズ(320×480px)
埋め込みコードサンプル
<iframe frameborder="0" width="320" height="480" src="https://htdesign.base.shop/items/86295519/widget/large"></iframe>
商品リンクをクリックすると、BASEショップの商品ページが開きます。
ちなみに、埋め込まれた商品が存在しない(非公開にしている等)場合は、下記のように「商品がみつかりません」と表示されるようになります。
【上級編】APIとプラグインでの連携も可能
BASEで提供されている開発者向けのAPIを利用すれば、サイトとの連携も可能になります。
※APIの詳しい解説はここでは省略します。
また、WordPressのページにBASEの商品情報を呼び出すことができるプラグインもあるので、動的に商品情報を反映させたい場合などは、このようなツールを使用すると良いでしょう。
プラグインを使用するには、BASE DevelopersでAPIの利用申請が必要となります。
今後、WordPressで本格的なECサイトの構築を検討している場合も、まずは実験的にBASEの物販機能を取り入れてみてるのはいかがでしょうか。