プログラミングは初心者（半年ほど勤務先の管理部門にてHPの更新作業をやったことがあるが、CMSだったので、HTMLが何かが分かる程度。 ）だった私。
そんな私が本業の傍ら1年かけてWordpressのカスタマイズができるようになるまでの具体的な流れをお伝えしていきます。
プログラミング学習の前にやっていたこと
ITパスポートを取得したり、基本情報処理の勉強をしたりしました。これ、意外とプログラミングにも役立ったかもしれません。
- コンピュータが認識する言葉はどんなものなのか、全体像がつかめる。
- システム開発の流れが分かる。
- 簡単なプログラミングの基礎が勉強できる。
直接プログラミングに関係ない内容がほとんどなので、プログラミングのためだけにやる必要はないと思いますが、IT企業で働く方はもちろん、ITに全く疎い方がプログラミングを始めるにあたって、触れておくと理解が深まることも多いです。
（私は結果的にそうでした。例えば、絶対参照とか、Loopを初めて勉強したのは情報系の資格勉強でした。）
詳しくはこちら
実際の学習スケジュール
下記の内容をやるのに、毎日2～2.5時間程度の勉強時間で大体1年くらいかかりました。
| プログラミング | ブログ作成 | |
| 期間1 | HTML・CSSの基礎 実際のWEBサイトを模倣作成 | アメブロ |
| 期間2 | マクロ・Javascriptなどの基礎 | WordPress（既存テーマ） |
| 期間3 | WordPress用のphpで1からテーマ作成 HTML・CSSのレベルUP 主に検索機能の設置 | WordPress（オリジナルテーマ） |
期間１
HTML・CSSの基礎
学習サイト（アプリ）で基礎から勉強
初めは無料で、レッスンが進むと有料（月980円）になるのですが、有料でやる価値がありました。
- 初心者にも「プログラミング」とは何かが分かるように説明されている。
- 実際、コードエディタのようなものに記述して勉強できるため、実践的。
- スマホでもコードを書く練習ができる。
- 1ヶ月受け放題。
本買うとなったら1冊2000～3000円しますから、2か月以内で終わるなら十分元は取れます。
説明を読んでいるときはできた気になるのですが、あとで実践練習が出てきて何も見ないで1ページ作成する、とかになると全然自力でできないので、何度も何度も繰り返しました。
実際のWEBページを模倣して練習
ここからレンタルサーバを借ります。まずは、無料お試しからスタート。
自分で真似できそうなデザインを探してきて、できるだけそれに近づけるように練習しました。
学習サイトや本だと答えの通りにコードを書けば作れてしまうのですが、実際のものを模倣しようとすると、自分でどうしたらよいか試行錯誤しながら作ることになります。どうすればいいか分からなくなったら「要素の調査」で調べられるので、全く0～自分で作るよりはヒントがあってちょうどよかったです。
アメブロでブログを始める
ゆくゆくはワードプレスでブログを始めたかったのですが、結構初心者にはハードルが高いと判断したので、まずは無料ブログで「ブログを書く」ことに慣れることにしました。
実際、日々アクセス数が出て刺激になったり、読者を増やすべく他の方に「いいね」しまくったり等、コードを書く以外のところが勉強になりました。
コードの面でも、アメブロの機能にはないデザイン等を徐々にHTMLのエディターで加えていくことになり、意外と勉強になりました。
期間２
マクロ
HTMLとCSSは厳密にいうとプログラミング言語ではありません。（プログラムを作れないから）そういった意味では、マクロが私の初のプログラミング言語ということになります。
プログラミングの基礎がつかめただけではなく、職場の業務改善にもつながり、残業まで減らすことができたので、マクロを勉強して正解でした。
Javascript
マクロの後に、プロゲートにてJavaScriptをやりました。プログラミングの基礎が分かっていたため、プロゲートでの学習もアッという間に終わりました。（が、しばらくJavaScriptを使う機会はなかったです。WordPressが高機能なので。）
WordPressを始める
前回の内容で言うところの、「レベル１」からスタートしました。しばらくは、WordPressのカスタマイズをしている方のページを読んでは、その通りコピペしてやっていました。
また、いかにCSS等をカスタマイズしないで済むか、ということで、良いプラグインを見つけてそれを使ってブログを書いていきました。
意外と大変だったのは、ブログに使う画像の準備でした。イラストの描けない私はフリー素材から見つけるわけですが、見つけるのも加工するのも慣れないうちは一苦労でした。
期間３
期間２から期間３への移行は、単純にはいきませんでした。ここから、パタッと情報が少なくなります。
私は、自分のブログに「サイト内絞り込み検索」の機能をつけたかったのですが、どうやって作るのかが全然わかりませんでした。なんの言語やツールを使えばよいのかさえ、調べられなかったのです。
WordPressのオリジナルテーマの作成
試行錯誤しているうちに、ようやくWordPressをカスタマイズする方法を見つけました。PHPを使ってコードを書いていく必要がありますが、PHPは初めてです。
とりあえずマクロで学んだように、お手本をコピペしてみますが、思ったように映し出されません。分からないところが多すぎて、どこを直せばよいのか分からず、全くお手上げ状態でした。
そこで、WordPressのテンプレートを１から作る、というところにたどり着きました。１から作ると言っても、真っ白なページから作る自信がなかったので、underscore_sという開発用テーマ（デザインがほとんどなし）にてカスタマイズすることにしました。
使った本はこちらです。
当時の私にはちょっと難しかったのですが、分からない用語はWEBで検索したりして何とか乗り切りました。
サイト内検索機能の設置
上記にじっくり取り組んでから再度チャレンジしたら、ついに目的の機能を作ることができました。
HTML・CSSのフレキシブルスタイル・グリッドスタイル
オリジナルテーマを作っていく内に、自分のCSSの能力向上が必要、と強く実感しました。特にWordPressの既存テーマだとレイアウトは最初から作ってあるので、その辺りのレベルアップをしていきました。
この本が大当たりでした。ＰＣ⇔スマホ対応のレイアウトの作り方もコツがつかめ、その後の副業にもつながったと思います。
