こんにちは。プログラマーNです。
ご自身のWordPress(ワードプレス)で作成したホームページ、WEBサイトから、ネットショップ(STORES)を開設したい場合、どのように連携しますか?
![](https://www.babystep36.com/wp-content/uploads/2021/04/f_f_object_115_s512_f_object_115_0bg-1-300x300.png)
そもそも、自サイトとネットショップは連携できるかな?
![](https://www.babystep36.com/wp-content/uploads/2021/04/f_f_object_116_s512_f_object_116_2bg-1-300x300.png)
手っ取り早く、連携したい!
確かに時間や費用をかけずに、素速く連携したいですよね。
ご自身のホームページ、WEBサイトをネットショップ(STORES)に連携することで、簡単に解決します。
今回はその連携方法についてお伝えしていきます。
ぜひ、最後までご覧ください。
![](https://www11.a8.net/0.gif?a8mat=3H9WKU+5YC2K2+434O+61RI9)
PR
※動画は下部にあります※
STORESとは?
「STORES」って何?という人もいるかもしれませんので、簡単にご説明します。
「STORES」とは、ネットショップ「BASE」と同じように、WEB上で、専門的スキル、知識がなくても、誰でも簡単にネットショップを開設できるサービスです。
毎月1万ショップが開設されています。
月額料金が無料のフリープランもあり、「BASE」よりも決済手数料が安いです。
STORESで登録、出品してみる
詳しくは「STORES」公式サイトをご覧になり、登録後、出品してみてください。
↓下記、リンク先で「STORES」のサイトへ移動します。↓
PR
WordPressでSTORESとの連携
ホームページにプラグインを使用せずに、STORESを連携する方法としては、
- 自サイトで商品を紹介しているページに「STORES」のストアボタンを設置する
- 商品一覧(トップページ)を連携する
があります。
商品を紹介しているページにSTORESのストアボタンを設置する
自サイトで商品を紹介しているページにストアボタン(カートボタン)を表示してみます。
[STORES]
STORESのストア設定から「ボタンを設置」の「設置する」ボタンを押します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/004-3-800x299.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/04/005-2-800x261.jpg)
ボタンの設定を行います。
設定後、「貼り付けコードを生成する」ボタンを押します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/002-4-800x503.jpg)
「コピーする」ボタンを押します。
このコピーした内容をWordPressの該当箇所へ貼り付けます。
![](https://www.babystep36.com/wp-content/uploads/2021/04/003-2.jpg)
[WordPress]
「カスタムHTML」を選択します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/006-1.jpg)
![](https://www.babystep36.com/wp-content/uploads/2021/04/007-2-800x352.jpg)
入力欄にSTORESのコピーした「貼り付けコード」を貼り付けます。
![](https://www.babystep36.com/wp-content/uploads/2021/04/008-2-800x458.jpg)
プレビューで確認します。
ストアボタンが表示されました。
ボタンの位置を左に寄せます。
![](https://www.babystep36.com/wp-content/uploads/2021/04/009-2-800x425.jpg)
「カスタムHTML」をグループ化 → ツールバーで「幅広」にします。
![](https://www.babystep36.com/wp-content/uploads/2021/04/010-2-800x196.jpg)
プレビューで確認すると、ストアボタンが左に寄りました。
![](https://www.babystep36.com/wp-content/uploads/2021/04/011-3-800x388.jpg)
ストアボタン(「今すぐ購入する」ボタン)を押すと、購入の手続きに入ります。
![](https://www.babystep36.com/wp-content/uploads/2021/04/012-2-800x430.jpg)
商品一覧(トップページ)を連携する
自サイトからのメニューでSTORESの商品一覧を表示してみます。
[STORES]
STORESの商品一覧(トップページ)を表示します。
(商品は、はちみつの1商品のみ掲載しています)
商品一覧(トップページ)のURLをコピーします。
![](https://www.babystep36.com/wp-content/uploads/2021/04/013-2-800x354.jpg)
[WordPress]
「外観」→「メニュー」の「メニューを編集」
![](https://www.babystep36.com/wp-content/uploads/2021/04/014-5-800x431.jpg)
「メニュー項目を追加」の「カスタムリンク」で設定します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/015-3.jpg)
- URL … STORESの商品一覧(トップページ)のURLを貼り付け
- リンク文字列 … メニューに表示される名称
「メニューに追加」を押します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/017-2.jpg)
メニューに「オンラインショップ」が追加されました。
「メニューを保存」ボタンを忘れずに押します。
![](https://www.babystep36.com/wp-content/uploads/2021/04/016-2-800x467.jpg)
プレビューで確認すると、メニューに「オンラインショップ」と表示されています。
押してみます。
![](https://www.babystep36.com/wp-content/uploads/2021/04/018-2-800x221.jpg)
「STORES」の商品一覧(トップページ)が表示されました。
![](https://www.babystep36.com/wp-content/uploads/2021/04/019-2-800x360.jpg)
![](https://www11.a8.net/0.gif?a8mat=3H9WKU+5YC2K2+434O+61RI9)
PR
コメント