WordPress自作テーマの作り方

2018年12月29日Wordpress, プログラミング

WordPressを独自カスタマイズしたい!という思いのもと、自作テーマを作ってみたときの覚書です。自作テーマを作ってみて思ったのは、テーマを作ること自体はそれほど難しくないということ。

一方で、無料テーマでも至れり尽くせりの機能を持ったものが結構在って、それを自作しようと思うと結構工数使いそうだな~ということ。

とりあえずテーマを作ってみて、自作テーマを極めるもよし。無料テーマを使い倒すもよし。有料テーマを買ってみるのもよし。

自作テーマ作成環境

自作テーマは基本ローカル環境で作り込んでテストをしたあとにアップロードする流れになります。

今回自作テーマを作るにあたって使用したツール等を紹介します。

  1. ATOM
  2. Local by Flywheel
  3. Photoshop
  4. Illustrator
  5. FileZilla

基本は無料ツールですが、素材加工系はAdobeソフトを使ってみました。GIMPとInkscapeで無理やり大体もできそうですが…

1.ATOM

ソースコード編集用の高機能無料エディタです。Webベースで動いていて、強調表示やgrep等対応のモダンエディタです。ときどきバグるのが玉にキズ。他にVScodeなんかもモダンエディタとして引き合いに出されます。

2.Local by Flywheel

ローカルに簡単にWordpress環境を構築できるツールです。無料。以前はInstantWPを使用していましたが、PHPのバージョンがネックになってうまく動作しなくなったので、PHP・MySQLのバージョンも選べるLocal by Flywheelに移行しました。

3.Photoshop

アイキャッチ作成や、テーマ画像の作成に使っています。慣れるまで、どうやって操作するのかが全くわからなかったツール。慣れればいろいろできて便利なツールでした。

4.Illustrator

フレームワークを作成してデザイン案だしに使用。これもPhotoshop同様、慣れていないと使いづらいツールな気がします。最近だと Adobe XDでデザインするのがトレンドでしょうか。

5.FileZilla

ローカル環境で作り込んだデザインを実サーバーにアップするときに使います。昔はFTTTPを使っていましたが、最近のモダン環境に憧れて変えてみました。

自作テーマの作り方

ローカルにLocal by Flywheelで環境を作り込んだあとは、下記サイトのデモコードを参考にATOMでひたすらphpを書き込んでは、ブラウザで動作チェックをしていきます。

初心者必見!自作のWordPressオリジナルテーマを作成する方法を徹底解説

上記サイトの内容を一つずつ実践していけばオリジナルのレスポンシブデザイン対応のテーマが完成します!

あとは、独自でどんな機能を折り込みたいか?を考えて、必要な機能についてはググって実装して、テストして、を繰り返していきます・・・

テーマ作成のポイント

欲しい機能すべてを実装していこうとすると工数がいくら合っても足りません。また、スキルもついていかない可能性が高いでしょう。

そこで、実装が大変そうなところは別プラグインの使用を前提に設計していきます。プラグインを使ったときにもスッキリとオリジナルデザインに溶け込むように、プラグインに合わせた設計をすれば少ない工数で、高度な自作テーマを作ることができます。(例えばAMP対応などはプラグインに任せると大幅な工数削減になります)

さいごに

冒頭でも説明したように、自作テーマは割と簡単に作れます。自作テーマを作る過程で、Wordpressの動作原理をつかめば、既存テーマを使うときにもきっと役に立つと思います。少し時間をとって、簡単な自作テーマを作ってみるのはいかがでしょうか?