こんにちは！
木曜担当吉見です。

ついに最終話！ということで、今回がストーリー仕立て「WordPressで作ったサイトを公開してみる」というブログの最終話でございます。
私はインクループ社長の両親が経営している、焼肉八起のHPをリニューアルする担当を任されており、
本日9月1日、やっと公開の準備が整い、公開する日がやって参りました！

これまでの悪戦苦闘した公開までの道のりを振り返ってみると…

• WordPressをxamppでローカル環境で構築してみた（←網干さんブログはこちら）
• 移植前の準備 動作確認用URLの設定（その1）
• ローカル環境からインターネット上のサーバへ移植するための準備とMySQLの設定との闘い（その2）
• 動作確認URLの状態から正式なURLへの公開作業（その3：今回最終話！）

ローカル環境で作ったWordPressのWEBサイトをローカル環境からインターネット環境に移設するだけのことに3回もブログを費やしてしまいました。。。何もかも初めての私が自分の備忘録的に書いている内容でもあるので、素人じみた内容でわかりずらい部分も多々あったかと思いますが…
少しでも見てくれた方、ありがとうございます！(*´ω｀)

では最終回も元気にいきましょ～♫

まずは要点から！

※八起のHPはサーバーを移行するので、サーバー移行の手続き等も今回紹介してます。
以下は今回の手順を要点にまとめました。
①公開作業をするにあたって、工事中の表示を予め作っておく
②工事中の表示が今のURLで見れるか確認
③ドメインネームサーバーの情報を変更
④ネームサーバーの変更した情報が反映されたのを確認
⑤お疲れ様でした！完了！

まずは工事中を表すページを作成

今まで使っていたサーバーを変える手続きの関係上、HPが見れない時間がでてくる可能性もあるため、
「八起のHPは現在工事中だよ！ちょっと待ってね！」と表示がでるように、ページの作成をしました。

電話番号のところはスマホならクリックすると、電話できる仕様になっているんです。
もしお客様がHPに訪問して、HPが見えない！なんてことになったら大変ですもんね。

デザインはこんな感じです。

この工事中ページ（index.html）をXサーバのyakiniku-yaoki.com/public_htmlの階層に入れておきます。（cssとimagesも入れています）

このようにしておけば、この後に設定するネームサーバの変更をした時にyakiniku-yaoki.comで見てみると、作った工事中のページが出てくるはず！！
ちなみにXサーバのデフォルトのindex.htmlだとこのように表示されてしまうので、工事中のページに置き換えたわけです。

ネームサーバーの情報を変更する

※今回の解説はお名前.comの場合です。

では、実際にyakiniku-yaoki.comをブラウザで見たら、ちゃんと制作したWEBサイトを見ることができるようにしていきたいと思います。

「八起のドメイン（yakiniku-yaoki.com）は、お名前.comで管理してるから、ログインしてネームサーバーを変更するだけだから簡単だよ！」
と社長に言われたので仰るとおりに作業を進めていきます。

お名前.comにログイン → 「Navi TOP」→ネームサーバ「変更する」をクリックします。

次に、使用しているレンタルサーバーはXサーバーなので、Xサーバーのネームサーバーを確認し、これをお名前.comのネームサーバーに入力します。（Xサーバーの場合の解説になります）

「他のネームサーバーを利用」→「ネームサーバーを入力」

Xサーバにログインして、サーバ情報をクリックするとネームサーバ一覧を確認できます。

Xサーバーのネームサーバーを、お名前ドットコムのネームサーバーに入力していきます。

入力し、保存をすると受付完了の画面がでてきます。

これでネームサーバーの設定は終わりです。
※ネームサーバの切り替えはすぐには反映されません。早くて数時間はかかりますのでご注意を。

ネームサーバーの切り替えが反映されるとどうなるか？

今まではyakiniku-yaoki.comにアクセスすると、以下のページが表示されていました。

今回実施したネームサーバーの情報が反映されると、最初に作ってアップロードしておいた工事中の画面が表示されるようになりました！！

ネームサーバの設定無事完了です！

工事中の画面からWordPressで作ったWEBサイトに切り替えます

次に、リニューアルしたWEBサイトをhttp://www.yakiniku-yaoki.com/でアクセスした時に表示したいので、WordPressのダッシュボードにログインし、一般設定からURLを変更します。

※これで変更を更新すると、このサイトにアクセスできませんという画面がでてきますが、エラーではないのでご安心を。

ルートディレクトリのファイルの修正

次に、ファイルを修正してルートディレクトリ（対象のURLをブラウザで表示した時に最初に参照されるディレクトリ）に設置していきます。

WordPressをインストールしたディレクトリ（今回の例だとwp）に”index.php”と”.htaccess”のファイルがあるので、この両方のファイルをルートディレクトリにコピーしてしまいます。

（このあたりの詳しい内容をコーダーの網干さんがブログに書いてくれています。詳細はこちら）

これら2つのファイルをパソコンのデスクトップなどに一度ダウンロードしておいて・・・

”index.php”ファイルをテキストエディタで開き、

“/wp-blog-header.php”の部分を”/wp/wp-blog-header.php”に修正します。

※赤字の部分は今回はwpというディレクトリでしたが、WordPressをインストールしているディレクトリ名を指定してくださいね。

上書き保存したindex.htmlをルートディレクトリにアップロードします。.htaccessも忘れずにアップロードしてくださいね。

あと、工事中を表すindex.htmlは削除してください。index.htmlとindex.phpが同じディレクトリにあると、index.htmlが優先的に表示されてしまいます。

これでルートディレクトリのコピーと修正は完了です。

ここまで設定が終わったら、ブラウザを起動してhttp://www.yakiniku-yaoki.com/にアクセスしてみると・・・

リニューアルしたHPがでてきてくれました！！

ブログや固定ページが表示されない時はパーマリンクの設定を変えてみましょう

ここまでの作業が正しく完了していれば、指定したURLをブラウザで表示してみると、作ったWEBサイトが閲覧できるはずです。しかしながら、下層ページが正しく表示されない時があります。そんな時はパーマリンクの設定を一度デフォルトに戻してから、希望のパーマリンクに戻すと直るそうです。

先ほど、WordPressの一般設定で変更したURLからWPのダッシュボードに入ります。
ネームサーバの情報が反映されていれば、すでにURLが動作確認用URLから実際に使用するURLでも参照することができるはずなので、“http://XXXXX/wp/wp-admin”がログイン用のURLとなっているはずです。

「設定」 → 「パーマリンク設定」
一度基本に戻して、変更を保存した後、元のパーマリンクに戻して、再び保存します。

下層ページが表示されない問題が直ったことだと思います。（私はこれに何度もやられてます・・・）

下層ページも正常に表示されれば、これにて作業は完了です！
お疲れ様でした！

★注意点★

キャッシュが残っている際に、更新ボタンを何度押してもきちんと更新されない場合があります。
シークレットモードで新しくブラウザを立ち上げる、または他のブラウザ、スマホで見るなどいろいろなブラウザから見てみてください。
（実際にできているのに、キャッシュのせいでうまく更新されてなく、何度も戻したり試行錯誤してしまいました）
このおかげでなにをやってもできないじゃないか！と私の苦手意識も強くさせてくれました( ;∀;)(笑)とほほ

ぜひ試してみてくださいね(*’▽’)