【WordPress】１からオリジナルテーマを制作してみた話 （事前準備）
「そろそろブログを自分で作ってみたいな。。」
「WordPressのテーマを作ってみたいけど、流れがよくわからない」
と言う方もいらっしゃるのではないでしょうか。
僕もその一人でした。
独学で、本やWebで調べつつなんとか制作しましたが、結構な労力を使ったし、今考えると無駄なこともいっぱいしたように思います。
そこで何回かに分けて、WordPressのオリジナルテーマを制作した流れをまとめていきたいと思います。
第１回目は「事前準備」。
どんなものを使ってサイトのデザインをしたのか、コーディングを行ったのか、サーバーは何を使っているのかなどを紹介したいと思います。
これからオリジナルのWordPressテーマを作りたい人の参考になれば幸いです。
スポンサードサーチ
目次
準備したもの
テーマ制作にあたり準備したものは以下の通り。
figma(デザイン制作ツール)
Figmaは、
・条件内だと無料で使用できる
・画面の遷移も表現できる
・使いやすい(個人的に。難しいこともしないので)
以上の3点から、今回の使用に適していると考え、Figmaを採用しました。
Atom(テキストエディタ)
コーディングを始めてからずっと使ってるエディタ。
動作がもっさりしてることがたまにあるけど、使いやすく、個人的にはオススメです。
基本は英語ですが、日本語化はもちろん、コーディングを早く行えるようにする「Emmet」など、様々なパッケージがあります。
gulp(作業自動化)
コーディングを行う際、
・sassを使う
・ベンダープレフィックスをつけたい
・画像を圧縮したい
・ファイルを更新した時、ブラウザのオートリロードを行いたい
・CSSに間違いがあった場合でも、勝手に処理を止めない
・CSSに間違いがあった場合、警告を出して欲しい
などなど、いろんなことを勝手にやってくれるように設定できる便利なツール。
Node.jsをインストールしたり、各機能をダウンロードしたり、、最初は黒い画面に抵抗があったけど、使い出すと非常に便利。効率的にコーディングするには必須です。
MAMP(ローカル開発環境)
ダウンロードするだけでphpの使えるローカル開発環境が使えるMAMP。
テーマ制作くらいであれば、無料版で問題ありません。
ほんとは、vagrantとか他の環境でやってみたかったけど、それは次回に。
cyberduck(FTPソフト)
こちらも無料で手に入るソフト。ATOMと同じく、コーディングを始めた時からずっと使ってます。
サーバー&ドメイン&SSL(本番環境)
ブログをリニューアルするにあたって、前から使っていたさくらサーバーからXserverに乗り換えました。
WordPressを使うならこっちの方が早くて安定していると聞いて。
きちんと自分で比較したわけではないので、なんとも言えませんが、管理画面は使いやすい。
特に気に入ったのは、アクセス制限の設定。
わざわざFTPを使って.htaccessと.htpasswdのアップロードを行わなくても、管理画面上で行えます。
ドメインもXserverで取得。SSLは、とりあえず無料で使用できる「Let’s Encrypt 」を設定しました。
おわりに
今回まとめてみて、準備だけでも結構労力使ってるな。。と実感。
そして振り返りは大事だなと。
次回は、デザイン編をお送りいたします。
