2018年08月05日 WordPressテーマ制作

【WordPress】１からオリジナルテーマを制作してみた話 （事前準備）

「そろそろブログを自分で作ってみたいな。。」

「WordPressのテーマを作ってみたいけど、流れがよくわからない」

と言う方もいらっしゃるのではないでしょうか。

僕もその一人でした。

独学で、本やWebで調べつつなんとか制作しましたが、結構な労力を使ったし、今考えると無駄なこともいっぱいしたように思います。

そこで何回かに分けて、WordPressのオリジナルテーマを制作した流れをまとめていきたいと思います。

第１回目は「事前準備」。

どんなものを使ってサイトのデザインをしたのか、コーディングを行ったのか、サーバーは何を使っているのかなどを紹介したいと思います。

これからオリジナルのWordPressテーマを作りたい人の参考になれば幸いです。

スポンサードサーチ

準備したもの

テーマ制作にあたり準備したものは以下の通り。

figma(デザイン制作ツール)

https://www.figma.com/

Figmaは、

・条件内だと無料で使用できる

・画面の遷移も表現できる

・使いやすい(個人的に。難しいこともしないので)

以上の3点から、今回の使用に適していると考え、Figmaを採用しました。

Atom(テキストエディタ)

https://atom.io/

コーディングを始めてからずっと使ってるエディタ。
動作がもっさりしてることがたまにあるけど、使いやすく、個人的にはオススメです。

基本は英語ですが、日本語化はもちろん、コーディングを早く行えるようにする「Emmet」など、様々なパッケージがあります。

gulp(作業自動化)

https://gulpjs.com/

コーディングを行う際、

・sassを使う

・ベンダープレフィックスをつけたい

・画像を圧縮したい

・ファイルを更新した時、ブラウザのオートリロードを行いたい

・CSSに間違いがあった場合でも、勝手に処理を止めない

・CSSに間違いがあった場合、警告を出して欲しい

などなど、いろんなことを勝手にやってくれるように設定できる便利なツール。

Node.jsをインストールしたり、各機能をダウンロードしたり、、最初は黒い画面に抵抗があったけど、使い出すと非常に便利。効率的にコーディングするには必須です。

MAMP(ローカル開発環境)

https://www.mamp.info/en/

ダウンロードするだけでphpの使えるローカル開発環境が使えるMAMP。
テーマ制作くらいであれば、無料版で問題ありません。

ほんとは、vagrantとか他の環境でやってみたかったけど、それは次回に。

cyberduck(FTPソフト)

https://cyberduck.io/

こちらも無料で手に入るソフト。ATOMと同じく、コーディングを始めた時からずっと使ってます。

サーバー&ドメイン&SSL(本番環境)

https://www.xserver.ne.jp/

ブログをリニューアルするにあたって、前から使っていたさくらサーバーからXserverに乗り換えました。

WordPressを使うならこっちの方が早くて安定していると聞いて。

きちんと自分で比較したわけではないので、なんとも言えませんが、管理画面は使いやすい。

特に気に入ったのは、アクセス制限の設定。

わざわざFTPを使って.htaccessと.htpasswdのアップロードを行わなくても、管理画面上で行えます。

ドメインもXserverで取得。SSLは、とりあえず無料で使用できる「Let’s Encrypt 」を設定しました。

おわりに

今回まとめてみて、準備だけでも結構労力使ってるな。。と実感。
そして振り返りは大事だなと。

次回は、デザイン編をお送りいたします。