こんにちは朱夏です。
今回から、WordPressの自作テーマを作成していきます。
2つ目のテーマになります。
今回は、こちらのyoutube動画を参考に作成していきたいと思います。
前回は思い付きで作り始めて、色々なサイトを見ながら試行錯誤して作りましたが、今回はこのしもむらともきさんの動画に沿って作成していきたいと思います。
Bootstrapのスキルレベルも上げたかったので一石二鳥ですね。
今回は、作業するための事前準備をしていきます。
それではやっていきます。
作業前に準備するものは以下の3つです。
-
- ローカル開発環境
- エディタ
- ブラウザ
一つずつ紹介していきます。
ローカル開発環境
ローカル開発環境で紹介されていたLocal by Flywheelですが、WordPressのローカル開発環境としてとても便利だと感じました。
その理由は以下です。
-
- データベースを自動で作成、連携してくれる
- WordPressを自動ダウンロード、インストールしてくれる
- セットアップが超簡単
前回私がテーマ作成した時は、MAMPというツールを使っていました。
データベースはMAMPから作成可能でしたが、WordPresとの連携は自分でやる必要がありました。
更に、WordPressを公式サイトからダウンロード、解凍、インストールと行い、ブラウザでlocalhostを開き、アカウント設定、ログインまで一日がかりでした。
それがLocal by Flywheelだとものの10分程度で終わりました。すごい。
気になる方はこちらからどうぞ。
エディタ
エディタについては個人的にもとても使いやすいお気に入りです。
Visual Studio Codeを使っていきます。
このエディタがいいと思う理由は以下の様なものです。
-
- ハイライトが見やすい
- 入力の予測候補が超便利
- ショートカットが超便利
ハイライトが見やすいのは他のエディタでも言えるのですが、背景が黒いのが個人的には〇です。
背景が明るいと眩しくて長時間作業するのは辛いのです。
入力の予測候補が本当に便利で、初心者にはもちろん、経験者でも入力時間短縮という意味でかなりの恩恵を受けるのではないかと思います。
例えば、HTMLだと”a”と入力すると”<a href=””></a>”まで入力してくれます。
CSSでも、”color”と入力すれば”color: ;”まで入力してくれるので、;忘れなども防いでくれます。
次に、ショートカットが便利過ぎる話です。
先ずは良く使うショートカットを紹介します。
-
- Alt + ↑or↓ ： 選択した行を上下に移動
- Alt + Shift + ↓ ：選択した行を複製
- Ctrl + / ：選択行のコメントアウト／解除
この3つのショートカットは覚えておいて損はありません。
私はこれと入力予測のおかげでコードを書くのがめっちゃ早くなりました。
他にも複数行選択してTabで一括インデント追加、Shift + Tabで一括インデント削除なども便利です。
そんなVisual Studio Codeはこちらからダウンロードできます。
一つ忘れていましたが、これだけ高機能なのに動作がとても軽いのもいいですね。
ブラウザ
こちらも以前から使用しているGoogleChromeを継続して使っていきます。
今や2位以下をトリプルスコアで突き放して国内シェアNo1のブラウザですから、このブラウザでの表示状態に重きを置くのは必然ですね。
それに、Chromeはデベロッパーツールが使えるのが良いですね。
問題が発生した時に原因を探るのに使ったり、閲覧していたサイトのデザインでどうやって表現しているのか気になったりした時に仕組みを覗いたりできるのでとても役に立っています。
そんな有名なブラウザですが、もしまだ使っていない人がいたら、ここからダウンロードできるので使ってみてください。
私の場合、別のブラウザといえばiPhoneのSafariくらいですかね。
というわけで、今回は環境準備を行いました。
Local by Flywheelを新しく知ったのですが、これはもっと早く知りたかったレベルで便利そうですね。
しかし、MAMPを使って環境構築したのも、実際にネットワーク上にWordPressでサイト構築する事を考えたらいい練習になったので、無駄ではなかったと思います。
次回から、ガシガシコードを書いてテーマを作っていきたいと思います。
先ずはHTMLを作成して、PHPに変換してWordPressに落とし込むのは1つ目を作った時と同じ手順の様なので、どんなデザインにするか色々考えてみたいと思います。
今回は以上です。
次回もよろしくお願いします。
