Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグインを作成しましたので連携方法をご紹介します。こちらのプラグインはWordPressの管理画面からインストールすることができ無料でご利用いただけます。
ShopifyとWordPressの連携方法
ショップ用のプライベートアプリを作成
まずはShopify側で「プライベートアプリ」を作成する必要があります。
外部への連携を許可する設定みたいなものです。
- ストア管理画面で「アプリ管理」へ移動。
- 「プライベートアプリを管理する」をクリックし、「プライベートアプリを作成する」ボタンをクリック。
- 任意の「プライベートアプリ名」と「緊急連絡用開発者メール」を入力。
- 「このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする」をチェック。
- 「ストアフロントAPI権限」の項目を全てチェック。
- 「非アクティブなAdmin API権限を表示する」をクリックし、表示される項目を全て「読み取りアクセス」もしくは「読み取りおよび書き込み」にする。
- 「保存」ボタンをクリックし、表示されるポップアップの「アプリを作成する」をクリックして完了です。
「Connect Products with Shopify 」のインストールと設定
続いて、連携したいWordPressに「Connect Products with Shopify 」をインストールします。
- WordPressの管理画面にログインし、「プラグイン ＞ 新規追加」ページで「Connect Products with Shopify 」と検索し、プラグインをインストール・有効化。
- 左側メニューに「Shopify連携」が追加されるのでクリックして移動。
- 「ストアURL」を入力、「ストアURL」はショップのドメインです。例えば、プライベートアプリページの「URLの例」が「https://d2bdf71c8e271e3b09f078841d20aac9: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@twentyfourseven-demo.myshopify.com/admin/api/2021-04/orders.json」であれば「twentyfourseven-demo.myshopify.com」の部分となります。
- 先程Shopify側で作成したプライベートアプリページにある「APIキー」・「パスワード」・「共有秘密」・「ストアフロントのアクセストークン」を入力。
- 「連携設定を保存」ボタンをクリックし、「Shopifyストアと連携されています。」と表示されれば連携完了です。
商品の連携
Shopifyで登録済みの全商品を取得し、WordPressのカスタム投稿（商品）に登録します。
- 「Shopify連携」画面、「連携設定」タブにある「商品を連携する」ボタンをクリック。
- 「〇〇商品を連携しました」と表示されたら連携完了です。
連携にかかる時間は、僕が行ったテストでは300商品で10秒ほどでした。
実際に登録されているか、左メニューの「商品」から確認してみましょう。
以上で商品の連携方法は終わりです。
今後、設定時間おきに在庫数を連携できる拡張アドオンを作ろうと思います。
取得・登録する情報
取得した商品情報はカスタム投稿として登録されるため、通常の投稿と同じ様に扱えて便利です。
オリジナルの商品ページを自由なレイアウトで作成でき、デザイン・レイアウトはWordPress、決済はShopifyの「WordPress × Shopify」を実現できるかと思います。
Shopify側でオンラインストアを構築する必要がないため、Shopify Lite（月額9ドル）と相性が良いのもメリットです。
| Shopifyでの項目 | WordPressでの項目 |
| 商品ID | カスタムフィールド「product_id」に登録・投稿スラッグとして使用 |
| タイトル | カスタム投稿のタイトルとして登録 |
| 説明 | カスタム投稿の本文として登録 |
| メディア | カスタムフィールド「product_images」に全画像のURLを登録 1枚目の画像URLを「product_first_image」に登録 |
| 商品タイプ | タクソノミー「商品タイプ」に登録 |
| タグ | タクソノミー「タグ」に登録 |
| 合計在庫数 | 全オプションの在庫合計数をカスタムフィールド「total_stock」に登録 |
| 最高価格 | 全オプションでの最高価格をカスタムフィールド「max_price」に登録 |
| 最低価格 | 全オプションでの最低価格をカスタムフィールド「min_price」に登録 |
| 販売元 | カスタムフィールド「vendor」に登録 |
| 各バリエーションの情報 | 各バリエーションの「SKU」「バーコード」「オプション名1」「オプション名2」「オプション名3」「価格」「割引前価格」「税の適用」「在庫数」「重さ」「重さの単位」「発送の有無」をカスタムフィールド「variants_data」にまとめて登録 |
ストア情報はConnectProductsShopifyShopDataという名前のDBオプションに配列で格納されます。
| Shopifyでの項目 | WordPressでの登録 |
| ストア情報 | $ConnectProductsShopifyShopData[‘name’] |
| 運営責任者 | $ConnectProductsShopifyShopData[‘shop_owner’] |
| 郵便番号 | $ConnectProductsShopifyShopData[‘zip’] |
| 住所 | $ConnectProductsShopifyShopData[‘address’] |
| 電話番号 | $ConnectProductsShopifyShopData[‘phone’] |
| メールアドレス | $ConnectProductsShopifyShopData[‘customer_email’] |
| 国 | $ConnectProductsShopifyShopData[‘country_name’] |
| ストア言語 | $ConnectProductsShopifyShopData[‘primary_locale’] |
ショートコードでの表示
連携をしWordPressに登録された商品は、ショートコードを使い「商品一覧」や「購入ボタン」を表示できます。
テンプレートファイルに記述する場合はdo_shortcode()関数、投稿等で使用する場合はショートコードブロックに記述してください。
商品一覧の表示
ショートコード：[shopifyProductsList]
//テンプレートファイルでの記述
echo do_shortcode('[shopifyProductsList]'); //商品一覧を表示属性を設定することで商品一覧表示をカスタマイズできます。
| 属性 | 可能な値 | 説明 |
limit | 任意の（整数） | 1ページに表示する商品数を指定 初期値：9 |
action | cart checkout modal | 購入ボタンクリック時のアクションを指定 初期値：modal |
alignment | right left center | コンテンツの整列を指定 初期値：center |
column | 任意の（整数） | 一覧のカラム数を指定 初期値：3 |
variation | show hide | バリエーション選択の表示・非表示を指定 初期値：hide |
quantity | show hide | 数量フィールドの表示・非表示を指定 初期値：hide |
text | 任意の文字列 | 購入ボタンの文字を指定 初期値：設定されている値 |
type | 商品タイプのスラッグ 複数指定可能（カンマ区切り） | 表示する商品タイプを指定 初期値：全商品タイプ |
tag | タグのスラッグ 複数指定可能（カンマ区切り） | 表示するタグを指定 初期値：全タグ |
vendor | 販売元の名前 複数指定可能（カンマ区切り） | 表示する販売元を指定 初期値：全販売元 |
id | 商品ID 複数指定可能（カンマ区切り） | 表示する商品IDを指定 初期値：全商品 |
stock | show hide | 在庫切れ商品の表示・非表示を指定 初期値：hide |
sort | new old low-price high-price | 表示順を指定 初期値：new |
pagination | show hide | ページネーションの表示・非表示を指定 初期値：show ※ページネーションは固定ページ（is_page）・アーカイブページ（is_archive）でのみ表示可能です。 |
pagination-range | 任意の（整数） | 任意の（整数） |
//属性の使用例
echo do_shortcode('[shopifyProductsList limit="6" column="2" type="category-a,category-b,category-c" sort="low-price"]'); //表示件数「6」・カラム数「2」・商品タイプ「カテゴリーA、カテゴリーB、カテゴリーC」・表示順「価格が安い順」で商品一覧を表示ショートコードを使わずに商品一覧を表示したい場合は、下記のようなコードでできます。
/* 商品を取得 */
$productListArr = array(
'post_type' => 'product', //投稿タイプ指定
'posts_per_page' => 10, //表示数指定
);
$productListPosts = get_posts($productListArr);
/* 商品を表示 */
if($productListPosts):
foreach($productListPosts as $post) : setup_postdata($post);
$productImage = get_post_meta($post->ID, 'product_first_image', true); //1枚目の画像URL取得
echo '<img src="'.$productImage.'">'; //1枚目の画像を表示
the_title(); //タイトルを表示
echo get_post_meta($post->ID, 'min_price', true); //最低価格を表示
endforeach;
endif;wp_reset_postdata();購入ボタンの表示
商品の購入ボタンは投稿のカスタムフィールドに登録された「product_id」の値を利用し、ショートコードで表示できます。
ショートコード：[shopifyBuyButton id=”商品ID”]
//テンプレートファイルでの記述
echo do_shortcode('[shopifyBuyButton id="6630269124777"]'); //商品IDを指定
//商品カスタム投稿シングルページループ内の場合
echo do_shortcode('[shopifyBuyButton]'); //商品IDは指定しなくてもOKボタンの表示スタイルはプラグインの設定画面で変更可能です。
購入ボタンのショートコードも属性を設定することでカスタマイズできます。ショートコードに属性を設定した場合は、プラグインの設定画面の設定内容より優先して適用されます。
| 属性 | 可能な値 | 説明 |
| basic classic fullview | 表示レイアウトを指定 初期値：設定されている値 |
action | cart checkout modal | 購入ボタンクリック時のアクションを指定 初期値：設定されている値 |
alignment | right left center | コンテンツの整列を指定 初期値：設定されている値 |
| 任意の（整数） | 画像の幅を指定 初期値：設定されている値 |
variation | show hide | バリエーション選択の表示・非表示を指定 初期値：cart または checkout / show modal / hide |
quantity | show hide | 数量フィールドの表示・非表示を指定 初期値：設定されている値 |
text | 任意の文字列 | 購入ボタンの文字を指定 初期値：設定されている値 |
| load no-load | 購入ボタン用のCSSを読み込むかを指定 初期値：load |
//属性の使用例
echo do_shortcode('[shopifyBuyButton id="6630269124777" alignment="center" image="580" quantity="show"]'); //表示する商品のID「6630269124777」・整列「中央寄せ」・画像の表示幅「580px」・数量フィールド「表示」で購入ボタンを表示ストア情報の表示
ストア情報はデータベーステーブルに保存されているので、オプションの値を取得してから各情報を表示するコードを記述してください。
//オプションを取得
$ConnectProductsShopifyShopData = get_option('ConnectProductsShopifyShopData');
//出力例
echo $ConnectProductsShopifyShopData['name'];
