ドメインの取得からWordPressのアップロードまで

ネットショップの開業には、レンタルサーバーとドメインの取得が必要です

レンタルサーバーの申し込み

ネットショップ開業に必要なレンタルサーバーの申し込み手順。お名前サーバー利用の場合について説明します。独自ドメインの申し込みは、サーバー契約後の申し込みになるようです。

サーバー

SD-12プランを選びます。

申し込み

今すぐお申し込みをクリックして次の画面で支払い期間を選んで決定クリックすると、ドメイン名を入力する画面が出てきますが、ドメイン. onamae.jp  のサブドメインになるので、ここは入力しません。「独自ドメインの追加方法はこちら」をクリックして

ドメイン取得サーバーの契約をしてからドメインの取得をするとドメインの価格は割高になります。

ドメインだけ先に割安で取得して、別のサーバーをレンタルするのも検討する必要があります。

お名前.comでサーバーを借りる場合は、ドメインnaviにログインして、ネームサーバーを「変更する」クリックします。

「登録情報は正しいので手続きを続ける」→「共用サーバーを設定する」→「設定する」でサーバーの設定は完了です。

サーバーnavi

サーバーNAVIにログインして、「ご利用サービス確認」をクリックします。

コントロールパネル

オプション[追加する]をクリックします。

SSL

独自SSLにチェックを入れて「次へ」をクリックします。

独自ドメイン

独自ドメインにチェックしてコモンネームを選び「次へ」をクリックします。次のページで「お申し込み」をクリックすれば完了です。

WordPressをダウンロード

サーバーとドメインの取得が完了したら、WordPressをダウンロードします。リンク先のページからダウンロードをクリックしてダウンロードが完了したら、解凍します。解凍したフォルダとファイルをサーバーにアップロードします。アップロード先のサーバーの情報はサーバーNAVIのコントロールパネルから調べることが出来ます。

オプション

ftp

FTP・SSHアカウントをクリックするとサーバーに接続する情報が表示されます。FTPソフトを使ってサーバーにアップロードします。ここではFFFTPの使用例を記載しています。

ffftp

ホストの設定名は自分が分かりやすいもので結構ですが、ホスト名、ユーザー名、パスワードはFTP・SSHアカウントで表示されるものを入れて下さい。wordpressのフォルダ内のフォルダとファイルを全て↑でアップロードします。アップロードが完了したらMySQLのデータベースを作ります。

mysql

コントロールパネルのMySQLをクリックします。データベース名、データベースのユーザー名、データベースのパスワード、データベースホストが表示されますので、ブラウザのアドレスバーにドメインを入れると、上記を準備して下さいと表示されます。

wordpress1

wordpress2

wordpress3

テーブルの接頭辞は変更する必要はありません。その他を記載したら送信ボタンを押します。次に表示される画面で「インストール実行」をクリックします。

wordpress4

サイトのタイトル、ユーザー名、パスワード、メールアドレスを入力して「WordPressをインストール」をクリックします。ユーザー名とパスワードは次回ログインする時に必要になりますので、控えておきましょう。

wordpress5

成功しました!となればインストール完了です。これでネットショップを作る準備が完了しました。

一般設定

次に、URLにアクセスするとログイン画面が出てきますので、ユーザー名とパスワードを入力して、ダッシュボードにアクセスします。次に「設定」→「一般」をクリックします。

一般設定

一般設定画面で「サイトのタイトル」を入力します。「キャッチフレーズ」は削除します。「WordPressアドレス(URL)」を入力します。「サイトアドレス(URL)」を入力して、「メールアドレス」も入力します。さらに「タイムゾーン」を東京にして、「サイトの言語」を日本語にして、変更を保存にします。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

 

Google・Search ConsoleとGoogle・analyticsの登録

Google・Search ConsoleとGoogle・analyticsは必ず登録して下さい

ネットショップを運営するのであれば必ず使っておきたいSearch Console

Google・Search Consoleはsitemapで送信されたページ数とindexされたページ数を調べたり、被リンク元とリンク数を調べたり、検索でのクリック数、検索での表示回数、CTR(クリックされる割合)、検索での表示順位などが分かります。また、更新したページへGooglebotを呼ぶFetch as Googleもありますので、ネットショップを運営するのであれば必ず使っておきたいツールです。Search Consoleの情報から自分のショップの改善点を見つけ出す手がかりらもなりますので、とても重要です。設置方法は簡単なので、是非設置して下さい。
searchconsole

