ホームページ作成の費用相場について
いくらくらいが適切なの？
「BASEで作ったショップとWordPressで作ったサイトを連携させたい」
そう考えるショップオーナーの方は多いのではないでしょうか。
BASEとWordPressを連携させる方法は3つ。単体での集客が難しいとされているBASEですが、WordPressと連携することで、コストを抑えた集客が期待できます。
本記事では、
- BASEとWordPressを連携させるメリット
- BASEとWordPressを連携させる方法
について解説していきます。ぜひ最後まで読んで、BASEの集客力アップに繋げてください。
優良WEB運営元が提供するCMS
優良WEB運営元のJetB株式会社が提供
100社以上の実名公開インタビューあり
WordPressをSEOに特化して独自カスタマイズしたCMS
SEOに強い記事の作成方法もサポート
BASEでショップを運営しているお客様も多数ご利用
2,800社以上の導入実績
BASEにWordPressを連携させるメリット
BASEは初期費用や月額費用0円で、手軽にネットショップを開店できるツールです。しかし、大手ECショップと比較するとSEO集客が得意ではありません。
そのため、商品を探している顧客候補がインターネット検索をした時に、なかなか自分のショップが上位表示されないというデメリットがあります。また、BASE内の他のショップから、別の関連ショップを表示するような機能もありません。これらの理由からBASE単独での利用は集客力に不安が生じます。
一方、WordPressは世界で最も人気のあるCMS（コンテンツ・マネジメント・システム）です。CMSとは、Webの知識に長けていなくても、Webサイトの作成や管理が簡単にできるシステムのこと。WordPressが飛びぬけて人気が高い理由は、オープンソースであるからです。
さらに無料で利用できるデザインテンプレートやプラグイン（拡張機能）が数多く用意されていることも人気の要因といえるでしょう。テンプレートとあわせて必要なプラグインを利用することで、Webの知識がなくても簡単にブログを作成できます。利用者が多いため情報が豊富なのも魅力的。困ったことが起きても検索一つで多くの問題を解決できます。
さらに、WordPressはGoogleのロボットがクロールしやすい構造のため、SEOに強く検索結果で上位表示しやすいといわれています。そのため、適切にブログを作成することで、顧客候補がWeb検索をした際に自分のサイトが上位表示され、集客効果を得られるでしょう。
また、BASEにはカスタマイズ機能があるとはいえ、編集できないページもあります。自由度の高いデザイン編集が可能なWordPressと組み合わせることで、オリジナリティのあるショップサイトを作成できる点もメリットです。
どちらも多額な初期費用はかかりません。そのため、2つを組み合わせて利用することは、低コストでネットショップを始めたい人に相応しいといえるでしょう。
初心者がネットショップをWordPressのみで行わない方がいい理由
SEOに強いと聞くと、BASEと組み合わせることなく「WordPress単体でネットショップを開いた方が良いのではないか」と思う人もいるでしょう。
しかし、WordPressはセキュリティに対しての脆弱さが指摘されています。WordPressがオープンソースであることが原因の一つです。
理由①：ソースコードがオープン
WordPressはコードがオープンになっているため、誰でも自由に全てのコードを見ることができます。そのため、脆弱な部分があると、コードを読み取れる人であれば誰にでも見つけることが可能です。
悪意ある人が脆弱性に気付いた場合、そこを突いて攻撃を仕掛けてくる可能性があります。実際、これまでにいくつかの被害が報告されています。
被害の一例
2017年、コンテンツの書き換えに関する脆弱性が露見しました。
攻撃者は特別なリクエストを送信し、本来権限のないコンテンツの投稿内容の改ざんを行っています。公式側が急いで対応しましたが、対応が終わるまでに155万件にのぼる被害が生じました。
ただし、これはWordPressが世界で一番使われているCMSだからこそ狙われやすかったともいえます。
理由②：プラグインの脆弱性
WordPressには多数のプラグインが提供されています。そのプラグインの脆弱性をつき、サイトの乗っ取りやサイトへの攻撃が行われた例も少なくありません。
基本的に不具合や脆弱性に対して、WordPress側で随時バージョンアップが行われるので心配しすぎる必要はありません。とはいえ、このようなコードの脆弱性を狙った攻撃への対応は、初心者にはとても困難です。そのため、セキュリティ対策を知らない初心者がWordPress単体でのネットショップ開設をすることにはリスクが伴います。
セキュリティ対策がしっかりしているがSEOには強くないBASEと、脆弱性はあるもののSEOに強いWordPressとを組み合わせて利用することで、お互いの弱さを補完することができるでしょう。
BASEとWordPressを連携させる方法
WordPressにBASEを繋げる方法は、簡単にできるものから専門的な知識が必要となるものまで複数あります。それぞれの方法を確認し、自分に合ったものを選びましょう。
BASEとWordPressの連携方法①：iframeで埋め込む
iframe（アイフレーム）タグを用いて、BASEの商品や商品一覧をWordPressに埋め込むことができます。iframeとは、HTML構造の中に、別のHTMLを入れ子にすることができるタグのことで、インラインフレームとも言います。
HTMLと聞くと専門知識が必要なのではと、尻込みする人もいるかもしれません。しかし、コピー&ペーストのみでできるため専門的な知識がなくても簡単に作成できます。
WordPressを見た読者が商品をクリックすると、BASEの商品ページに移動し即購入できます。BASEに記入したキャッチコピーやセール情報が即座に反映される点も便利です。また、APIを利用する場合に必要となるBASEへの申請も不要であるため、思い立ったらすぐに作成できる点もメリットです。
商品ごとに連携させる方法
下記のHTMLタグを利用してソースコードを作成し、WordPressの任意の場所に貼り付けます。具体的な手順は下記のとおりです。
BASEの商品コードを作成する
「商品URL」部分には、埋め込みたいBASEの商品詳細ページのURLをコピー＆ペーストしてください。
小サイズ
<iframe frameborder="0” width="160" " height="220" src="商品URL/widget/small" ></iframe>中サイズ
<iframe frameborder="0" width="220" height="380" src="商品URL/widget" ></iframe>大サイズ
<iframe frameborder="0" width="320" height="480" src="商品URL/widget/large" ></iframe>WordPressにコードをペーストする
編集画面で「カスタムHTML」を利用し、コピーした上記コードをペーストします。
保存、プレビューで確認の上公開
WordPressをプレビューし、商品が表示されていることを確認します。商品をクリックして、BASEの商品ページに移動することを確認した後、公開すると良いでしょう。
商品一覧を連携させる方法
同様の手順でトップページを埋め込むことで、商品一覧を表示できます。iframeにBASEのトップページのURLを貼り、WordPressにコードを貼り付けます。
ショップのサイズを考えると大サイズがおすすめです。
<iframe frameborder="0" width="320" height="480" src="ショップURL" ></iframe>必要に応じて、上記のwidth（幅）とheight（高さ）の数字を変更することで、自サイトにあわせた任意のサイズ表示が可能となります。
BASEとWordPressの連携方法②：APIを利用する
APIを利用して、BASEの情報をWordPress上に表示できます。BASEではAPIが無料で提供されています。なお、BASEでAPIを利用するには申請が必要です。
申請して審査が通るまで1～2週間かかると言われています。余裕を持って申請すると良いでしょう。具体的な申請方法は下記のとおりです。
APIを使用するための申請方法
- BASE Developers画面＞「アプリケーション」＞新規作成を選択
- 必須項目の入力し、申請
必須項目は下記を参考にしてください。
必須項目
- アプリ名：「商品情報取得」など後に利用する際、わかりやすいものにしておくと良いでしょう。
- アプリの説明：「商品データを取得するため」などで大丈夫です。詳細に記す必要はありません。
- アプリURL：WordPressのURL
- コールバックURL：アプリURLと同様のものを入力
- 利用権限：「商品情報を見る」にチェック
- 検索APIの利用：チェックを入れる
BASEから承認が下りると、認証キーが発行されます。BASE Developers画面にアクセスし、「アプリケーション」＞「一覧」より必要な情報が確認可能です。
なお、APIを利用するにはJava Scriptやphpの知識が必要となります。難しい場合は、次に紹介するプラグインの利用をおすすめします。
BASEとWordPressの連携方法③：プラグインを利用する
プラグイン「BASE商品リスト」を利用して連携できます。下記二点が必要となるため、このプラグインを利用するためにもAPI取得が必須です。
連携に必要なもの
- client_id (検索API用)
- client_secret (検索API用)
BASEにて、API取得の申請をします。APIの申請方法は下記のとおりです。
申請方法
- BASE Developers画面＞「アプリケーション」＞新規作成を選択
- 必須項目の入力し、申請
必須項目の記入は下記を参考にしてください。
【記入】必要項目
- アプリ名：「BASE商品情報」など、後に利用する際わかりやすいものにしておくと良いでしょう。
- アプリの説明：「WordPress内に商品データを表示するため」
- アプリURL：WordPressのURL
- コールバックURL：アプリURLと同様のものを入力
- 利用権限：「商品情報を見る」にチェック
- 検索APIの利用：チェックを入れる
BASEから承認が下りると、認証キーが発行されます。BASE Developers画面にアクセスし、「アプリケーション」＞「一覧」より「client_id(検索API用)」「client_secret(検索API用)」といった、必要な情報が確認できます。
次に、WordPressにプラグイン「BASE商品リスト」をインストールします。インストール手順は下記のとおりです。
インストール手順
- メニューの「プラグイン」＞「新規追加」より、「BASE商品リスト」を検索
- 「今すぐインストール」をクリックし、「有効化」する
そして、WordPressのプラグイン「BASE商品リスト」に、BASE Developers画面で確認した必要事項を記入します。具体的な方法は下記のとおりです。
入力手順
1.「client_id(検索API用)」「client_secret(検索API用)」を入力
なお、BASEには、「検索API用」と記されていない「client_id」「client_secret」も存在します。貼り間違えることのないよう注意しましょう。
2.ショップIDを設定する
ショップIDは、BASEの初期ドメインに応じて設定します。〇〇.thebase.inの場合は〇〇の部分のみを入力します。thebase.in以外の場合は、入力方法が異なるので注意が必要です。
例えば「〇〇.theshop.jp」の場合、ドットをハイフンに置き換え「〇〇-theshop-jp」と入力します。
3.変更を保存する
BASE商品リストへの入力を終えると、WordPress内に表示できます。表示にはショートコードパラメータを使用します。パラメータは下記のとおりです。
- q: 検索キーワード
- shop_id: ショップID(設定画面で固定化可能)
- count: 表示件数(初期値：10件)
- cache: API結果のキャッシュ時間(初期値：60秒)
- name: API結果のキャッシュ名(初期値：base_item_list)
複数箇所にショートコードを設置する場合に使用します。 - sort: リストの並び順設定(初期値： BASEのおすすめ順)
プラグインディレクトリ内の「base_items.php」でテンプレートを確認できます。
価格表示をはじめとした細かい設定を希望する場合、テーマフォルダ内にこのファイルをコピー、編集することで対応可能です。
BASEとWordPressを連携することで集客力を向上させよう
BASEはセキュリティのしっかりした使いやすいネットショップ、WordPressはSEOに強いツールです。
しかし、それぞれ下記のような弱点があります。
- BASEはSEOが不得意で集客力に懸念がある。
- WordPressは脆弱性をつかれることがあり、初心者にはセキュリティ対策が難しい。
2つを組み合わせて利用することで、お互いの弱点を補完し、強みを最大化できます。
また本記事では、具体的なBASEとWordPressの連携方法についても解説しました。
内容は以下の3点です。
- iframeを使った埋め込み方法
- BASE APIを使った連携方法
- プラグインを使った連携方法
この記事でご紹介した方法をぜひ実践し、ショップへの集客力を向上させましょう。
もし、知識面の問題などでWordPressの利用に不安がある方は一度制作会社に問い合わせをしてみるのもいいと思います。
Share
