WordPressのお勉強メモです。学んだことに関するツールも紹介します。
以前書いたように、Webサイト制作の話をいただいちゃいました!ありがたいし、めっちゃ嬉しい。
▶︎参考:人生の一瞬一瞬がプロセスの連続で、そのプロセスは正しい
以来、写真のオシゴトだけでなくサイトの制作に関するあれこれも勉強しています。
今回は僕も使っているWordPressを使って構築しようと考えています。最初はミニマムで公開して徐々に改善していくパターンになるでしょうね。
使用するテーマはわりとまっさらなテーマ「habakiri」の子テーマで進めるか、もっとライトにスターターテーマを使うか。テーマの仕組みの勉強になるだろうし。
いずれにせよ、今の僕は業務経験がないので、どっちもやってみようの心です。
最終的にはお客さんの要望に合った方法を選択することになるけど、判断できる材料を持っておくことはとても大切だからね。
いずれ自分のサイトもオリジナルでやってみたいし、全てのプロセスはつながっているから楽しくやってきます!
[adSensecode]
開発環境を作ったりgulpを使ってみたり
松本に移住して出会ったエンジニアさんが、「ブィシーシーダブル(VCCW)」や「ガルプ(gulp)」、「タスクランナー」、他にもたくさんの聞き慣れない単語を使っていて、僕はチンプンカンプンでしたが興味はありました。
調べてみるとMacの中にWordPressの開発環境を作れたり、gulp(のようなタスクランナー)は処理を自動化してくれるらしい。詳しくはみなさんで調べてくださいね。
せっかくだから使えるようになるぞ、ということで試行錯誤スタート。
成果はこれ!
「Macのローカル環境でWordPressのテーマをいじって、その変更を即時ブラウザに反映させることができた!」
以下、そこまでの流れ!(再度言いますが、詳しくは皆さんで調べてください)
- ローカル環境構築にはVCCWは使わず、「Local for Flywheel」が楽なのでそちらを使うことに。かなりさくっと作れます。何個も作れます。黒い画面は使いません(笑) FinderでWordPressのディレクトリにアクセスできるのは便利。
- スターターテーマは「Underscores + Bootstrap」である「Understrap」を親テーマとしてインストール。
- 子テーマには「Understrap-child(GitHub)」もインストール。
- PHPやscssファイル用に使うエディタはAdobe製の「Brackets」にしました。IDEの「PhpStorm」が便利そうだけど、ひとまずシンプルエディタで練習。
- gulpを使えるようにするために「Node.js」をインストール。
- nodeのバージョン管理には「nodebrew」を使うことにしました。「Homebrew」からインストールできます。
- 「npm install」をやると「package.json」に記載されているライブラリ等が全部インストールされるの便利!
- 「なぜgulpはグローバルとプロジェクトディレクトリにインストールしないといけないの?」という疑問がわいて調べていたら、まさに「松本に移住して出会ったエンジニアさん」であるToro_Unitさんの記事が1ページ目上位にヒット(笑)▶︎参考:別に $ npm install -g gulp しなくても大丈夫って話。 – Toro_Unit
- (何かをやるためにたくさんアプリやライブラリをインストールするのはめんどくさいよ・・・)
- というわけで、gulpはグローバルにインストールせず、gulp.jsのscript部分に「”gulp”: “gulp”」を追加して「npm run gulp option」で実行できるように設定。
- Understrap-childの中にあらかじめ入っている「gulp.js」をみながら、ファイル更新を監視するよう設定(npm run gulp watch-bs)。
- scssなどのファイルを更新するとコンパイルされてcssなどができる。その結果がブラウザに即時反映される。
ブラウザをリロードすることなくcssが書き換わったのには感動しました。タスクランナーってすご〜く便利なんですね。ここまで来るのにだいぶ時間かかりましたけどね(笑)
ここで疑問:「スターターテーマと子テーマの違いがわからない」
以下、僕の考察です。詳しい方は間違っている箇所を指摘してくれると嬉しいです。
Understrapのように、WordPressのスターターテーマはカスタムすることが前提である、ということはわかります。では、なぜUnderstrap-childなんて子テーマがあるんだろう?カスタムするなら前者だけでいいような気がするのに。
カスタム前提なのに、子テーマが用意されている理由がわからない。
Understrap-childのGitHubには「Basic Child Theme for UnderStrap」と説明があるから、「Understrapの子テーマを作るならこういう構成にするんだよ」というサンプルなのかな?謎です。
また、あるブログに「子テーマでガリガリ(親テーマのファイルを)リライトして消耗してない?そんなあなたに朗報です!スターターテーマを使いましょう!」と言った内容が書かれていて、余計にスターターテーマと子テーマの差が分からなくなりました。
でも、よ〜く考えてみるとだんだんわかってきました。
スターターテーマはそれをベースに自分専用テーマを作れるもの。最低限の実装しかなされていない枠組みみたいなもの。今僕が使っている「Lightning」のようなテーマの雛形なんですよね。
であれば、作ったテーマを「自分専用テーマ Version1」として育て続ければいいわけです(よね?)。公式にある「Theme Check」プラグインを使えば品質は自分で確認できます。
そうやっていくもんなんだろうな、きっと。
ちなみに、スターターテーマ自体がVersion upしたら、その部分を自分専用テーマに取り込むか否かは自由ってことでいいのかな。
※WordPress公式以外のテーマにTheme Checkをかけると結構びっくりします
おわりに
それにしても今やWeb開発用のツール、ライブラリ、その他諸々はすごくたくさんあるんですね。
プロジェクトごとにどれを選択するのがベストなのか?どれも同じかもしれないけど、効率が違うかもしれない。は〜、Web制作は今やその判断力も必要になるんですね。知識と知恵、経験が必要になるなぁ。
その中で自分の柱(得意分野)を持っておくのがいいんだろうね。
それに、そもそもWebサイトを欲している方が「どういう想いでいるのか」、その想いを実現するのに「本当にWebが最適なのか?」、そういうところから関わっていけるのは、僕ワクワクしているんですよね。しんどそうですけど(笑)
僕はこの歳から関わる世界です。でもね、僕は僕。自分のペースでやっていきます。決して人と比べず、3歩進んで2歩下がってもいいくらいの気持ちで。
※写真は京都、東本願寺。2017年4月にX-T1で撮った写真です。