【更新終了】素人がWordpressでサイトをつくれなかった（XAMMP⇒さくらサーバー）
本稿は、素人が「ローカル環境を本番環境に実装する」という方法で、ホームページをリニューアルしようとした結果、うまくいかず、挫折した経緯のログです。
結局わからなかったし、作業の間に色々あって、当初の予定どおりにできなくなってしまったので、「ローカル環境を本番環境に実装する」に関しては、挑戦と学習を続ける機会を失ってしまいました。
以降は以下の記事で更新しますが、挑戦の経緯は何かの役に立つ可能性があるのでこのままここに残しておきます。
素人がWordpressでサイトをつくれなかった（XAMMP⇒さくらサーバー）
行き当たりばったりで素人が、Wordpressを使ってWEBサイトをつくることになったので、過程をまとめることで自分の備忘録とする。
この「備忘録にする」というのは本当に大事で、私のように本職が立て込むと一週間とかザラに作業の間が空いてしまう人間は、何をどこまでやったか分からなくなるし、noteにメモしておくことで、大変助けられている。
※11/14記事作成、11/25更新、12/11更新終了(挫折)
今回やったことまとめ
①XAMPPのローカル環境で、Wordpressサイトをつくって動かす
②XAMPPのローカル環境にあるWordpressサイトを、Xfreeサーバーに実装できなかった
③Xfreeサーバーで、Wordpressサイトをつくって動かす
④XfreeサーバーにあるWordpressサイトを、さくらインターネットのステージングサーバーに実装できなかった
⑤さくらインターネットのステージングサーバーで、Wordpressサイトをつくって動かす
⑥さくらインターネットのステージングサーバーにあるWordpressサイトを、本番用のさくらサーバーに実装できなかった
⑦本番用のさくらサーバーで動いていた、既存のサイトが吹っ飛んだ
素人がWEBサイトをつくることになった経緯
私は地元で、NPO法人の地域活動に参加しています。団体の事務所では、いつもボランティアさんが1～2人、事務作業をしてくださっています。
ただ、ここ数年、そこそこ集客が出るようになったことで、電話やらメールやら、「よくある質問」をホームページで掲載すれば済むような問い合わせが増えてしまい、ボランティアさんの他の作業に差し障るようになっていました。
それでも2019年までは既存のWEBサイトをコツコツ更新して耐えていたのですが、デザインが古すぎて、官公庁のホームページ（特にわかりにくいやつ）みたいというか…。
で、とうとう、2020年に向けて新しくホームページをリニューアルしよう！となったのです。が、私たちの会にはWEBやITの専門家も、デザイナーもいなかった。とりわけ深刻なこととして、お金もなかった。
…というか、WEBサイトにお金をかける意義をわかってくれるメンバーがいなかった。リニューアルしよう！って本気で言ってる？
仕方ないので勉強がてら、自分で作ってみようと思い立ちました。このときは、持ち前のクリエイター魂というか、テンションというか、まあいけるっしょ！という気持ちだったので、このあとの苦労は知る由もありません。
ちなみに作業を始めたのは2019年の10月10日、現在が11月14日で、目的のWEBサイトは2020年1月1日のリリースを予定していました。
はじめに/目的
今回は、Wordpressという機能（システム？）を使っています。
とても素人なのでよくわかっていないのですが、インターネット上には”言語”というルールが存在していて、「白い背景にします」とか「上から何ピクセルのところに文字を並べます」とか、画面に表示する内容を”言語”で指示書にまとめて発信すると、同じ”言語”を持っている者同士なら解読できて、画面に表示できますね…とこういうことみたいです。
IEとかFirefoxとか、ブラウザーと言われるやつは、言語の指示書を読み取って画面に表示するためのソフトということのようで。私はMicrosoftEdgeを使っています。
Wordpressとは、アナログに言語を記入しなくても、簡単な操作で言語を操ってウェブサイト作りができるよう、面倒な部分をシステム化したもの…だと私は認識しています。多分あってるはず。
世の中は日進月歩で、言語もシステムも更新されています。バージョンというやつです。できることが増えていくんですね。ただ、受け手側の言語バージョンが古すぎると、新しい言語で書かれた指示書には、古い言語ではできないことが書いてあるので、上手に表示できません。
Wordpressもまた、言語のバージョンに合わせてシステムを更新しているので、「言語」と「言語のバージョンに対応したバージョンのWordpressシステム」を組み合わせて使います。
基本は「最新の言語」「最新のWordpressシステム」を保ち続けるのが、一番安パイと言われていますけど、新しいものには未知のエラーがあるときも多いので、必ず最新が良いかは自己判断だったりします。
今回は、めっちゃ古い言語の既存サイトを、最新の言語の新サイトに更新します。
最悪の場合に備え、万が一ミスっても既存の本番サイトに帰れるようぎりぎりまで保険をかけつつ、新サイトにまるっと載せ替えをしたい！というのが私の目的です。
基本情報・使用バージョンについて
●既存の本番サイト：さくらサーバー(PHP 5.2.17, **MySQL **5.1)、Wordpress 3.9.29(カスタムテーマ)
※さくらサーバーを開設してWordpressを導入した人、Wordpressをカスタマイズしていた人、いずれも私(筆者)ではなく別の方です。彼らもプロではないので詳しくなく、聞くより自分で研究したほうが早いなと判断して今回手探りの作業しています。ただ、本当は新しいサーバーを借りてゼロからサイトを立ち上げる方が楽なんだと思います。
●準備した新サイト：XAMPPローカル環境(PHP 7.3.10, **10.4.8-MariaDB)、Wordpress **5.3(Nishiki テーマ)
●経由に利用した仮サーバー：Xfreeサーバー(PHP 7.2)
※経由とかしなくても作業できたのですが、それがわかったのは後からでした。
XAMPPでローカル環境を立ち上げる
Wordpressを使おうとおもうと、言語が動く環境とか、データベース？とかいうものが必要なようです。このあたりはまだよくわかっていません(11/14現在)。
ローカル環境、というのは「ネット上ではない(地元/自分の範囲)」という意味です。ホームページをつくるにあたって、まずはネットに乗せず、PCの中だけで仮想的にテストサイトをつくって動作確認しよう！という話です。
ただ、素人がWEBサイトをつくるにおいて、ローカル環境を立ち上げてまで作業する必要があったか？というと、答えは否でした。
ネットでホームページの作り方を調べていると、当たり前のように、ローカル環境で準備してから本番環境に移しましょう！とある。だから鵜呑みにしたのだが、別に機密情報でもないし、レンタルサーバー借りてBASIC認証かけて作業しても一緒だった。何ならそのほうがもっと簡単に引越し出来たかもしれない。
特にXAMPPの導入説明などはありません。なぜなら、私は全てこのバズ部さんの記事のとおりにローカル環境を立ち上げただけだから。
普段、家人が料理をしているのを見て、「いや先にレシピの手順を見ておけよ」と思うことが多い。ただ、これは、レシピ本には往々にして、中盤に差し掛かって”予め下ごしらえをしておいたもの”の登場…とか、手が粉だらけの段階で大さじ２杯の調味料…といったビックリがあることを既知だからこそ、先に手順を読んでおくという知恵がついている話。彼は料理初心者なので、そこは責められない。
つまり、私が全工程を把握せずにXAMPPでローカル環境を立ち上げたことも、私はWEB初心者なので特に責められることではないはず。
テストサイトを完成させる
XAMPPが動いて、Wordpressのダッシュボードにログインできたら、好きなようにサイトをつくります。
Wordpressでどうやってサイトをつくるのかは、沢山の先陣が指南していらっしゃるので、「Wordpress サイト はじめる 初心者」とかで検索してください。
ゼロから作るのと違って、Wordpressの良いところは、簡単にオシャレになる「テーマ」が配布されているところです。
現行サイトはカスタムテーマ、つまり自分で言語書き書きして触るようなプロ向けの状態になっているのですが、難しいばっかりでした。なるべくシンプルで操作性が直感的な既製品のテーマを使った方が素人には簡単です。
今回は、大変評判が良さそうな「nishiki」を使うことにしました。
無料版の時点で結構色々出来るのですが、Pro版になるとグンと操作性が上がります。ローカルのうちにPro版にした場合、本番環境乗せ替え後のライセンス認証がどうなるのか良く分からなかったので、私は本番リリース以降にPro版へバージョンアップをする予定です。
Wordpressテーマは無料の中から選んでも充分機能するものばかりです。ただ、無料サービスって、永遠にサポート/更新続けてもらえるとは限らないのが怖いところです。明日急に作者に「やーめた」って言われるかもしれないですしね。特に今回の私のように、ある程度しばらくは使っていこうと思っているサイトに実装するのであれば、なおさら。私は、手の届く値段であれば、課金して作者に還元して、使ってるよ！ありがとう！ってアピールするようにしています。なるべくお布施していくほうが、Win-Winな結果になりそうかなと思って…。ちなみに、購入ではなくお布施だと思った方が、万が一サポート終了されても悔しくないです。
もしかしたら、お試しダウンロードでPro版にしておいて、リリース後にライセンスの認証だけしたほうが、動作確認の意味ではリスク少なかったのかもしれないですが、いま完成したサイトをXfreeへの実装中なので、面倒ですし後でやることにします(11/14現在)。
とにかく、Wordpressのダッシュボードから色々操作して、ローカル環境内で新サイトを完成させることができました。今回は、Wordpressのダッシュボード以外からサイトに対し変更などは加えていません。
ローカルからオンラインに移行する
サイトが出来たので、いよいよ本番環境に移していきます。
私の本番サイトがあるさくらサーバーには、「さくらのバックアップ＆ステージング」という機能があります。めっちゃ画期的。テストサイトも作れるので、メンバーにもURLを共有して、事前にサイトの確認をしてもらうことができます。
詳しいこと・操作方法はこのサイトを読んだ方が早いです。
こりゃすごい！と、私もここに書いてあるとおりに作業をして、ステージングサーバーに既存サイトのスナップショットをセットするところまでは出来ました。
しかし、ここからエラーが頻出します。後日さくらサーバーに問い合わせたところ、Microsoft Edgeとは互換性がなかったことがわかりました。ただ、このとき私はエラーに混乱した結果、SnapUpを使うことができないと勘違いし、利用を一旦あきらめてしまいました。エラーと解決方法については別でまとめます。
（勘違いをしたまま）、ここからは手作業でサーバー内に、もう一度、作ったサイトを実装することにしました。
実装方法は３通りあった(11/15追記)
このあと、勘違いのまま進めるのですが、実際はSnapUpを使う場合も含めて、「ローカル⇒テスト⇒本番」の実装方法は３通りありました。
①ファイルマネージャー/MyPHPAdminを使いXfreeサーバーに実装⇒動作確認後、もう一度くり返し、本番さくらサーバーに実装。
②ファイルマネージャー/MyPHPAdminを使いXfreeサーバーに実装⇒SnapUpでスナップショットを撮ってさくらサーバーに実装
③ファイルマネージャー/MyPHPAdminを使いSnapUpのステージングサーバーに実装⇒スナップショットを撮ってさくらサーバーに実装
(12/11追記)結局、SnapUpのエラーが解決したので、さくらサーバーを使うなら③が一番簡単だったはずです。今回は、①でいくか②でいくか迷ったまま、とりあえずXfreeに実装をしていきます。
XAMPPからXfreeサーバーに引っ越す
いきなり本番環境に移した場合、私のような素人が触ると、サイトが吹き飛んで二度と戻らない可能性があります（※おそらく、さくらサーバーの場合、サーバー内の/home/アカウント名/wwwの下層を全てバックアップとっておいて、失敗したらまるっと消してバックアップを載せ直して…ってすると直る気がするのですが、確証はないです）。
加えて、リリース前に、テストサイトをメンバーに確認してもらおうと思っていました。SnapUpでステージングすれば早いかなと思ったのですが、それができない(と思っていた)ので、結局、Xfreeでサーバーを借りて、仮サイトを立てることにしました。
あと、一度失敗してもいい環境で試して、安心したかったのです。
ローカルから移行する方法は、こちらのサイトを参考にしました。Xサーバー（Xfreeの前身）を使っているので画面がわかりやすいです。
私はここで初めて、どうやらサーバーとデータベースと２つあるらしいということを知りまして、さっきまでのエラーの理由が少しわかってくるレベルの理解度です。
データベースの修正には、Dreamweaverを使いました。仕事でも活動でもDTPソフトは必須なので、AdobeCCを利用しています。毎月毎年お金を取られているので、使えるソフトは何でも使います。検索メニューの中に「置換」があり、変更前と変更後を入力して「すべて置換」を押せば、簡単に修正ができました。
修正したXfreeのデータベースにファイルをインポートする段で、いくつかのエラーがでました。これらは話が長くなるので別でまとめます。
同様にwp-config.phpと.htaccessの修正も行っていきます。これはXAMPPのサーバーなどを新規のXfreeのサーバー情報に書き換えていくだけなので、エラーなどなく簡単でした。
最後にFTPソフトを使って、Xfreeのサーバーにローカルのデータを乗せ換えていきます。フリーソフトのFFFTPを使っています。サーバーの設定さえ一度してしまえば、ドラッグ＋ドロップで簡単に作業ができるので、分かりやすくて嬉しいです。ちなみにコードの書き換えなどDreamweaverを使っているので、いちいち保存してFFFTPからサーバーを更新するより、こちらのFTP機能を使った方が本当はもっと早いです。
これでURLに接続すれば、サイトは移行できている！はずでした。
データベース接続確立エラーがでる
できたぞ！でもパーマリンクとか設定し直すのかな…？くらいは想定していたのですが、そもそもサイトURLを開いてもサイトどころか、エラーメッセージしか表示されませんでした。
Wordpressは、サーバーとデータベースが両方あって動く(らしい)のですが、このサーバーとデータベース間の接続がうまいこといかないときにこのエラーが出るようです。よくわからないので、こちらのサイトを参考に、自分でも調べながら作業をしていきます。
まずは、ユーザー情報が正しいか(＝さっき作業したwp-config.phpの書き換えが間違ってるんじゃないか)の、接続テストを行ってみます。
ひとつ新規のPHPファイルを作成して以下のコードを入力し、保存してサーバーにアップロードしました。再度ブラウザから「自分のサイトURL/今作ったPHPファイル名」へアクセスしてみれば、サーバーとデータベースの接続がチェックできます。
<?php
$link = mysqli_connect(' MySQL のホスト名', 'MySQL データベースのユーザー名', ' MySQL データベースのパスワード');
if (!$link) {
die('データベースにこの情報では接続できませんでした: ' . mysqli_error());
}
echo '入力された情報でデータベースに接続できました';
mysqli_close($link);
?>
ちなみにこのコード、様々なサイトで紹介されているのと少し違うのは「mysqli_」の部分、「myspl_」ではないということです。
さっぱり理由はわかってないのですが、「myspl_」だと、実行できません的なエラーが出てチェックができなかったのです。調べに調べて、XAMPPでローカルを組んだ人はそうらしいという、謎情報に従ったところ、このコードでチェックができました。
ただ、結果として私のwp-config.phpに入力されたデータベース情報は正しいようです。
パーミッションの変更もしてみました。FFFTPでwp-config.phpを右クリックすると「属性変更」が選べます。604から444に変更してみました（が、解決はしませんでした）。
そもそもこんなに頑張る必要があるのか？
先述の通り、このころにはさくらサーバーから問い合わせの回答があり、Snapupがうまく動作しないのはEdgeのせいだということがわかっていました。
前章まで必死に、慣れないコードの書き換えまでして、Xfreeへの実装を試みているのですが、じゃあXfreeに実装できたとして、そこからさくらサーバーへ実装がスムーズにできるのか？何の保証もありません。
私は今後またホームページをつくる予定もなく、今使っているホームページを外注せずに一人で使いやすくしたいだけでした。いきなり熱意を失ってしまって恐縮ですが、私のかける労力に見合わないように思えたのです。
そのため、ゼロに立ち返ります。
そもそもSnapupのステージングサーバー内に、テストサイトをつくり、それを実装すれば、既存のサイトもぎりぎりまで生きているし、まるっと載せ替えができてスムーズです。そのはずでした。
PHPの更新、そして終わり
Snapupは、ステージングサーバーを作った時点でWordpressが既にインストールされています。サイトをつくるのはすぐできます。
ただ、ここで私はその作業中に、ステージングサーバーのPHPのバージョンが、借りているさくらサーバーのPHPのバージョンと一致していないことに気が付きました。
さくらサーバーのコントロールパネルを見ると更新ボタンがあったので、気軽にポチッと、PHPの更新をしました。
その時サーバー上にはまだ、生きている古いWordpressのホームページがいました。
あとはお察しくださいといった塩梅です。
既存のホームページが完全に機能しなくなってしまったので、そもそもこのページで苦慮してきた、既存のサイトを活かしたまま安全に乗せ替えをするという目的は失われてしまいました。
ということで、突然ですがこの記事はここで終わりです。
続きはこちらで、新規にホームページを立ち上げていくことにしました。中途半場な記事で申し訳ないですが、以上が私のチャレンジ前半でした。ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？