テーマご購入後はメールでの無料サポートがあります。

BASEの商品リンクをWordPressに埋め込む方法

WordPressでは、WooCommerceWelcartなどのECサイト用のプラグインを導入することで、本格的なネットショップを構築できます。

ただ、これらのプラグインの機能をテーマに組み込むためのカスタマイズや、決済システムの契約、設定など、初心者には導入のハードルがやや高いです。

そこで、ネットショップを手軽に開設したいという方には、BASE(ベイス)などのネットショップ作成サービスの利用がおすすめです。

BASE(ベイス)
BASE (ベイス) -無料で簡単なネットショップ作成サービス

BASE(ベイス)でネットショップを作成した上で、WordPressサイト側でプロモーションを展開していくというやり方もできます。

この記事では、BASEの商品リンクをWordPressサイトに埋め込む方法をご紹介します。

BASE(ベイス)とは

BASE
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」に埋め込みコードを貼り付けます。

カスタム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の詳しい解説はここでは省略します。

BASE Developers
BASE Developers

また、WordPressのページにBASEの商品情報を呼び出すことができるプラグインもあるので、動的に商品情報を反映させたい場合などは、このようなツールを使用すると良いでしょう。

BASE商品リスト
WordPressプラグイン BASE商品リスト

プラグインを使用するには、BASE DevelopersでAPIの利用申請が必要となります。


今後、WordPressで本格的なECサイトの構築を検討している場合も、まずは実験的にBASEの物販機能を取り入れてみてるのはいかがでしょうか。

おすすめのWordPressテーマ

ブロックエディタ」に完全対応したSTORK19。

CHECK! OPENCAGEのアフィリエイトプログラムについて /