Search ConsoleにアクセスしてGoogleアカウントでログインします。次にプロパティの追加をクリックします。

プロパティの追加

URLを入力して、送信ボタンを押します。

プロパティ追加の確認

説明に従って、HTML確認ファィルをダウンロードします。ダウンロードした確認ファイルをそのままサーバーのルートディレクトリ(一番上の階層)にアップロードします。ブラウザでアップロードした確認ファイルが正しくアップロードされているか確認します。

正しくアップロードされていることが確認できたら、確認ボタンをクリックします。

Google・analyticsはユーザーのアクセス経路やコンバージョンを調べることができます

Google・analyticsはサイトへのアクセスが検索エンジンからなのか、SNSからなのか、リンクからなのかやコンバーション(受注率)などを調べることができます。

Google・analyticsを設定するには、WordPressのテーマの選定をしないと設定できません。WordPressのダッシュボード「外観」から「ヘッダー」を選びます。今回は、Twenty Sixteenを選びました。

使いたいテーマを「有効化」すれば完了です。

Twenty Sixteenは画面の周囲に黒い縁取りが付いたり、ヘッダー周りの余白がとても多いので、https://find-content.jp/Untitled-1.cssに余白を少なくしたcssファイルをアップロードしてありますので、コピペしてご使用下さい。周囲の黒縁は、「外観」→「背景」→「色」→「背景色」を変更すれば無くなります。

テーマの編集

ダッシュホード→外観→テーマの編集でstyle.cssが表示されます。

stylecss

ここに表示される全てをUntitled-1.cssをコピーしてペーストして下さい。

ただ、テーマのバージョンなど、条件によっては上手く作動しないことも考えられますので、元のcssファイルは必ずバックアップしておいて下さい。

Google・analyticsにアクセスしてGoogleアカウントでログインします。ログインしたら管理をクリックします。

新しいアカウント

アカウントタブから新しいアカウントを作成をクリックします。

新しいアカウント

