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

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

目次

ローカル開発環境の構築

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

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

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

 

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

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

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

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

たとえると、

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

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

 

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

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

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

 

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

 

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

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

 

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

  • html
  • css
  • php
  • JavaScript

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

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

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

 

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

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

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

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

 

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

サービスメニュー

Postscript執筆後記

初めて自分でたくあんを作ってみました。
ちょっと味が薄かったので、次回はもう少し塩と砂糖を足してみます。

Something New一日一新

ドラム式洗濯乾燥機でギターのソフトケースを洗濯乾燥してみた
たくあんを自作

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする、東京の30代税理士。ひとり社長。
ブログ「FAVPRESSO」は平日毎日更新。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『独立して人生を楽しむ方法』