ひかるぶろぐ

WordPressのテーマを変更しました。やり方と注意点のまとめ

WordPressのテーマ変更まとめ

WordPressのテーマ変更におけるやり方と注意点をまとめます。

ググればいろいろなやり方が紹介されてますが部分的には丁寧な説明をされてても最初から最後まで全て指示してくれる記事が少なかったりしますよね。

そこで、テーマ変更を無事に完了させた僕が実際に参考にしたURLを引用しつつ、全ステップをまとめていきます。

僕は次のようなスペックなので対象読者も僕みたいな人を想定しています。

  1. OSはMac
  2. WordPressを使い始めて2ヶ月ちょっとのど素人
  3. サーバーはエックスサーバー
  4. ローカル環境って何?レベル

 

WordPressのテーマ変更の手順

ひかるぶろぐはWordPressにて書いてます。テーマはこれまで無料のLIONMEDIAを使ってましたが、シンプルデザインに惹かれて有料テーマのSTORKに変更しました。

テーマを購入後、PCに購入テーマをダウンロードしてWordPressの管理画面からテーマのアップロード。

 

はしません!絶対に!!

 

テーマ変更によってデザインが崩れたりバグが発生する可能性はゼロではないからです。

テーマ変更までの流れは必ず次のステップを踏みます。

  1. 現行WordPress(本番環境)のバックアップ
  2. PCにローカル環境構築
  3. 本番環境のデータをローカル環境にコピー
  4. ローカル環境でテーマをインストール、ローカル環境で体裁を整える
  5. ローカル環境で整えたデータを本番環境(サーバー)にアップロード
  6. テーマ変更完了!

 

順番に紹介していきます。

 

WordPressのテーマ変更手順1:現行WordPressのバックアップ

バックアップはテーマ変更だけでなくプラグインの導入やCSSによるデザイン変更時にも取っておきたいもの。僕自身何度も経験があるのですが、CSSに慣れていないと失敗して体裁がぐちゃぐちゃになる。元に戻そうとしても戻せない…みたいな。そうならないために必ずバックアップを取ります。僕はバックアップはプラグインを使ってます。詳しくはこちらでまとまってます。

BackWPUpで確実にWordPressのバックアップを取る方法

 

WordPressのテーマ変更手順2:PCにローカル環境構築

ローカル環境の構築はWordPressビギナーは誰しもが知らないことだと思います。

僕はWordPress始める時に知っておきたかった。。。ローカル環境とは簡単に言えばリハーサルスタジオみたいなもの。ロックバンドが日本武道館でライブする前に下北沢の地下にあるリハーサルスタジオで楽曲やMCやパフォーマンスを練習するようなもの。

自分だけしか見られないPCの中でWordPressを全部整えてから、みんなに見られるサーバーにアップすることでバグが発生せずスムーズにテーマ変更できるよーということ。

サーバー環境でテーマ変更をしてしまうと、予期せぬバグで画面が真っ白になったりする。すると訪問してくれた方に悪い印象を与えてサイトの評判が落ちることにも。

ロックバンドも日本武道館のライブをぶっつけ本番でやらないですよね。緻密なリハーサルを経てます。だからサーバー環境で準備するのが大切なんです。

僕は今回のテーマへんこうを機にサーバー環境を作りました。詳しくはこちらをどうぞ、WindowsでもMacでも丁寧に紹介されてます。

XAMPPを用いてテスト環境を構築する方法(Windows)

MAMPを用いてテスト環境を構築する方法(Mac)

WordPressのテーマ変更手順3:本番環境のデータをローカル環境へコピー

手順2によって自分のPCにWordPressのローカル環境が構築できました。しかし初期画面のはず。ここではこれまでに頑張ってきた記事などをローカル環境にコピーして本番環境と全く同じ状態にしましょう。僕はエディタはAtomを使っています。エディタは「WordPressファイルを編集するもの」ぐらいに思っていてOKです。.htmlや.css、.phpなどをいじれます。

wordpressの本番サイトをローカル環境に再構築するための6ステップ

【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方

 

WordPressのテーマ変更手順4:ローカル環境でテーマインストール、体裁整え

ローカル環境を作ったら事前にダウンロードしたテーマをインストールします。ローカル環境は自分にしか見えないこと以外は本番環境との違いはありません。サクサクとインストールしテーマ変更をしてCSSもいじっちゃいましょう。

 

WordPressのテーマ変更手順5:ローカル環境から本番環境へアップロード

最後にローカル環境から本番環境へのデータ移行です。ここが一番緊張するところ。しくれば今現在公開しているサイトに不具合が起きます。必ずバックアップを取っておいてください。やり方はこちらを参考にしました。リンクはサーバーはロリポップになっていますが、エックスサーバーでもやるべきことは同じです。

wordpress|MAMPのmacローカル環境からロリポップサーバーへアップロードする方法

 

一つ一つ丁寧に進めてくださいね。また、データ移行する時間帯も重要。可能なら深夜などアクセスが最も少ない時間を選びたい。データ移行だけですが、1時間はかかったりします。

その間、サイトはきれいに表示されないのでアクセス数が多い時間帯は絶対に避けてください。上手くいけば何事もなく終了するのですが、僕は管理画面がバグりました。。。深夜にうんうん悩んだ結果、直せたので同様の症状が出た方は参考にしてください。

WordPressのダッシュボードが表示されない…。ローカル環境からアップロードしたら…

2018年4月10日

 

WordPressのテーマ変更まとめ

僕はググって紹介ブログを読みながらPCで作業してましたがこのやり方はNG。

何度も読んで完全に頭に叩き込んでから作業することをオススメします。その場その場の短期的で曖昧な理解のまま進めるとエラーやバグが発生した時に慌てふためいてしまうからです。

このエントリーで書いてきたテーマ変更の全ステップを理解し、関連リンクも熟読した上で作業に取り掛かってください。全体像を理解しているのとしていないのでは想定外のトラブル対応に天と地の差があります。

以上、WordPressのテーマ変更のポイントまとめでした。