アカウント名、ウェブサイトの名前、ウェブサイトのURL(http://▼をクリックするとhttpsを選べます)、業種を選択して、タイムゾーンを日本にして、「トラッキングIDを取得」をクリックします。

トラッキングID

表示された<script>~</script>をコピーして、WordPressのダッシュボードから、外観、テーマの編集を選びます。

テーマの編集

style

テーマヘッダーをクリックします。

head

header.phpの</head>の直前にトラッキングIDを貼り付けます。これで、パソコン向けサイトのGoogle・analyticsの設定は完了です。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

 

ヘッダー画像の変更

ネットショップを印象付けるヘッダー画像の設置

Google・analyticsの設定が完了したら、次はヘッダー画像を設置します。ヘッダー画像はユーザーにネットショップを印象付ける重要な画像です。ユーザーを惹き付けて、興味を持ってもらえる画像を掲載するようにしましょう。

ヘッダー

ダッシュボードから「外観」→「ヘッダー」をクリックします。

ヘッダーイメージ

次に、「ヘッダー画像」をクリックします。

ヘッダー画像追加

新規画像を追加をクリックします。推奨サイズが表示されているので、近いサイスの画像を用意しておきましょう。

アップロード

画像選択

「ファイルをアップロード」をクリックして、「ファイルを選択」をクリックします。

選択

「代替テキスト」を記入して、「選択して切り抜く」をクリックします。次の画面で切り抜くがそのままの大きさで表示するか決めます。

ヘッダー画像をスライトショーにする

ヘッダー画像が静止画だと寂しいと言う方には、スライトショーを表示できる「Meta Slider」と言うプラグインを使ってスライトショーを表示することができます。

新規追加

ダッシュボードから「プラグイン」→「新規追加」を選びます。

meataslider

キーワードにMeta Sliderと入れると検索結果が表示されますので、「今すぐインストール」をクリックして、最後に「有効化」をクリックします。

metaslideropen

インストールが完了すると、設定の下にMeta Sliderが表示されますので、Meta Slider→Meta Sliderをクリックします。

初期

最初のスライドショーを作成の左側の+をクリックします。

選択

「ファイルをアップロード」→「ファイルを選択」をクリックします。

追加

選択した画像をスライダーに追加で追加します。

追加

ここで、幅や高さを希望の大きさに変更し、効果も変更できます。効果は画像が揃ってからプレビューを確認して変更することもできます。さらに「スライドを追加」で画像を追加します。

コード

「一般」タブの横にある「SEO」タブをクリックして、「画像の代替文字列」を記入します。ここにもターゲットキーワードを含む文字を記載します。画像が揃って、保存してプレビューでスライドショーを確認して、好みの効果や画像が変わる時間などを設定したら、右下のショートコードに記載されているコードをコピーして、header.phpのトップ画像のコードと置き換えれば完了です。

matasliderid

上記のようにheader.phpのコードを書き換えます。

<?php
echo do_shortcode(“[metaslider id=000]”);
?>

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

ネットショップに必要なスマホ対応とsitemapのプラグインをインストール

ネットショップ開業に必要なスマホ対応とsitemapのプラグインをインストールします

モバイル対応プラグインWPtouch

まず最初にインストールするのはスマホ対応をしてくれるWPtouchです。これをインストールすれば、あなたのネットショップはレスポンシブ対応のページへと変身します。検索エンジンを利用するユーザーの50%以上がスマホ経由になっていますので、スマホ対応は必須です。

wptouch

ダッシュボードから「プラグイン」→「新規追加」。キーワードにWPtouch Mobile Pluginを入れます。表示されたWPtouchを「今すぐインスール」をクリックして「有効化」になれば完了です。

「設定」→「WPtouch」→「setting」でいろいろ設定できますので、お好みで設定すれば良いでしょう。

次にモバイルページにもGoogle・analyticsのコードを貼り付けます。/ドメイン/wp-content/plugins/wptouch/themes/bauhaus/defaultからheader.phpをダウンロードします。

ダウンロード

wptouchhearder

WPtouchのheader.phpの</head>の直前にGoogle・analyticsのコード(パソコン版のheader.hphに貼り付けたものと同じコード)を貼り付けます。

アップロード

Google・analyticsのコードを貼り付けたheader.phpをアップロードします。これでWPtouchのプラグインは完了です。

Sitemapを送信するプラグイン

ホームページを更新した時にsitemapを送信するプラグイン

sitemap

ダッシュボードで「プラグイン」→「新規追加」をクリックして、キーワードに「Google XML Sitemap」を入れます。表示されたら、「今すぐインストール」をクリックして「有効化」になれば完了です。

Sitemap設定

次に「設定」→「XML-Sitemap」をクリックして、サイトマップのインデックスファイルのURLからsitemap.xmlをコピーします。

searchconsolesitemap

Search consoleに移って、該当するURLの「自分のサイトマップ」をクリックします。

sitemaptest

「サイトマップの追加テスト」をクリックします。

sitemap追加

sitemap.xmlを入力して「送信」ボタンを押します。すると、アイテムを送信しました。ページを更新する。をクリックすると、保留と表示されますが、しばらくしてSearch consoleにアクセスすれば、送信ページが増えているはずです。

sitemap設定

さらにsitemapの設定をします。基本的な設定で、「Google にブログの更新を通知」「Bing (旧名 MSN Live サーチ) にブログの更新を通知」「サイトマップの URL を仮想 robots.txt ファイルに追加 」にチェックを入れます。

投稿の優先順位は、「優先順位を自動的に計算しない」にチェックします。

Sitemap コンテンツで、サイトマップを送信したいページをチェックします。

含めないカテゴリーがあればチェックします。

更新頻度の設定は、クロール頻度の設定ですが、設定した通りにクロールしてくれるとは限りません。

優先順位の設定は、クロールの重要度を指定するものです。

以上の設定が終わったら「設定を更新」をクリックします。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

パンくずリストとSNS共有ボタンの設置プラグイン

SEOにも有効で、ユーザーに現在地を知らせるパンくずリストの設置

パンくずリストはSEOの上でもユーザビリティの上でもとても重要です。ネットショップを開業する場合は必ず設置しましょう。パンくずリストを設置するプラグインはBreadcrumb NavXTです。このプラグインもこれまでのプラグインと同様に「プラグイン」→「新規追加」でBreadcrumb NavXTを検索します。

Breadcrumb

「今すぐインストール」をクリックして最後に「有効化」をクリックしたら完了です。

Breadcrumbの設定

次にダッシュボードから「設定」→「Breadcrumb NavXT」をクリックします。

Breadcrumb詳細設定

パンくずの区切りが>で良い場合はそのままで、>>にしたい場合は&gt; &gt;にします。パンくずにホームページを含める。にチェックを入れて。「ホームページテンプレート」の%htitle%をHOMEに変更します。最後に変更を保存をクリックします。

hearder.phpの</header>の直前に下記のコードを貼り付けます。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

このコードで構造化データで設置することが出来ます。

SNSの共有ボタンを設置するWP Social Bookmarking Lightプラグイン

SNSの共有ボタンを設置することで、ページを読んで気に入った人が拡散してくれる可能性が高くなります。

SocialBookmarking

これも他のプラグイン同様、ダッシュボードから「プラグイン」→「新規追加」。キーワードにWP Social Bookmarking Lightを入れると表示されますので、「今すぐインストール」をクリックして最後に「有効化」をクリックすれば完了です。

SocialBookmarking設定

インストールが完了したら、ダッシュボードから「設定」→「WP Social Bookmarking Light」をクリックします。

SocialBookmarking表示位置

SNSの共有ボタンの表示位置を選択します。

SocialBookmarkingリンクの選択

個別記事のみ:YES。ページ:YES。サービスで共有するSNSを選びます。右側にあるSNSの中から設置する項目を右から左へドラッグして、全てのドラッグが終了したら、「変更して保存」をクリックすれば設定完了です。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

WordPressでSEOと投稿順序を変更するプラグイン

SEOの設定をするPlatinum SEO Packをプラグイン

WordPressはSEOに有利と言われていますが、インストール状態のままだとSEOに強いとは言えません。SEOのプラグインとして「All in One SEO Pack」がよく紹介されていますが、descriptionが反映されない問題が出たりするので、私は「Platinum SEO Pack」を利用しています。

PlatinumSEOPack

これも他のプラグイン同様、ダッシュボードから「プラグイン」→「新規追加」。キーワードにPlatinum SEO Packを入れます。表示されたPlatinum SEO Packを「今すぐインストール」をクリックして、最後に「有効化」をクリックすれば完了です。

PlatinumSEOPack設定

次にダッシュボードの「設定」からPlatinum SEO→Platinum SEOで設定画面を表示して、Home TitleとHome Descriptionを記載します。

SEOフォーマット

FormatはTitleに記載される文字列です。デフォルトだと、トップページで同じTitleが二回表示されたりしますので、上記のように変更します。

自動生成された説明

Autogenerate Descriptionsのチェックを外します。ここにチェックがあると、自動生成された説明が有効になって、ページ作成時のDescriptionと合わさって1ページに2つのDescriptionが表示されてしまいますので、必ず外すようにして下さい。最後に下へスクロールしてUpdate Optionsをクリックして終了です。

投稿を並べ替えできるPost Types Order

ブログは基本的に投稿順に掲載されて新しい投稿が最初に来ます。ただ、ネットショップの場合、投稿の新しいものが先頭に表示されては不都合な場合もありますので、その投稿順序を変更できるプラグインです。

PostTypesOrder

ダッシュボードで「プラグイン」→「新規追加」でキーワードにPost Types Orderを入力します。表示されたPost Types Orderを「今すぐインストール」をクリックして最後に「有効化」をクリックすれば完了です。

PostTypesOrder設定

次に「設定」→「Post Types Order」で設定画面を表示して、このプラグインを利用できる最小限を管理者にします。管理画面での並び替え有効化にチェックをして「設定を保存する」をクリックします。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

Welcartのインストールから配送設定まで

ネットショップに必要な、WordPressで無料で設置できるショッピングカート、Welcartを設置します。

welcart

ダッシュボードから「プラグイン」→「新規追加」で、キーワードにWelcartと入力します。表示されたWelcartの「今すぐインストール」をクリックして最後に「有効」になれば完了です。

基本設定

基本設定

ダッシュボードの「Welcart Shop」から「基本設定」を行います。ショップ設定で、企業名や住所、メールアドレスなどを入力します。送料無料の条件があれば入力します。例えば1万円以上送料無料なら10000と入力します。

代引き手数料がお買い上げ金額によって変動する場合は、「詳細設定」をクリックして表示されるポップアップで「手数料のタイプ」で変動額をチェックします。下のお買い上げ金額、手数料を入力します。行が足りない場合は「行追加」をクリックすれば行が追加されます。

振込先口座情報も入力します。

会員システムを利用する場合は「利用する」。会員ポイントを付与する場合は「付与する」。付与するポイントなどを決めます。

支払い方法は、今の時点では「代金引換」のみです。支払い方法名に「代金引換」と入れて、決済種別で「代金引換」を選択します。以上まで終わったら「設定を更新」をクリックします。

営業日設定

営業日設定

ダッシュボードの「Welcart Shop」から「営業日設定」を行います。配送業務休日の日をカレンダーでクリックすると色が変わりますので、休業日を設定します。休業日の設定が終了したら、「設定を更新」をクリックします。

配送設定

配送設定

ダッシュボードの「Welcart Shop」から「配送設定」を選びます。配送業務締時間は商品発送を締め切る時間を指定します。この値は最短発送日を算出するために使用します。「発送方法」の「新規追加」で「配送名」を入力します。複数の配送名を指定できます。

次に配送地域を選択します。国内便のみなのか、国際便も対応するのかを選択します。

指定時間帯は配達時間の指定が可能な場合の時間帯を入力します。

次に送料が配送温度帯や配送地域によって違う場合や商品によって送料無料にする場合は「送料を固定しない」を選択します。

次に送料を設定します。「新規追加」で温度帯がある場合は「常温」や「クール」を新規追加します。「送料無料」がある場合も追加します。そして、それぞれの都道府県の送料を入れます。「送料無料」の場合は全ての都道府県に0を入れます。

さらに、「送料」のタブの横の「配達日数」をクリックして、都道府県別の配達日数を入れます。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

Welcartのメール設定とシステム設定

Welcartのメール設定

メール設定

Welcartのメール設定は、ネットショップでは絶対に必要な、注文確認メールなどの設定です。「Welcart Shop」の「メール設定」から行います。メールの各種類の署名部分を記載すれば、お客様名と注文内容は自動的に挿入されますので、署名部分を記載して、「設定を更新」をクリックすれば完了です。

Welcartのシステム設定

システム設定

Welcartのシステム設定は、「Welcart Shop」の「システム設定」から行います。決済モジュールパスは自動的に設定されているはずなので、SSLを使用するをチェックして、WordPressのアドレス(SSL)とサイトのアドレス(SSL)を入力して「設定を更新」をクリックします。

国、言語、通貨の設定

国の設定

フロントエンドの言語を「ja」。通貨表示「日本」。住所氏名の様式「日本」。販売対象国「日本」を選択して「設定を更新」で完了です。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

Welcartのクレジット決済設定

クレジット決済の設定

クレジット

「Welcart shop」から「クレジット決済設定」を選択すると上記の画面が表示されます。

ゼウス

利用できるクレジット決済代行会社から利用したい会社を右上にドラッグします。ドラッグしたら、「クレジット決済会社を更新する」をクリックします。

ゼウスの場合は、メールで資料請求→契約申し込みになります。

支払い設定

契約申し込み後、審査が完了したら、「Welcart Shop」で「基本設定」を選び、「新しい支払い方法を追加」で「決済種別」を選択します。CGIの設定などは全く必要ありません。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善

Welcartで新規商品追加

Welcartで新規商品を追加する方法

新規商品追加

ネットショップには必ずある商品の登録です。商品コード、商品名を入力します。SUKコードは在庫管理用のコードです。売価とSUK表示名を入力します。

商品にサイズやカラーなどの選択肢がある場合は、「オプションを適用する」で「セレクト値」を入力して、選択項目を入力します。

商品詳細本文で、商品の説明を記載します。さらに商品画像は「メディアを追加」から画像を配置します。メイン画像のファイル名は商品コードと同じ名前にして下さい。同じファイル名にすると、商品マスターでサムネイルが表示されるので、商品管理がしやすくなります。

本文が出来たら、TitleとDescriptionを記載して、「公開」をクリックすれば注文ページが出来上がります。

ネットショップ開業方法と比較 ・売れるネットショップ ・WordPressでネットショップを作る ・ネットショップ開業後の改善