みなさん、こんにちは。
MEGIDO(メギド)です。

新型コロナウイルスの影響によって
ECサイト市場の需要が大きく伸びていますね。
それに伴いECサイト作成の依頼が多くなっているのではないでしょうか。

CEHATでもECサイト作成の案件が増えてきています。
その中で自分が手掛けた案件でWordPress内に
shopifyを連携させる案件がありました。

WordPressとshoifyをプラグインで連携させるのは
プラグイン「WP Shopify」を使用。

ただ、「WP Shopify」が英語のプラグインで
ほとんど情報がなかったです。

そこで今回は「WP Shopify」で
Wordpressとshoifyを連携させる方法をお伝えします。

 

 

①「WP Shopify」とは?

「WP Shopify」Shopifyで登録した商品の
商品一覧ページ、商品詳細ページを簡単にWordpress内に
作成してくれるプラグインです。

もちろん商品詳細ページに生成される
購入ボタンから商品購入が可能となります。

shopifyの機能を使用してWordpressで
ECサイトを構築するのに便利なプラグインとなっています。

基本的に無料プラグインですが、
更に便利なショートコードやテンプレートを
使用できるPro版もあるようです。

「WP Shopify Pro」

 

 

②WordpressとShopifyの連携方法

WP ShopifyでWordpressとShopifyを連携する方法をお伝えします。
Shopifyで設定してからWP Shopifyの設定を行うことで連携が可能になります。

ここでも説明を行いますが、
詳しい情報は公式ドキュメントを確認してみてください。
公式ドキュメントは英語なのでGoogle翻訳等を使用するのがオススメです。

公式ドキュメント

 

ステップ1:Shopify管理画面サイドメニューのアプリ管理をクリック

 

ステップ2:プライベートアプリの管理リンクをクリック

 

ステップ3:「新しいプライベートアプリを作成する」をクリック

 

ステップ4:「プライベートアプリ名」と「メールアドレス」を入力
プライベートアプリ名は何でもOKなのでWP Shopifyで使用していることが
分かるような名前にするのが良いでしょう。

 

ステップ5:「Admin API」の「商品管理」を
「読み取りおよび書き込み」に変更する

 

ステップ6:「Admin API」の「非アクティブなAdmin API権限を表示する」をクリックし、
表示されたすべての項目を「読み取りアクセス」または「読み取りおよび書き込み」に変更する

 

ステップ7:「Webhook APIのバージョン」を最新にする

 

ステップ8:「ストアフロントAPI権限」にすべてチェックをつける

 

ステップ9:ステップ8まで行いページ下の「保存する」をクリックする
すると「ストアフロントアクセストークン」が表示されるのでそれをメモ帳等にコピーしておく

 

ステップ10:ステップ2のプライベートアプリ管理画面に戻り、作成したプライベートアプリ名をクリックして「Admin API」を確認
その後、Wordpress管理画面サイドメニューから「WP Shopify」の「Connect」をクリックし対応するものを入力

 

 

ステップ11:すべて入力後、同期ボタンをクリックし、成功のメッセージが表示されれば作業完了です

 

②WordpressでShopifyの商品一覧を表示させる方法

WP ShopifyでWordpressとShopifyを連携が無事に終われば、
次は商品をWordpressで表示させましょう。

WP Shopifyはデフォルトで

  • /products
  • /collections

上記を商品一覧ページとして作成してくれています。

今回は/productsで商品を表示させる方法を紹介します。

連携後、上記のURLの固定ページが自動でできています。
そこに後述するショートコードを貼り付けることで
商品を表示させることが可能です。

商品一覧ページで商品を表示する為に使用するコードは下記になります。

これだけ商品一覧ページが作成されます。
なんて簡単なんでしょう!

そして商品の並び替えなどは属性を指定することで可能です。
いくつか例をあげておきます。

この他にも様々な属性があります。
属性の詳しい情報は公式ドキュメントを確認してみてください。

それ以外にも商品のタイトル情報だけを表示するショートコード
商品の説明情報だけを表示するショートコードなどもあります。
ショートコードについても様々なので確認してみましょう。

公式ドキュメント

デモサイトになりますがこんな感じで表示されるようになります。

 

③WordpressでShopifyの商品詳細を表示させる方法

最後に商品詳細ページの表示方法です。
こちらも簡単な設定で表示させることが可能です。

ステップ1:wordpress管理画面サイドメニューから
「WP Shopify」の「Settings」をクリックし、
「Create Product Detail Pages」オプションを有効にして保存をクリック

ステップ2:次に「Tools」タブをクリックし、
「Sync Detail Page」ボタンをクリック

ステップ3:同期が完了すると「WP Shopify」の
「Products」をクリックしたページに
Shopifyで登録している商品の個別ページが作成されています。

デモサイトの詳細ページですが、初期設定ではこんな感じで表示されます。

レイアウトはCSSである程度なら自由に調整することができるので
自分の好きなように変更ですることが可能です。

 

まとめ

今回は「WP Shopify」でWordpressとshoifyを連携させる方法を紹介しました。

WordPressをECサイト化する時は「woocommerce」が主流でしたが、
今後はWordpressとshoifyを連携させてECサイト化するのも流行りそうです。

それでは今回はここまで。
最後までお読みいただきありがとうございました。

 

まとめ

SHARE

アバター
TEXT BY MEGIDO

RECOMMENDED POSTこの記事もおすすめ!