【WordPressメモ】ローカル環境やgulpやスターターテーマの話

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などができる。その結果がブラウザに即時反映される。