web制作

WordPressの仕事ができるようになるまでに勉強したこと公開します

こんにちは!
フリーランス1年目のwebエンジニアNatsumiです。

今日はお仕事の話をしたいと思います!

1月はワードプレスのコーポレートサイト制作の案件を受注していたのですが
その案件を受けるまでに、
どんなプロセスで勉強をしたのか、お話をしたいと思います。

わたしはweb制作は初心者から始めまして
そんなわたしでも3ヶ月ほどでWordPressの仕事ができるようになった過程を乗せます!

Progate HTML&CSSコースを2、3周やる

まずはprogate HTML&CSSコースで勉強を始めました。


Progateでプログラミングにまずは慣れましょう!

初級編〜中級編〜上級編 学習コース で知識をインプットする

初級編〜中級編〜上級編  道場コース でアウトプットし知識を定着させる

これを繰り返しやりましょう!

そうすると、3周目くらいには、プログラミングの大枠は理解できるようになります。

・HTMLの仕組みを理解する
・タグの使い方を理解する
・CSSの書き方を理解する
・CSSのプロパティを知る

HTML&CSSレッスンブックで実際のサイトを作ってみる

つぎは実際のサイトをローカル環境で作ってみましょう。

Progateで勉強しているとProgate内にコードを記述するところが用意されているため
自分で実際にサイトを作る場合はエディタをパソコンにインストールする必要があります。

自分に合ったものを探すと良いと思いますが、
わたしはSublimeTextを使っています。

他には、BracketsVScodeがおすすめです。

教材はこの本を使用しました。

Progateで学んだことはもちろん
Progateでは書いていない擬似クラスの使い方や装飾の仕方

が書いてあるのでさらにプログラミングの知識をインプットすることができます。

しかし、この本だとブロックや画像の配置の仕方に

floatプロパティ

が使われています。

個人的には配置には

displayプロパティ

がおすすめです。

概念についてはこのサイトが本当におすすめなのでぜひ見てみてください。

日本語対応!CSS Flexboxのチートシートを作ったので配布します

・HTMLサイトを自分で作れるようになる

作ったサイトをWordPress化してみる

MAMPを使ってHTMLサイトをwordpress化してみましょう!

いまや世の中のサイトの3分の1はwordpressによって作られています。
HTML&CSSを勉強するのであれば、Woredpressまで勉強してしましょう。

サイトはこのサイトを参考にやってみましょう!

静的HTMLサイトをWordPress化するときの具体的な移行手順

・WordPressの仕組みを理解する
・PHPを理解する

wordpressレッスンブックでwordpressのブログを作ってみましょう

HTMLサイトをWordPressサイトにする方法がわかったあとは、
WordPressの投稿機能の使えるサイトを作ってみましょう。

教材はこの本を使いました。

HTMLサイトをWordPressサイトにするだけではわからない
WordPressの投稿機能の仕組みがわかります。

・WordPressの投稿ページの仕組みを理解する
・プラグインを理解する

最後に作ったサイトをコーポレイトサイトにしてみましょう!

wordpressのブログができたらつぎはそのサイトをコーポレートサイトにしてみましょう。

wordpressは固定ページとブログページ(投稿ページ)の2つを組み合わせてサイトを作ることができます。

wordpressを使ったコーポレートサイトは
固定ページを複数用意することで会社情報や事業内容などのページを作っています。
よって、page-xxxx.php や front-page.phpの概念まで理解しましょう。

この概念の理解には、このサイトの図がおすすめです。
この図のおかげでコーポレートサイト の仕組みがとてもわかるようになりました。

WordPress テンプレート階層

・WordPressのテンプレート階層の考え方を理解する
・コーポレートサイト の作り方を理解する

まとめ

これでわたしはワードプレスを使ったコーポレートサイトの案件受注ができました。

ぜひ参考にしてみてください。

今日はこれで^^