Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify 」の使用方法のYouTubeサムネイル画像

YouTubeで見るShopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify 」の使用方法のYouTubeへのリンク

Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify 」の使用方法

公開日 / 更新日

Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグインを作成しましたので連携方法をご紹介します。こちらのプラグインはWordPressの管理画面からインストールすることができ無料でご利用いただけます。

ShopifyとWordPressの連携方法

ショップ用のプライベートアプリを作成

まずはShopify側で「プライベートアプリ」を作成する必要があります。
外部への連携を許可する設定みたいなものです。

  1. ストア管理画面で「アプリ管理」へ移動。
  2. 「プライベートアプリを管理する」をクリックし、「プライベートアプリを作成する」ボタンをクリック。
  3. 任意の「プライベートアプリ名」と「緊急連絡用開発者メール」を入力。
  4. 「このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする」をチェック。
  5. 「ストアフロントAPI権限」の項目を全てチェック。
  6. 「非アクティブなAdmin API権限を表示する」をクリックし、表示される項目を全て「読み取りアクセス」もしくは「読み取りおよび書き込み」にする。
  7. 「保存」ボタンをクリックし、表示されるポップアップの「アプリを作成する」をクリックして完了です。

「Connect Products with Shopify 」のインストールと設定

続いて、連携したいWordPressに「Connect Products with Shopify 」をインストールします。

  1. WordPressの管理画面にログインし、「プラグイン > 新規追加」ページで「Connect Products with Shopify 」と検索し、プラグインをインストール・有効化。
  2. 左側メニューに「Shopify連携」が追加されるのでクリックして移動。
  3. 「ストアURL」を入力、「ストアURL」はショップのドメインです。例えば、プライベートアプリページの「URLの例」が「https://d2bdf71c8e271e3b09f078841d20aac9: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@twentyfourseven-demo.myshopify.com/admin/api/2021-04/orders.json」であれば「twentyfourseven-demo.myshopify.com」の部分となります。
  4. 先程Shopify側で作成したプライベートアプリページにある「APIキー」・「パスワード」・「共有秘密」・「ストアフロントのアクセストークン」を入力。
  5. 「連携設定を保存」ボタンをクリックし、「Shopifyストアと連携されています。」と表示されれば連携完了です。

商品の連携

Shopifyで登録済みの全商品を取得し、WordPressのカスタム投稿(商品)に登録します。

  1. 「Shopify連携」画面、「連携設定」タブにある「商品を連携する」ボタンをクリック。
  2. 「〇〇商品を連携しました」と表示されたら連携完了です。
    連携にかかる時間は、僕が行ったテストでは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
actioncart
checkout
modal
購入ボタンクリック時のアクションを指定
初期値:modal
alignmentright
left
center
コンテンツの整列を指定
初期値:center
column任意の(整数)一覧のカラム数を指定
初期値:3
variationshow
hide
バリエーション選択の表示・非表示を指定
初期値:hide
quantityshow
hide
数量フィールドの表示・非表示を指定
初期値:hide
text任意の文字列購入ボタンの文字を指定
初期値:設定されている値
type商品タイプのスラッグ
複数指定可能(カンマ区切り)
表示する商品タイプを指定
初期値:全商品タイプ
tagタグのスラッグ
複数指定可能(カンマ区切り)
表示するタグを指定
初期値:全タグ
vendor販売元の名前
複数指定可能(カンマ区切り)
表示する販売元を指定
初期値:全販売元
id商品ID
複数指定可能(カンマ区切り)
表示する商品IDを指定
初期値:全商品
stockshow
hide
在庫切れ商品の表示・非表示を指定
初期値:hide
sortnew
old
low-price
high-price
表示順を指定
初期値:new
paginationshow
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

ボタンの表示スタイルはプラグインの設定画面で変更可能です。
購入ボタンのショートコードも属性を設定することでカスタマイズできます。ショートコードに属性を設定した場合は、プラグインの設定画面の設定内容より優先して適用されます。

属性可能な値説明
layoutbasic
classic
fullview
表示レイアウトを指定
初期値:設定されている値
actioncart
checkout
modal
購入ボタンクリック時のアクションを指定
初期値:設定されている値
alignmentright
left
center
コンテンツの整列を指定
初期値:設定されている値
image任意の(整数)画像の幅を指定
初期値:設定されている値
variationshow
hide
バリエーション選択の表示・非表示を指定
初期値:cart または checkout / show
modal / hide
quantityshow
hide
数量フィールドの表示・非表示を指定
初期値:設定されている値
text任意の文字列購入ボタンの文字を指定
初期値:設定されている値
cssload
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'];
Shopifyの商品をWordPressに連携するプラグイン

「Connect Products with Shopify」

無料

Shopifyの全商品情報を取得し、WordPressにカスタム投稿(商品)として登録するプラグインです。

共有ボタン
Facebook Twitter LINE
関連キーワード
|
関連アーカイブへの矢印Connect Products with Shopify/WordPressの関連アーカイブ
WordPress子テーマテンプレートの配布とインストール方法

WordPress子テーマテンプレートの配布とインストール方法

WordPressにおいて、テーマのテンプレートファイルの直接編集は、テーマ更新のタイミングで編集内容が上書きされてしまうので、有効化中のテーマを「親テーマ」と...

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressにおいて、親テーマの直接編集はテーマが更新された際に上書きされてしまうので、テーマのカスタマイズは「子テーマ」を使うか「プラグイン」がおすすめ...

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

当サイトで販売しているWelcart対応テーマ「TwentyfourSeven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。部分的に他のテーマで...

購入したWordPressテーマのインストール方法

購入したWordPressテーマのインストール方法

「TwentyfourSeven」の場合、テーマをインストールする前にカートプラグイン「Welcart」をインストールします。他のテーマの場合は、テーマのインス...

追加CSSでWordPressテーマをカスタマイズする方法

追加CSSでWordPressテーマをカスタマイズする方法

CSSがわかる方であればWordPressのデフォルト機能「追加CSS」でテーマのカスタマイズが手軽にできます。こちらはほとんどのテーマで利用できる方法かと思い...