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

WordPressのお勉強メモです。学んだことに関するツールも紹介します。

 

vf_DSCF5205

 

以前書いたように、Webサイト制作の話をいただいちゃいました!ありがたいし、めっちゃ嬉しい。

▶︎参考:人生の一瞬一瞬がプロセスの連続で、そのプロセスは正しい

 

以来、写真のオシゴトだけでなくサイトの制作に関するあれこれも勉強しています。

今回は僕も使っているWordPressを使って構築しようと考えています。最初はミニマムで公開して徐々に改善していくパターンになるでしょうね。

使用するテーマはわりとまっさらなテーマ「habakiri」の子テーマで進めるか、もっとライトにスターターテーマを使うか。テーマの仕組みの勉強になるだろうし。

いずれにせよ、今の僕は業務経験がないので、どっちもやってみようの心です。

 

最終的にはお客さんの要望に合った方法を選択することになるけど、判断できる材料を持っておくことはとても大切だからね。

いずれ自分のサイトもオリジナルでやってみたいし、全てのプロセスはつながっているから楽しくやってきます!

 

 
スポンサーリンク

 

開発環境を作ったりgulpを使ってみたり

松本に移住して出会ったエンジニアさんが、「ブィシーシーダブル(VCCW)」や「ガルプ(gulp)」、「タスクランナー」、他にもたくさんの聞き慣れない単語を使っていて、僕はチンプンカンプンでしたが興味はありました。

調べてみるとMacの中にWordPressの開発環境を作れたり、gulp(のようなタスクランナー)は処理を自動化してくれるらしい。詳しくはみなさんで調べてくださいね。

せっかくだから使えるようになるぞ、ということで試行錯誤スタート。

 

vf_DSCF5204

 

成果はこれ!

「Macのローカル環境でWordPressのテーマをいじって、その変更を即時ブラウザに反映させることができた!」

 

以下、そこまでの流れ!(再度言いますが、詳しくは皆さんで調べてください)

  1. ローカル環境構築にはVCCWは使わず、「Local for Flywheel」が楽なのでそちらを使うことに。かなりさくっと作れます。何個も作れます。黒い画面は使いません(笑) FinderでWordPressのディレクトリにアクセスできるのは便利。
  2. スターターテーマは「Underscores + Bootstrap」である「Understrap」を親テーマとしてインストール。
  3. 子テーマには「Understrap-child(GitHub)」もインストール。
  4. PHPやscssファイル用に使うエディタはAdobe製の「Brackets」にしました。IDEの「PhpStorm」が便利そうだけど、ひとまずシンプルエディタで練習。
  5. gulpを使えるようにするために「Node.js」をインストール。
  6. nodeのバージョン管理には「nodebrew」を使うことにしました。「Homebrew」からインストールできます。
  7. 「npm install」をやると「package.json」に記載されているライブラリ等が全部インストールされるの便利!
  8. 「なぜgulpはグローバルとプロジェクトディレクトリにインストールしないといけないの?」という疑問がわいて調べていたら、まさに「松本に移住して出会ったエンジニアさん」であるToro_Unitさんの記事が1ページ目上位にヒット(笑)▶︎参考:別に $ npm install -g gulp しなくても大丈夫って話。 – Toro_Unit
  9. (何かをやるためにたくさんアプリやライブラリをインストールするのはめんどくさいよ・・・)
  10. というわけで、gulpはグローバルにインストールせず、gulp.jsのscript部分に「”gulp”: “gulp”」を追加して「npm run gulp option」で実行できるように設定。
  11. Understrap-childの中にあらかじめ入っている「gulp.js」をみながら、ファイル更新を監視するよう設定(npm run gulp watch-bs)。
  12. scssなどのファイルを更新するとコンパイルされてcssなどができる。その結果がブラウザに即時反映される。

 

ブラウザをリロードすることなくcssが書き換わったのには感動しました。タスクランナーってすご〜く便利なんですね。ここまで来るのにだいぶ時間かかりましたけどね(笑)

 

vf_DSCF5203
 

ここで疑問:「スターターテーマと子テーマの違いがわからない」

