みなさん、こんにちは。
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版もあるようです。
②WordpressとShopifyの連携方法
WP ShopifyでWordpressとShopifyを連携する方法をお伝えします。
Shopifyで設定してからWP Shopifyの設定を行うことで連携が可能になります。
ここでも説明を行いますが、
詳しい情報は公式ドキュメントを確認してみてください。
公式ドキュメントは英語なのでGoogle翻訳等を使用するのがオススメです。
ステップ１：Shopify管理画面サイドメニューのアプリ管理をクリック
ステップ２：プライベートアプリの管理リンクをクリック
ステップ３：「新しいプライベートアプリを作成する」をクリック
ステップ４：「プライベートアプリ名」と「メールアドレス」を入力
プライベートアプリ名は何でもOKなのでWP Shopifyで使用していることが
分かるような名前にするのが良いでしょう。
ステップ５：「Admin API」の「商品管理」を
「読み取りおよび書き込み」に変更する
ステップ６：「Admin API」の「非アクティブなAdmin API権限を表示する」をクリックし、
表示されたすべての項目を「読み取りアクセス」または「読み取りおよび書き込み」に変更する
ステップ７：「Webhook APIのバージョン」を最新にする
ステップ８：「ストアフロントAPI権限」にすべてチェックをつける
ステップ９：ステップ８まで行いページ下の「保存する」をクリックする
すると「ストアフロントアクセストークン」が表示されるのでそれをメモ帳等にコピーしておく
ステップ１０：ステップ２のプライベートアプリ管理画面に戻り、作成したプライベートアプリ名をクリックして「Admin API」を確認
その後、Wordpress管理画面サイドメニューから「WP Shopify」の「Connect」をクリックし対応するものを入力
ステップ１１：すべて入力後、同期ボタンをクリックし、成功のメッセージが表示されれば作業完了です
②WordpressでShopifyの商品一覧を表示させる方法
WP ShopifyでWordpressとShopifyを連携が無事に終われば、
次は商品をWordpressで表示させましょう。
WP Shopifyはデフォルトで
/products/collections
上記を商品一覧ページとして作成してくれています。
今回は/productsで商品を表示させる方法を紹介します。
連携後、上記のURLの固定ページが自動でできています。
そこに後述するショートコードを貼り付けることで
商品を表示させることが可能です。
商品一覧ページで商品を表示する為に使用するコードは下記になります。
|
1 |
<strong>[wps_products]</strong> |
これだけ商品一覧ページが作成されます。
なんて簡単なんでしょう！
そして商品の並び替えなどは属性を指定することで可能です。
いくつか例をあげておきます。
|
1 2 3 4 5 |
// 価格が安い順に10商品を表示 [wps_products sort_by="lowest_price" limit="10"] // 商品が売れている順に商品を5列で表示 [wps_products items_per_row="5" sort_by="best_selling"] |
この他にも様々な属性があります。
属性の詳しい情報は公式ドキュメントを確認してみてください。
それ以外にも商品のタイトル情報だけを表示するショートコードや
商品の説明情報だけを表示するショートコードなどもあります。
ショートコードについても様々なので確認してみましょう。
デモサイトになりますがこんな感じで表示されるようになります。
③WordpressでShopifyの商品詳細を表示させる方法
最後に商品詳細ページの表示方法です。
こちらも簡単な設定で表示させることが可能です。
ステップ１：wordpress管理画面サイドメニューから
「WP Shopify」の「Settings」をクリックし、
「Create Product Detail Pages」オプションを有効にして保存をクリック
ステップ２：次に「Tools」タブをクリックし、
「Sync Detail Page」ボタンをクリック
ステップ３：同期が完了すると「WP Shopify」の
「Products」をクリックしたページに
Shopifyで登録している商品の個別ページが作成されています。
デモサイトの詳細ページですが、初期設定ではこんな感じで表示されます。
レイアウトはCSSである程度なら自由に調整することができるので
自分の好きなように変更ですることが可能です。
まとめ
今回は「WP Shopify」でWordpressとshoifyを連携させる方法を紹介しました。
WordPressをECサイト化する時は「woocommerce」が主流でしたが、
今後はWordpressとshoifyを連携させてECサイト化するのも流行りそうです。
それでは今回はここまで。
最後までお読みいただきありがとうございました。
まとめ
SHARE
