公開したWordPressサイトの自作テーマ修正・変更方法【WordPress制作入門講座】

前回まででWordPressサイトの公開は完了しました。
今回は、公開後の自作テーマ修正・変更方法について解説します。

• 公開サイトについて確認しよう
• ローカルと本番環境の違い
• 変更は、まずローカルで試そう
• テーマファイルを更新してみよう
• ①ローカルでテーマファイルを変更する
• ②FTPでアップロードする
• ③公開サイトを確認する

公開サイトについて確認しよう

ローカルと本番環境の違い

Localを使って動かしていたローカル環境のWordPressは、自分のパソコンの中に情報がありました。テーマを自作してファイルを加えましたし、エディターでファイルを上書き保存するとテーマの表示も変わりました。

しかし、公開しているWordPressはレンタルサーバーに情報を預けています。
このため、前回はレンタルサーバーでWordPressをインストールしました。FTPクライアントソフトを使って、レンタルサーバーのWordPressにテーマフォルダをアップロードして、自作したテーマが使えるようにしましたね。

自分のパソコンでを使って作成したものを、レンタルサーバーに渡す（アップロードする）必要があるわけです。

変更は、まずローカルで試そう

WordPressを色々と触ってみた方はお気づきかもしれませんが、WordPressは管理画面からでもテーマファイルを書くことが出来ます。

アップロード面倒だし……と本番環境のWordPress管理画面から変更する方もいますが、直接編集はおすすめしません。ローカル環境を使って変更・修正を行いましょう。

理由は２つあります。

まず、レンタルサーバーのWordPressサイトは公開用。
タグの書き方を間違えて表示が変になってしまった時、誰かサイトを見ている人がいたらビックリしてしまいますよね。

もう一つは、本番環境（レンタルサーバー）とローカルサイトはデータを自動共有していないためです。例えば、ちょっとした修正だからと本番環境でstyle.cssを直しても、ローカルサイトにあるstyle.cssは変更されません。ファイルの中身が一致しないと、大規模な更新の際に混乱するので避けましょう。

テーマファイルを更新してみよう

「作ったテーマを変更したい」という時も、レンタルサーバーに新しいファイルをアップロードする（情報を上書きする）必要があります。

ローカルでテーマファイルを修正して、それを公開サイトの方にも反映させてみましょう。

①ローカルでテーマファイルを変更する

ローカル環境のWordPressを使ってテーマを修正してみましょう。
分かりやすく、bodyの背景色をロゴの色と合うように変更してみます。

Localを立ち上げ、URLの横に表示されている矢印をクリック。
作っているWordPressのテーマフォルダ内にあるstyle.cssを、エディターで開きます。

style.cssに記述しているbodyのbackground:を、grayから「#3A6EBD」に変更。
上書き保存してください。

カラーコードはIllustratorなどで、スポイドツールを使うと調べられます。

Localの「OPEN SITE」からローカルWordPressを開いてみましょう。

bodyの背景色が変わっていれば、変更成功です。

②FTPでアップロードする

①でローカルサイトの方は、テーマ修正が完了しました。
ですが、この状態ではまだ本番環境（レンタルサーバーにある、公開用のサイト）の方に変化はありません。

①で変更したstyle.cssを、レンタルサーバーにアップロードしましょう。

FileZillaを起動して、さくらサーバに繋ぎます。
使用中のテーマディレクトリを開きましょう。

①で上書きした、style.cssをドラッグしてアップロードします。

同名のファイルがある場合、上書きして良いか聞かれます。
更新したいので、上書きで「OK」をクリックしましょう。

「ファイル転送に成功しました」と表示されれば、アップロード完了です。

③公開サイトを確認する

本番環境のWordPressサイトを再読み込みして、アップロードしたstyle.cssが反映されたか確認しましょう。
表示が変わらないときは、スーパーリロードで再読み込みしてください。

今回はstyle.cssを更新しましたが、それ以外のファイルも同様の手順で更新・修正できます。

背景画像を設定したり、トップページの画像を変更したりする際には、imagesフォルダ内の画像もアップロードが必要です。そこだけ注意しましょう。

テーマフォルダごとアップロードすることも可能です。
更新するファイルが多い場合は、フォルダごとの方が楽かもしれません。