以下、僕の考察です。詳しい方は間違っている箇所を指摘してくれると嬉しいです。

 

Understrapのように、WordPressのスターターテーマはカスタムすることが前提である、ということはわかります。では、なぜUnderstrap-childなんて子テーマがあるんだろう?カスタムするなら前者だけでいいような気がするのに。

カスタム前提なのに、子テーマが用意されている理由がわからない。

Understrap-childのGitHubには「Basic Child Theme for UnderStrap」と説明があるから、「Understrapの子テーマを作るならこういう構成にするんだよ」というサンプルなのかな?謎です。

また、あるブログに「子テーマでガリガリ(親テーマのファイルを)リライトして消耗してない?そんなあなたに朗報です!スターターテーマを使いましょう!」と言った内容が書かれていて、余計にスターターテーマと子テーマの差が分からなくなりました。

 

でも、よ〜く考えてみるとだんだんわかってきました。

スターターテーマはそれをベースに自分専用テーマを作れるもの。最低限の実装しかなされていない枠組みみたいなもの。今僕が使っている「Lightning」のようなテーマの雛形なんですよね。

であれば、作ったテーマを「自分専用テーマ Version1」として育て続ければいいわけです(よね?)。公式にある「Theme Check」プラグインを使えば品質は自分で確認できます。

そうやっていくもんなんだろうな、きっと。

ちなみに、スターターテーマ自体がVersion upしたら、その部分を自分専用テーマに取り込むか否かは自由ってことでいいのかな。

 

vf_DSCF5208

 

※WordPress公式以外のテーマにTheme Checkをかけると結構びっくりします

おわりに

それにしても今やWeb開発用のツール、ライブラリ、その他諸々はすごくたくさんあるんですね。

プロジェクトごとにどれを選択するのがベストなのか?どれも同じかもしれないけど、効率が違うかもしれない。は〜、Web制作は今やその判断力も必要になるんですね。知識と知恵、経験が必要になるなぁ。

その中で自分の柱(得意分野)を持っておくのがいいんだろうね。

それに、そもそもWebサイトを欲している方が「どういう想いでいるのか」、その想いを実現するのに「本当にWebが最適なのか?」、そういうところから関わっていけるのは、僕ワクワクしているんですよね。しんどそうですけど(笑)

 

vf_DSCF5215

 

僕はこの歳から関わる世界です。でもね、僕は僕。自分のペースでやっていきます。決して人と比べず、3歩進んで2歩下がってもいいくらいの気持ちで。

 

vf_DSCF5218

 

※写真は京都、東本願寺。2017年4月にX-T1で撮った写真です。

Webの世界も学ぶことが多い分野ですね

 

★ あなたのステキをそっとすくい撮ります ★

いまBlogやSNS、紙媒体などで発信しているけれど、

  • もっと自然体な自分を見せて、お客さんに安心を届けたい!
  • 顔写真を公開するのは恥ずかしいけど、勇気を出して公開したい!
  • 実は撮ってもらいたかったんです!

というみなさんの撮影を僕にやらせてもらえませんか。あなた自身がまだ気付いていない「あなたのステキ」を僕が撮ります。

★ 出張撮影、承ります ★

僕の活動拠点は長野県松本市と神奈川県横浜市。

毎月上旬は松本、下旬は横浜にいます。中信地方や関東圏内の撮影でしたらのその期間にお声がけくださいね。もちろん、他にも出張撮影します。

今は京都や広島(竹原や尾道)に行きたい。そちら在住の撮影されたいという方いませんか〜?

★ 詳しくはこちらからどうぞ ★

この記事を書いた人

花村貴史 / Takashi Q. Hanamura
花村貴史 / Takashi Q. Hanamura<空気感フォトグラファー>
「”自分の好き”を大切にしよう」と思いきって大好きな信州に移住したフォトグラファー。その人/その場の空気感をそっとすくい撮る写真が好評。
僕のできることで「あなた」を世界に伝えるメッセンジャーとして活動中。

詳しいプロフィールはこちらへGo!!

この記事が気に入ったら
いいね ! してくださいね。

Twitter で