プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法のYouTubeサムネイル画像

YouTubeで見るプラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法のYouTubeへのリンク

プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法

公開日 / 更新日

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. 先程Shopify側で作成したプライベートアプリページにある「APIキー」・「パスワード」・「共有秘密」・「ストアフロントのアクセストークン」を入力。
    「ストアURL」はショップのドメインです、独自ドメインを設定していなければ○○○○.myshopify.comという形式となっているかと思います、ホーム画面等で確認し入力してください。
  4. 「連携設定を保存」ボタンをクリックし、「Shopifyストアと連携されています。」と表示されれば連携完了です。

商品の連携

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

  1. 「Shopify連携」画面、「連携設定」タブにある「商品を連携する」ボタンをクリック。
  2. 「〇〇商品を連携しました」と表示されたら連携完了です。
    連携にかかる時間は、僕が行ったテストでは300商品で10秒ほどでした。

実際に登録されているか、左メニューの「商品」から確認してみましょう。

以上で商品の連携方法は終わりです。
今後、設定時間おきに在庫数を連携できる拡張アドオンを作ろうと思います。

取得・登録する情報と表示方法

取得した商品情報はカスタム投稿として登録されるため、通常の投稿と同じ様に扱えて便利です。
オリジナルの商品ページを自由なレイアウトで作成でき、デザイン・レイアウトはWordPress、決済はShopifyの「WordPress × Shopify」を実現できるかと思います。
Shopify側でオンラインストアを構築する必要がないため、Shopify Lite(月額9ドル)と相性が良いのもメリットです。

Shopifyでの項目WordPressでの項目
商品IDカスタムフィールド「product_id」に登録・投稿スラッグとして使用
タイトルカスタム投稿のタイトルとして登録
説明カスタム投稿の本文として登録
メディアカスタムフィールド「product_images」に全画像のURLを登録
商品タイプタクソノミー「商品タイプ」に登録
タグタクソノミー「タグ」に登録
SKUカスタムフィールド「sku」に登録
バーコードカスタムフィールド「barcode」に登録
在庫数カスタムフィールド「stock」に登録
価格カスタムフィールド「price」に登録
割引前価格カスタムフィールド「compare_price」に登録
税の適用カスタムフィールド「taxable」に登録
商品情報
Shopifyでの項目WordPressでの登録
ストア情報$ConnectProductsShopifyShopData[‘name’]
運営責任者$ConnectProductsShopifyShopData[‘shop_owner’]
郵便番号$ConnectProductsShopifyShopData[‘zip’]
住所$ConnectProductsShopifyShopData[‘address’]
電話番号$ConnectProductsShopifyShopData[‘phone’]
メールアドレス$ConnectProductsShopifyShopData[‘customer_email’]
$ConnectProductsShopifyShopData[‘country_name’]
ストア言語$ConnectProductsShopifyShopData[‘primary_locale’]
ストア情報

商品一覧を表示したい場合は、下記のようなコードでできます。

/* 商品を取得 */
$productListArr = array(
    'post_type' => 'product', //投稿タイプ指定
    'posts_per_page' => 10, //表示数指定
);
$productListPosts = get_posts($productListArr);

/* 商品を表示 */
if($productListPosts ):
    foreach($productListPosts as $post) : setup_postdata($post);
        $productImages = explode("\n", get_post_meta($post->ID, 'product_images', true)); //画像URLを配列化
        echo '<img src="'.$productImages[0].'">'; //1枚目の画像を表示
        the_title(); //タイトルを表示
        echo get_post_meta($post->ID, 'price', true); //価格を表示
    endforeach;
endif;wp_reset_postdata();

ストア情報はデータベーステーブルに保存されているので、オプションの値を取得してから各情報を表示するコードを記述してください。

//オプションを取得
$ConnectProductsShopifyShopData = get_option('ConnectProductsShopifyShopData');

//出力例
echo $ConnectProductsShopifyShopData['name'];

商品の購入ボタンは投稿のカスタムフィールドに登録された「product_id」の値を利用し、ショートコードで表示できます。

//テンプレートファイルでの記述
echo do_shortcode('[shopifyBuyButton id=6630269124777]'); //商品IDを指定

//カスタム投稿シングルページループ内の場合
echo do_shortcode('[shopifyBuyButton]'); //商品IDは指定しなくてもOK

投稿ページのショートコードブロックであれば[shopifyBuyButton id=商品ID]という記述になります。
また、プラグインの設定画面でボタンの表示スタイルを変更可能です。

Shopifyの商品をWordPressに連携するプラグイン

「Connect Products with Shopify」

無料

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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