こんにちは!埼玉県でWordPress講座を開催しています、STEP WILLのSeitoです。
今回は超初心者シリーズ第2弾で、エックスサーバーでWordPressをインストールする方法を画像を交えてお伝えします。
この記事を読むことで次の事が出来るようになります。
- エックスサーバーの契約
- 独自ドメインの取得
- 独自ドメインとエックスサーバーの連携
- 独自ドメインのSSL化(HTTPS化)の設定
- 独自ドメインのリダイレクト設定
- WordPressのインストール
です。
私はウェブエンジニアとして、述べ200件以上のWordPressのお困り事や立ち上げのお手伝いを行っており、初心者でも自分で出来る所まででも出来たらより費用を抑えてWordPressを立ち上げることが出来ると思い今回この記事を書くことにしました。
もし、1から一緒に立ち上げを手伝って欲しいという場合は、1日立ち上げプランもございますので、お気軽にご相談下さい。
エックスサーバーでWordPressのサイトを立ち上げるのに掛かる大体の時間
エックスサーバーでサイトを立ち上げるのに掛かる時間は大体1時間半位を考えて下さい。
作業自体は多くは無いのですが、連携した独自ドメインがサーバーで使えるようになるのに大体1時間くらい掛かります。(タイミングにもよりますが、それより早いときもあればもっと掛かる場合もあります)
作業の流れ
作業の流れはこんな感じです。
- エックスサーバーの契約
- エックスドメインで独自ドメインの取得
- エックスサーバーと独自ドメインの連携(ここで約1時間くらいの待ち時間があります。)
- WordPressのインストール
- HTTPSリダイレクトの設定
エックスサーバーの契約
先ずはエックスサーバーの契約をしましょう。
すでにエックスサーバーを契約している方は契約後の設定から見ていただいても大丈夫です。
》エックスサーバーの公式サイトはこちら
エックスサーバーのトップページに移動したら、赤線で囲んだ「お申し込みはこちら」をクリックします。
「新規お申込み」をクリックします。
「初期ドメインを設定します」の所は、契約時に無料で貰えるドメインを設定します。
これは独自ドメインとは違って、末尾に「.xsrv.jp」が付くので独自ドメインではないのでご注意下さい。
プランは、最初はX10のプランで充分ですのでX10を選びましょう。
他の項目は、入力項目に沿って入力していきましょう。
ページの最後に「お申し込み内容の確認」をクリックします。
「お申し込みをする」をクリックします。
この後、登録時に入力したメールアドレスにメールが届くのでメールを確認します。
すぐにこのようなメールが届きます。
このメールの中に、ユーザーアカウント情報が載っていますので、アカウント情報を見ながらエックスサーバーにログインします。
再度エックスサーバーのトップページに移動し、「ログイン」をクリックします。
先程のメールに書いてあった、ユーザーアカウント情報の会員IDとパスワードを入力してログインします。
無事ログインできました。
以上でエックスサーバーの契約の手続きが終わります。
今の段階ではエックスサーバーはお試し契約になっているので、本契約するために料金のお支払いをするのを忘れないようにしましょう。
次は独自ドメインの取得を行います。
独自ドメインの取得とエックスサーバーとの連携
これから独自ドメインの取得を行いますが、その前にドメインを取得する為のポイントをお伝えします。
独自ドメインを取得する会社を選ぶ基準
ドメインとはそもそも何かというと、実生活を例えると住所にあたるものです。
サーバーが土地、でWordPressが家のようなもので、ドメインがその家が建っている住所となります。
独自ドメインはインターネット上では、年間1,000円程度で購入(契約)する事が出来るのですが、初心者が独自ドメインを取得する場合は必ずサーバー会社(ホスティング)が推奨しているドメイン提供会社を選んで下さい。
なぜかというと、連携が簡単だからです。
恐らく、ホームページをまだお持ちで無い方でも、なぜか皆知っているドメイン提供会社で「お名前.com」という会社が有りますが、ここは初心者には絶対にお勧めしません。
私はお名前.comさんを利用させていただいていますが、これは私がエンジニアで使い慣れているから使えている話で、初心者には難しすぎると思います。
安いといっても、年間数百円程度ですので、初心者の方は必ず契約するサーバーと連携が簡単な所を選んで下さい。
そして、エックスサーバーの場合はエックスドメインがそれにあたる会社ですので、エックスドメインから独自ドメインの取得を行いましょう。
独自ドメインの取得
これからエックスドメインでドメインを取得しますが、エックスサーバーと会員情報も連携できるので、エックスドメインに移動する前に、必ずログインしてから下のエックスドメインのリンクから移動しましょう。
ページを開いたら「取得希望のドメイン名を検索」に取得したいドメインを入力して「検索」をクリックします。
すると、取得可能なドメインが表示されますので、取得したいドメインにチェックを入れて取得します。
※今回はこの記事用にお手本としてtedask.xyzという激安なドメインを取得していますが、私は基本的にこのxyzなどのあまりメジャーじゃないドメインはおすすめしていませんので、注意して下さいね。
ちなみにおすすめしない理由は、怪しいサイトと思われてしまうことや、2年目以降のドメインの契約価格が急激に上がることがあるからです。
お支払い情報を入力したら、「お申し込み内容の確認」をクリックします。
ここではチェックポイントが2つあります。
1. お申し込み内容の、「アカウント情報」が取得したいドメインになっているかを確認します。
2. 会員登録情報の会員IDがエックスサーバーの会員IDになっているかを確認します。
これが問題なければ、利用規約の「同意する」にチェックを入れて「申し込む」をクリックします。
そうすると、取得完了画面がでますので、ログインをクリックします。
ログインをクリックすると、エックスサーバーの管理画面に移動します。
そして、先程レンタルしたサーバーの下に、取得した独自ドメインが追加されているのが分かりますね。
エックスサーバーの提供しているドメイン発行会社なので、こうして同じ管理画面でドメインとレンタルサーバーが管理できるので、それも大きなメリットですね。
しかもこの時点で、すでにエックスドメインとエックスサーバーの連携は済んでいますので、あとはエックスサーバーの方で独自ドメインの追加をこれからやっていきます。
ご契約一覧の先程契約したサーバーの「サーバー管理」をクリックします。
サーバーパネルが表示されますので、右のドメインの項目の「ドメイン設定」をクリックします。
ドメイン設定のページに移動したら、「ドメイン設定追加」のタブをクリックします。
そうすると、上の画像の様なドメイン追加用のページになるので先程取得した独自ドメインを「ドメイン名」に入力します。
「無料独自SSLを利用する(推奨)」と「高速化・アクセス数拡張機能・・・・」にもともとチェックが入っていますので、そのままで「確認画面へ進む」をクリックします。
ドメインが間違いないことを確認して、「追加する」をクリックします。
独自ドメインの追加設定が完了しました。
それでは早速、追加した独自ドメインのURLをクリックしてみます。
すると、こんな画面になるはずです。
これは独自ドメインをサーバーに追加したばかりなので、準備中として表示される画面です。
本当に早いときは30分くらいで表示されることがあるのですが、今回は1時間くらい掛かりましたので、気長に待ちましょう。
使えるようになるとこの画面になります。
この画面になったらついでに確認したいのが、SSL化も完了しているかなのですが、アドレスバーに独自ドメインの前のhttp://tedas.xyzのhttpの部分をhttps://に変更してアクセスしてみましょう。
そうすると、こんな風に鍵マークが付くようになっているはずです。(これはFirefoxでの例ですが、chromeでもIEでも鍵マークが付きます!)
もし、こんな感じで安全な接続ではありませんと表示された場合は、まだSSL化の設定がエックスサーバー側で完了していないので、鍵マークが出るまで待ちましょう。
もしくは、SSLの設定がちゃんと行われているかを確認しましょう。
以上で、独自ドメインの取得からドメイン設定までになります。
次はいよいよWordPressのインストールになります。
エックスサーバーにWordPressをインストール
ここからは、連携が完了した独自ドメインでWordPressのインストールを進めて行きます。
サーバーパネルのトップに戻ります。
サーバーパネルの下の方に「WordPress簡単インストール」をクリックします。
WordPress簡単インストールのページに移動したら、まずタブの「WordPressインストール」をクリックします。
インストールURLは先程取得した独自ドメインを選択しますが、www無し、www有りを選択できるのですが、どちらでも好きな方で大丈夫です。
ドメインの選択横の空欄は何も入力しないでください。
「ブログ名」はこれから立ち上げるサイトの名前を入力しますが、これは後からでも変更できますので決まっていなければ適宜入力して下さい。
「ユーザー名は」WordPressの管理画面にログインする時に使うアカウント名ですので、半角英数字で入力しましょう。
「パスワード」も同様にWordPressの管理画面にログインするためのパスワードですので、適宜設定します。
「メールアドレス」はWordPressで今後何かあった場合連絡先として登録するメールアドレスで、一般的にはPCのメールアドレスやGmailを設定する人が多いです。
「キャッシュ自動削除」はONにするを選択します。
「データベース」は自動でデータベースを生成するを選択します。
全て入力が終わったら、「確認画面へ進む」をクリックします。
確認画面が表示されますので、「インストール」をクリックします。
約1分くらいでWordPressのインストールが完了して、この画面が表示されます。
この内容は必ずメモ帳などに控えるようにして下さい。
※次の作業が続くので画面はこのままで!
以上で、WordPressのインストールが完了です。
次は最後の作業で、常時SSL化(HTTPS化)の設定をします。
WordPressサイト常時SSL化(https化)の設定
WordPress側の設定
先ずはインストールしたばかりのWordPressの管理画面からアドレスをhttpからhttpsに変更する作業を行います。
先程の画面から、WordPressの管理画面にログインしますので、赤で囲んでいるURLをクリックします。
もし、前の画面を閉じてしまった場合は、
http://取得した独自ドメイン.XXX/wp-admin/
とアドレスバーに入力することで、管理画面のログイン画面に移動することが出来ます。
一度アクセスしたら、ブックマークしておきましょう。
すると、WordPressの管理画面のログイン画面になりますので、先程入力したユーザー名とパスワードでログインをします。
無事管理画面に入ることができました。
そうしたら、まずhttpsに変更するために左メニューの「設定」→「一般」をクリックします。
一般設定の画面に移動したら、「WordPressアドレス(URL)」と「サイトアドレス(URL)」の2箇所をhttpからhttpsに変更します。
httpにsを追加するだけですね。
入力が終わったら、画面下にある「変更を保存」をクリックします。
そうするとまたログイン画面になるので、先程と同様にログインします。
ログインができたら、画面左上にある「サイトを表示」をクリックして、サイトを表示してみます。
こんな画面が出たら、OKです!
あと、ついでにアドレスバーも確認して、鍵マークが付いているかも確認します。
こうなっていたら、OKです。
サーバー側での設定(リダイレクト処理)
そして、最後にやらなければいけないのが、リダイレクト処理というもので、現在の状態だともしhttpでアクセスしたら折角httpsを設定したにもかかわらず、httpでアクセス出来てしまう状態なのでこれを強制的にhttpsへ飛ばす設定を最後に行います。
今度はエックスサーバーのインフォパネルに移動します。
インフォパネルは契約一覧などが載っているページで、コントロールパネルとは違うページですのでお間違いないようにして下さい。
そして、サーバーの「ファイル管理」をクリックします。
そうするとこのような画面になると思いますが、先程登録した独自ドメインのフォルダがあるはずなので、それをクリックします。
今度は、「public_html」のリンクをクリックします。
次画面では、WordPressが問題なくインストールされていれば必ず「.htaccess」というファイルがありますので、「.htaccess」の行のチェックボックスをチェックして、ファイル操作の「編集」をクリックします。
そして開いたファイルに、以下の文字を上の画像のように、追加で入力して「保存」をして下さい。
RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
設定はこれで完了です!
そうしたら、またWordPressのサイトを表示して、httpでアドレスを入力してもhttpsに強制的になるかを試してみます。
この状態で、エンターを押すと
無事常時httpsに強制的に変更されていますので、常時SSL化の設定ができました。
※このURLはあくまで私の独自ドメインの例ですので、当然ですが取得した独自で試験して下さいね。
これで、エックスサーバーでWordPressをインストールするまでの全工程が完了しました!
お疲れさまでした!
最後に
こちらの設定がご自身で出来そうでしたら、是非トライしてみてください。
もし、少しでも不安があったり、この先のWordPressの設定やテーマの設定が大変に感じる場合は是非1日WordPress立ち上げ講座をご利用下さい。
この記事の中で躓く点など分からない事があれば、お気軽にお問い合わせくださいね!
コメント