ShopifyとWordPressの連携方法ガイド|同一ドメインにできる?

ShopifyとWordPressの連携方法ガイド|同一ドメインにできる?

出典:WordPress
出典:WordPress

ECサイトの成功には、”スムーズな購入ができるカート機能”と”商品やブランドの魅力を伝えるコンテンツ機能”がとても重要です。WordPressをすでに運用している事業者でEC運営を検討している方は、Shopifyと連携させることでメリットがたくさんあります。

この記事では、ShopifyとWordPressを連携させる方法を図入りで詳しく解説します。 ShopifyとWordPressのドメインについて、統一感のあるサイト運営のポイントも紹介します。

ShopifyとWordPressの違いは?

ShopifyとWordPressの連携を検討している場合は、まずはそれぞれの違いを確認しましょう。ShopifyとWordPressの最大の違いは「カート機能の有無」です。Shopifyはデフォルトで商品の購入ができますが、WordPressではカート機能が付属していないため独自の開発やアプリの導入などが必要です。

その他の主な違いは以下のとおりです。

サービス名 Shopify WordPress
料金 サブスクリプションモデル(月額料金) 基本無料(別途サーバーとの有料契約が必要)
デザインのカスタマイズ ・制限あり
・アプリの導入や有料テーマなどである程度は可能
・コードの変更には知見が必要で難易度が高い
・高度なカスタマイズが可能
・コードのカスタマイズなどの知見が検索しやすく比較的容易
設定の難易度 初心者に優しい、簡単なセットアップ 自由なカスタマイズは中級〜上級者向け

Shopifyの特徴

Shopifyは、オンラインストアを作成・運営できるクラウドベースのEコマースプラットフォームです。

豊富にあるデザインテーマの中から選ぶだけで、デザインやコーディングの知識がなくてもプロが作るサイトと遜色ないオンラインショップを構築することがShopifyの魅力です。また、決済機能、在庫管理、マーケティングツールなどEC運用に関わるさまざまな機能がデフォルトで使用できるため、Shopifyとの契約だけでEC販売をスタートすることができます。

下記のブログ記事ではShopifyのメリットやデメリットなどを解説しています。ご参考にしてください。

Shopify(ショッピファイ)とは?メリットやデメリット|Shopifyについて徹底解説

WordPressの特徴

WordPressは世界で最も広く使われているオープンソースのコンテンツ管理システム(CMS)です。

ブログから企業サイト、オンラインショップまで、さまざまなウェブサイトがWordPressを利用して作られています。テーマやプラグインが豊富で、デザインの自由度が高く、機能の拡張も簡単です。また、インターネット上にWordPressに関する知見が積み重ねられているので、比較的サイト作成の初心者でも立ち上げが可能です。小規模だけではなく大企業のウェブサイトまで、サイト制作のプロから初心者の方まで、さまざまなサイトでWordPressが活用されています

ShopifyとWordPressを連携するメリット

ここまで紹介したShopifyとWordPressには、それぞれ長所と短所がありました。ShopifyとWordPressの良いところをうまく連携することで、以下のようなメリットにつながります。

SEO強化による集客

WordPressはSEOに優れたプラットフォームであり、各種SEOプラグインを使用して細かい調整が可能です。また、近年ShopifyもSEO対策の機能やShopifyアプリも豊富に登場していますが、現状でもWordPressのほうがSEO対策には向いていると言えるでしょう。そのため、Wordpressを集客機能として利用し、Shopifyを販売機能として利用することで、相乗効果を得ることを期待できます。

たとえば、WordPress上で商品ページやブログ記事などのコンテンツを作成し、WordPress上のコンテンツに対してShopifyの販売機能を結びつけることでよりSEOに強いECサイトを作成することにつながるでしょう。

関連記事:Shopifyで出来るSEO対策|SEOの基本やメリット、おすすめSEO対策アプリも紹介

開発・マーケティングコストの削減

WordPressを運用しながらカート機能としてShopifyを利用することで、追加のプラグインやカスタム開発を必要最低限に抑えられます。合わせて、システム構築やメンテナンスにかかる費用も最小限に抑えられることにつながります。

豊富なマーケティング機能をもつShopifyとSEO対策となるコンテンツ作成に強いWordPressの活用で、さまざまなマーケティングの施策をコストをかけずにうつことも可能になります。

2つのプラットフォームを運用する管理コストはかかりますが、うまく活用することでメリットを大きくすることができるでしょう。

ShopifyとWordPressの連携方法

ShopifyとWordPressを連携させる方法は以下の2通りあります。

  1. Shopifyで購入ボタンを作成し、WordPressに貼り付ける方法
  2. WordPressにて提供されているプラグインを利用し、Shopifyと連携する方法

