「WordPressテーマをカスタマイズしてみたい」というご相談をいただくことがあります。

WordPressテーマを本格的にカスタマイズする流れをざっくりまとめてみました。

目次

ローカル開発環境の構築

いきなり少しハードルが高いのですが、WordPressをゴリゴリカスタマイズしていくには「ローカル環境（仮想開発環境）」という仮のWordPress環境を作り、それを使って行います。

通常、「ご自身のサイトのデザインをちょっと変えたい」といったときにはダッシュボードの「外観」→「カスタマイズ」または「テーマファイルエディター」というところで行っている方が多いかと思います。

WordPressのデフォルトの機能でプレビューを確認しながらカスタマイズを行うことができ、ちょっとしたデザインの変更程度であればこれで十分です。

ただ、大幅にデザインを変えたいときや、プラグインを使わずに新しい機能を実装したいというときには数行以上のコードを書かなければいけないことがあります。

このとき、管理画面から直接コードを書いて保存してしまうと、即座に実際のインターネット環境にその変更が反映されます。

カスタマイズが上手くいったときは問題ありませんが、仮に失敗してしまうとサイトのデザインが崩れてしまったり、いじったファイルによっては管理画面にさえ入れなくなってしまうこともあります。

そうなると管理者である自分はもちろん、サイトを訪れたユーザーにも迷惑がかかります。

たとえると、

• メイク途中のすっぴんを見られてしまう
• 前髪のセルフカットに失敗した瞬間を見られてしまう

と言った感じでしょうか。笑

これを避けるため、パソコン上に自分しかアクセスできない仮のインターネット環境を作り、そこで開発を行うわけです。

そうすれば、カスタマイズに失敗しても本物のサイトには影響ありませんし、誰かに見られてしまう心配もありません。

実際にプロのWEBデザイナーやエンジニアの方がWordPressサイトの開発をするときも、この方法で行われています。

ちなみに、仮想環境の構築はDockerというツールを使っています。

MacのDockerでWordPressのローカル開発環境を構築する方法。

ただ、Localというツールを使った方がより簡単です。（僕も以前はこちらを使っていました）

デベロッパーツールで確認

サイトの見た目（デザイン）をカスタマイズしていくときは、ブラウザのデベロッパーツールを使うと便利です。

Google Chromeであれば、F12キーを押すとデベロッパーツールが起動します。

デベロッパーツールを使えばテーマファイルを書き換えると見た目がどう変わるかのシミュレーションができ、どこをどういじれば良いのかがわかります。

これは自分のサイトでなくても使えますので、他のサイトで「このデザインいいな」と思えばデベロッパーツールを起動することでどういうコードが書かれているのか確認することができます。

エディタでテーマファイルを編集

コードを書き換える箇所が分かったら、いよいよテーマファイルを編集していきます。

テーマファイルを編集するには、最初にインターネット上にあるテーマファイルをパソコン上にダウンロードします。

これはFTPソフトというツールを使います。

FTPソフトはFileZilaが使いやすくおすすめです。

WordPressのカスタマイズに便利なFTPソフト「FileZilla」のインストール&Mixhostに接続する方法。

ダウンロードしたテーマファイルをエディタで開き、編集します。

エディタをいうのはコードを書いていくノートのようなものです。

僕が使っているエディタのはVisual Studio Codeです。

インターフェイスも良く使いやすいです。

Visual Studio Code – コード エディター | Microsoft Azure

先述の「Local」などを導入していれば、ローカル開発環境上のブラウザを再読み込みするだけで即座にカスタマイズがローカル環境のWordPressに反映されます。

見た目を確認し、修正が必要であれば再度エディタでコードを書き換えます。

なお、WordPressの本格的なカスタマイズには

• html
• css
• php
• JavaScript

といった言語の知識が必要です。

最初はhtmlとcssの全体像をざっと学び、あとはその都度ググっていけば良いでしょう。

僕はこちらの本で勉強しました。

FTPソフトで本番環境に反映

ローカル開発環境で見た目を確認し問題がなければ、本番環境にカスタマイズを反映させます。

FTPソフトを使い、今度はローカル環境で編集したテーマファイルを本番環境にアップロードし、実際のインターネット上にあるファイルの内容を上書きします。

これで、実際のインターネット上のサイトにもカスタマイズが反映されることになります。

最初のローカル環境の構築と言語の学習にはある程度時間がかかりますが、ローカル環境を使えるようになればWordPressの本格的なカスタマイズができ、よりカスタマイズが楽しくなります。