ぼちぼちだけど記事が増えてきてサイトの方向性が定まってきたのと見にくくなってきたので思い切ってデザインを変えました（といっても大きな変化はないw）
〈ヘッダーにグローバルナビを設置して全体の色配置もすこし変えてみた〉
プラグインを使わずにバックアップとお引越し作業したよ！
現サイトのコピーをLocalに入れる→Localで編集→現サイトへアップ
という感じでテストサイトを作って作業しました。
理解できたらプラグインなしでも結構簡単だった！！！ってことでまとめてみる。
プラグインを使わない理由
プラグインを使えばもっと簡単に作業は出来るけど…
- 無駄にプラグインを増やしたくない
- プラグインに頼らず作業出来るようにしておきたい
（バックアップなどもプラグインが使えなくなる可能性を考えると手動も出来るようにしておくべき？）
という感じでやりたいのでやっています。
使用したソフト等
今回リニューアルに使用したものたち
WordPressサイト（リニューアルするサイト）
Local（ローカルテスト環境ソフト）
サーバー管理画面（Xserver）
FileZilla（FTPソフト）
テキストエディタ（Dreamweaverなど）
LocalもFileZillaも無料で使えるし、
この方法を覚えておけばサイト構築の練習→実際にサーバーへアップロードも簡単に出来る！！
今回使った無料ソフトはこちら
今回の方法はWordPressの中身を丸ごとLocalに移して（いわゆるコピペ）
デザインなど設定をカスタム（リニューアル）した後、再度中身を元のWordPressに移すという方法です
まずはバックアップをとる
兎にも角にもバックアップは日頃からとっておくように…！
CSSやJavaScript（JQuery）はカスタムしているためメモにも保存しています。
（ちょこちょこ修正入れるし…笑）
Xserverからsqlをダウンロード
Xserverの管理画面からSQLファイルをダウンロードします
※MySQLにログインする際契約時に設定されたMySQLのIDとパスワードが必要になるので確認！
（登録後のメールに記述されています）
WordPressサイトのデータベース名のものを
圧縮された「gz形式」でDLしておきましょう！！
旧パネルだとこちら
データベースの名前を確認する
今使っているデータベース名はいったいどれだ…？となったらこちらで確認出来ます。
慣れている人は後述するFileZillaでwp-config.phpの中身を確認するのもあり◎
多分IDがデータベース名になっているであろう…なのでそんなに迷わないはず。
同じsqlファイルをDLしてバックアップをとろう！
FileZillaからバックアップを取る
FileZillaからバックアップのためファイルをダウンロード！
※FileZillaにログインする際契約時に設定されたFTP用のIDとパスワードが必要になるので確認！
（登録後のメールに記述されています）
ホストに接続（一番左上からログイン）したら ドメイン名＞public_html に進みダウンロードしておく
「public_html」ごとダウンロードしておけば間違いなし。
（アップした画像やプラグインなどすべて含む、WEBサイトの中身を丸ごとDL）
沢山あるので少々時間がかかります。
動いている間は実行できているので放置しておきましょう〜
これでWordPressのバックアップとアップした画像などサイトの中身もダウンロード出来ました！
Localで新規サイトを作る
バックアップが用意出来たらバックアップを利用してサイトのコピーでテスト環境を作ります。
テスト環境は自分のパソコン内でサイトを作る感じ。
今回はLocalを使ってローカル環境にサイトのコピーを置いてく！
Localを立ち上げたら左下のプラスボタンを選択
下記の流れ通り進み…
Create a new site > Preferred
ユーザーネームとパスワードは一時的にしか使わないので適当に設定。
（現行サイトをLocalにコピペすると現行サイトのものに後ほど書き換わる）
わかりやすい名前を設定してみる。
これはテストサイトのURLになったりするのでテキトーでいいけどわかりやすくしておく。
Localがパソコン内にフォルダを作るよ〜って許可をするので
パソコン自体のユーザー名とパスワードを入力して許可をする
（パソコン開いた時に入力するやつね！）
これでテストサイトの準備ができました
WordPressをインストール
上記で作った新規サイトにWordPressをいれていく！
Local内にWordPressをインストールします
WP Adminを選択するとログイン画面にいけるので、
先ほど一時的に設定したユーザーネームとパスを入力してログイン
管理画面にいけました〜
Settingで日本語にだけ変更しておく。
サイトコピペ前の下準備
サイトをコピぺするにあたり、URLとデータベース（ホスト名など）が書き変わってしまうので、この部分はLocal の設定にしないとLocal内でサイトをチェックすることが出来ません。
なので先ほど新規開設したLocalサイトの初期設定をメモしておくよ！！
Local内URLのメモ
サイトのURL（Local内のURL）をメモしておく
Localコードの確認、メモ
Localのフォルダーを開いて、「wp-config.php」ファイルのコードをメモする！
Go to sitefolder ＞ app ＞ public ＞ wp-config.php
赤枠部分をメモする、後から書き換えられるようにしておく！！
私はいつも使用しているAdobe Dwで編集
ここのコードを書き換えるだけなのでファイルが開ければソフトはなんでもOKです。
この画像の部分のコードだけ後から必要になるのでコピーしてメモ、もしくはあとからわかるようにしておく！
（作業途中で書き変わってしまうので注意！）
後ほどwp-config.phpの元ファイルからコピペしたこのコードを、サイトコピペ後に置き換える！
つまり、
- LocalのURL（テストサイトのURL）
- データベースのコード
をコピペ後に書き換える必要があるのでメモしておくこと！
サイトをLocalに復元（コピペ）
バックアップ（コピー）と書き換えなければいけない部分のメモが整ったら準備完了！
準備ができたら今あるサイトをLocal内にペーストしていくよ〜！！
バックアップからサイトをLocalに復元していきます！
sqlファイルをインポート
先ほどDLした「gz」ファイルをLocalにインポートしていく〜！
Localの Open AdminerEvo ＞ インポート ＞ ファイルをアップロード
から先ほどダウンロードしておいたSQLの圧縮ファイルをアップロードする
ファイルを選択したら実行をクリックして…
「実行しました」が出れば完了！
エラーになる場合ファイルが間違っている場合があるので見直してみてください。
インポートができたら先ほどメモしておいたURLに書き換える！
データ ＞ wp_options ＞ siteurl と home のURLを編集する！
鉛筆マークをクリックすると編集出来るよ！
URLの部分をメモしたLocalのURL書き換えて保存
LocalのURLに書きかわりました！
publicファイルの書き換え
publicファイルの書き換え
Localの Go to sitefolder ＞ app ＞ public と進み
publicファイルの中身を空にしておきます。
（中身は別で保存しておきましょう。今回は「元ファイル」という名前で保存してあります）
ローカルの設定に書き換える
Localへ引越し作業完了！！
これにてlocalのURL（テスト環境）で元のサイトが開ける、編集できる状態になりました！！
つまり、
中身はバックアップから復元デザイン、URL（外側）はLocalのテスト環境！！
ここまで出来たらLocal内でサイトデザインをカスタマイズしていくだけ
LocalのWordPressへログイン
引越し作業後に
Local ＞ WP Admin へ アクセスすると…
プラグインも書き変わっているので普段のログイン画面になっているはず！
つまりユーザー名やパスワードも普段使っているもの（元サイトのもの）に書き変わっていますので、Localで設定したものではなくいつものユーザー名とパスワードでログインしてね〜！
※うまくログインできない場合プラグインが原因の可能性があるのでLocalファイルの中のプラグインを一旦別の場所に移して、ログイン→プラグインを元の場所に戻すといけるはず！！
リニューアル作業開始
あとはログインできたLocalのワードプレス内にてデザインなど変更していくだけ〜
失敗しても構築し直せるところと、途中経過を気にしなくて良いのが魅力的…
バックアップさえとっておけばCSSカスタムの練習や表示テストなんかにも使えて便利！！
ブログ立ち上げてからはテスト環境を使わずちょこちょこCSSをいじっていたので一時的に乱れたり戻したりよくやっていました…笑
外部端末で表示チェックする方法
カスタマイズ後のデザインをスマホから表示チェックしたい時に便利！
実はローカル環境でも別端末からサイトの表示確認ができるよ！！！
Live Link ＞ Endle をクリック
※ただしLocalにログインしていて、パソコンも開いている状態の時に限る！
スマホから上記のURLを開き、ユーザーネームとパスワードを入力すると確認できるよ！
WebからLocalにログインしておく必要があります。グリーンになってない場合はアカウントを作成してログインしておこう！！
完成したら本サイトへ再度お引越し
出来上がったら今度は逆の作業をするだけで簡単！
- Localのsqlをエクスポートして保存→Xserverのphpmyadminのインポートで書き換え
- URLの書き換え（Local→本ドメイン）
- wp-config.phpのコードを元に戻す
- publicの中身をFTPソフトでアップ（public.html）
SQLファイルを保存
SQLファイルを保存→インポートしていきます！
sqlファイルをインポートと逆で
Localの Open AdminerEvo ＞ エクスポート ＞ （ファイルをダウンロード）
エクスポートのタブに行き「エクスポート」のボタンをクリックして保存する
保存したSQLファイルを
Xserverのサーバーパネル データベース ＞phpadmin＞インポート からアップロードする
phpadminに行き
アップロードファイルを選択して「インポート」をクリック
URLの書き換え
コードを元に戻す
wp-config.phpのコードを元に戻して保存します！
publicファイルの書き換え の時と逆バージョン、
public＞ wp-config.php
の下記の部分のコードを元々のコードに戻す。
バックアップしておいたpublic.html（元ファイル）の中を確認するか、書き換え前にメモしておく
FTPソフトで上書きする
publicの中身をpublic.htmlへFTPソフトを使ってアップロード（上書き）していきます
wp-config.phpのコードを元に戻したpublicの中身をFTPソフトでアップロードする！！
Localのpublicの中身をすべて選択してドラッグ&ドロップで「public.html」の中にアップロードします。
すべて上書き保存して書き換えていく！！
（大量なので少々時間がかかります笑）
これにて作業完了
アップロード（上書き保存）と書き換え作業が完了し、Localで作成したデザインが本サイトに反映されました〜！
ざっくりとコピペ→作業→コピペして公開！の流れをまとめてみました！
※書き換え中のみサイトへアクセスできない、もしくは崩れて表示されるので注意です。
（ただいまリニューアル作業中などトップページを一時置き換えておくのもいいかも）
ただ5分〜10分あれば終わるので、個人サイトならばアクセスの少ない時間に作業すればいいかな〜という感じです
テスト環境で見れるようにするため、サーバーやホスト部分とURLは書き換える必要がありますし、今回はpublic.htmlごとバックアップ&アップロードしましたが、書き換わる部分だけを抽出して作業→アップロードをすればより軽量で作業することも可能です◎
メモしておかないと私が忘れゆくのでまとめてみましたっ！
WordPressのリニューアルやデザインの練習をしたい人はぜひ参考にしてみてください〜！
comment