それぞれ詳しく解説します。

①Shopifyの購入ボタンをWordPressに追加する方法

管理画面の左側にある「販売チャネル」をクリックすると、ポップアップ画面が表示されます。

管理画面の左側にある「販売チャネル」をクリックすると、ポップアップ画面が表示されます。

その中で「すべてのおすすめ販売チャネル」をクリックします。

おすすめの販売チャネルから「Buy Button channel」をインストールします。

おすすめの販売チャネルから「Buy Button channel」をインストールします。

おすすめに「Buy Button channel」が表示されない場合は、「Shopify App Store」から「Buy Button」を検索し、インストールして購入ボタン機能を追加しましょう。

おすすめに「Buy Button channel」が表示されない場合は、「Shopify App Store」から「Buy Button」を検索し、インストールして購入ボタン機能を追加しましょう。

インストール後、アプリを開き「購入ボタンを作成する」からボタンを作成します。

インストール後、アプリを開き「購入ボタンを作成する」からボタンを作成します。

作成できるボタンタイプの種類は2種類あります。

作成できるボタンタイプの種類は2種類あります。
  • 商品購入ボタン:特定の商品1つを表示できる
  • コレクション購入ボタン:コレクション全体を表示できる

表示させたいボタンのタイプを選択します。その後、ボタンのデザインや機能をカスタマイズしていきます。

その後、作成された購入ボタンのHTMLコードをコピーし、WordPress上の任意の場所に貼り付けて終了です。

②WordPressで提供されているプラグインを利用し、Shopifyと連携する方法

HTMLコードを毎回作成しコピー&ペーストしてWordPressに貼るのは大変だという方は、プラグインを使用して連携することも可能です。以前まではShopify公式のWordPressプラグインがありましたが、2024年現在は無く、Shopify純正ではないサードパーティ製のプラグインを使用することになります。

プラグインをインストールすると、アプリ独自のコードが追加されることもあるため、質の低いプラグインをインストールすると、以下のような問題が発生するおそれがあります。

  • サイトエラーを引き起こす
  • WordPressサイトのセキュリティ低下
  • 動作遅延
  • 不必要なコード、あるいは意図的に悪意のあるコードが追加される

このような問題を回避するには、以下の点に注意してください。

プラグインを連携時するときの注意

  • 信頼できる開発者のプラグインを使用する
  • インストール前にユーザーのレビューを読み、信頼できる開発元か確認する
  • カスタマーサポートが設置されているか確認する
  • 最終更新日時を確認し、定期的なメンテナンスを実施しているか確認する

ShopifyとWordPressは同一ドメインにできる?

ドメインの解説をする前に、Shopifyのサーバーについて確認しましょう。ShopifyとWordPressを同じサーバーで構築することはできません。なぜなら、Shopifyは独自サーバーを持っておりその中でサイトが構築・運用されるのに対し、WordPressは外部で契約するレンタルサーバー内に構築運用されます。そして、Shopifyで構築したサイトを外部のレンタルサーバー上に移行することは不可能なのです。

WordPressもShopifyも異なるサーバーで構築されているため、構造上、同一のドメインを使用することはできません。

Shopifyにサブドメイン設定する

WordPressとShopifyを同一ドメインにすることはできませんが、サブドメインを使用することで、同じショップやブランドサイトであることを印象づけることは可能です。

Shopifyにサブドメインを設定する方法は、設定するドメインをどこで取得したかによって異なります。

  • 外部サービスで購入したドメインを使用する:管理画面>ドメイン>既存のドメインを接続する
  • Shopify上でサブドメインを取得する:管理画面>ドメイン>新しいドメインを購入する

ドメインの管理方法やコストなどを比較し、自社の運用しやすい方を選択しましょう。

ドメインの管理方法やコストなどを比較し、自社の運用しやすい方を選択しましょう。

Shopifyの機能をフル活用してサイトの成長を目指す

ShopifyとWordPressの連携について解説しました。Shopifyの強力なEコマース機能、WordPressの優れたコンテンツ管理システム、どちらの長所も活かせる連携方法を検討してください。Shopifyは近年SEOの強さやコンテンツ機能にも注目が集まっています。管理や運用のコストを減らすためにも、Shopifyに一本化することもひとつの手です。多用な機能をもつShopifyを活用してサイトの成長を目指しましょう。

ブログに戻る
1 6
  • Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

  • Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

  • 【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

    【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

  • Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

  • Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

  • ブログ記事 Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPRや対応例など

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

1 6

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

掲載情報に関して

掲載している各種情報は、株式会社Tsunが経験および、調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。