【プログラミング6ヶ月目】WordPress案件を納品しました!

こんにちは。

元銀行員エンジニアのきたしょー(@KitamuraShohei)です。

 

プログラミング6ヶ月目の成果報告です!

  • 収益:162,000円
  • 新規案件受注:0
  • 勉強時間:224時間

 

プログラミング6ヶ月目は4ヶ月目に受注したWordPress案件のコーディングからWordPress化までを行いました。

「WordPress化は時間がかかるかもな〜」と不安だったのですが、特につまずくこともなくすんなり納品することができました

【プログラミング5ヶ月目】WEBデザインに初挑戦したら大苦戦しました!

2019-08-06

 

本記事では、プログラミング6ヶ月目を振り返ります。

 

プログラミング6ヶ月目はWordPressオリジナルテーマ制作案件に取り組みました

プログラミング6ヶ月目は主にコーディングとWordPressオリジナルテーマ制作に取り組みました。

これまでWordPressについては当ブログで記事を執筆したり、有料テーマやプラグインを導入する程度の経験しかなかったので、いきなりオリジナルテーマを作れるのか不安でした。

 

ですが、思ったよりWordPress化は簡単でしたね

むしろ、HTML/CSSコーディングしたファイルをWordPress化するよりもレスポンシブ対応を含めたコーディングの方が10倍大変だったくらいです

 

本記事ではこれからWordPress案件のデザインカンプ制作後からの作業について解説していきます。

WordPress案件を受注してからデザインカンプ制作までの作業については以下の記事にまとめてるので事前に読んでおいてください。

 

【あわせて読みたい】プログラミング5ヶ月目の成果報告

【プログラミング5ヶ月目】WEBデザインに初挑戦したら大苦戦しました!

2019-08-06

デザインカンプ制作からWordPress案件を納品するまでの流れ

1:デザインカンプをコーディングする【テスト環境】

デザインカンプが完成したら、テスト環境に適当なファイルを作ってコーディングします。

 

ここで注意して欲しいのは、いきなりお客様のサーバー上(本番環境)にファイルをアップロードして制作作業しないこと。

最初から本番環境で制作作業してしまうとURL検索したときに制作途中のサイトが閲覧できる状態になってしまいます。

お客様に作りかけのサイトを見せて迷惑を掛ける可能性があるので、まずはサーバー上にテスト環境を構築してからサイト制作していきましょう

 

話を戻すと、ぼくの体感としては、デザインカンプ通りにコーディングしていく作業が一番大変でした

一般的に定型化されたデザインならコーディングしやすいのですが、コンテンツの配置が独特なデザインはやはり難しいです。

 

エンジニア界隈には「HTML/CSSはプログラミングじゃない!」という声もありますが、ぼくはHTML/CSSは立派なプログラミングと感じてます

デザインカンプ通りにコーディングしたり、細かい箇所までレスポンシブ対応するのはマジで難しいんですよね。

マジでちょっとした箇所がズレる。

 

「たくさんの言語を扱えるようになりたい」というプログラミング初心者の気持ちも分かりますが、まずはHTML/CSSを正確に扱えるスキルを身に付けることが大事だと痛感しました。

 

2:HTML/CSSファイルをWordPress化する【テスト環境】

コーディングが終わったら、テスト環境にWordPressを導入して、HTML/CSSファイルをWordPress化します。

WordPressは一般的なHTML/CSSサイトとは違って、ヘッダー、フッダー、サイドバーなどの各パーツごとにファイルを分ける必要があります。

 

WordPress化でのポイントはWordPress独自の関数を使いこなせるかどうか

HTML/CSSファイルのコードをWordPress独自の関数に置き換えていく必要があるんですね。

とはいえ、コードを覚える必要はなくてGoogleで「WordPress 〇〇」と検索すれば出てくるので安心してください。

 

WordPressオリジナルテーマを制作するにあたり、functions.phpをカスタマイズするならPHPを読めるスキルは必要ですよ

 

3:初期設定やプラグインを導入する【テスト環境】

WordPressのオリジナルテーマが完成したら、初期設定やプラグインを導入します。

 

4:WordPressをテスト環境から本番環境に移行して動作チェックを行う

WordPressにてサイトが完成したら、テスト環境から本番環境に移行して動作チェックを行います。

テストで記事を投稿してみたり、画面を伸び縮みさせてレスポンシブ対応を確認したり、不備がないかをチェックしていきましょう。

 

5:お客様に確認してもらいOKが出たら納品完了

WordPressでオリジナルテーマを完成したら、お客様にサイトを確認をしてもらいます。

OKが出たら納品完了です。

 

ぼくがプログラミング5〜6ヶ月目で制作したサイトはこちらになります。

>>高野塾様のホームページ

 

【あわせて読みたい】WEB制作案件を受注してから納品するまでの全工程

WEBサイト制作案件の受注から納品までの流れ【副業&フリーランス版】

2019-10-14

WordPressに取り組むならPHPを読めた方がいい

ゼロからWordPressオリジナルテーマ制作案件をやって思うのは、WordPressをやるならPHPも読めた方がいいってこと

 

以前、以下のようなツイートをしました。

 

上記ツイートに対していただいたコメント。

 

このように先輩エンジニアから指摘してもらってやっと思い出したんです。

「そういえば、WordPressをやる前にPHPを勉強してたな」って。

いま思えば、プログラミング3ヶ月目に約500ページの参考書でPHPを勉強してたんですよ。

 

要するに、ぼくが特につまずくことなくWordPress案件をこなせたのは事前にPHPを学習していたからなんですね

 

WordPressをやる前にPHPの勉強はしておいた方がいいです

とはいえ、PHPをゴリゴリ書けるレベルまでは必要なくて、PHPをある程度読めてコードをいじれるレベルであればOK。

WordPressの技術的な情報はGoogleで検索すればほとんど出てくるので、サンプルコードを理解して少し改造できるレベルであれば特に問題はないですよ。

 

反省点はHTML/CSSコーディングにおけるクラス名の付け方が不規則だったこと

本案件での反省点はクラス名の付け方に秩序がなかったことです。

同じレイアウトの箇所には同じクラス名を使ったり、命名するクラス名がなくなって「inner1」「inner2」のように「クラス名+番号」をつけたりとクラス名の付け方にルールがありませんでした。

 

なので、コーディングの最中に1箇所レイアウトを変更したら、同じクラス名をつけている他のレイアウトも総崩れしてしまう事態に見舞われたんですよね

コーディングするページ数が多くなるとクラス名が被ることはだれもが経験したことがあるはず。

 

クラス名の付け方について良い方法がないかGoogleで検索してみたら、この世にはCSS設計手法というルールが存在することを初めて知りました

「やはり他のコーダーさんも同じ悩みを抱えていて、その悩みを解決する手法はすでにあったのか!」とコーディングが終わってからようやく気が付いたんですね。

 

ぼくはこの反省を生かしてこれからクラス名の付け方についてはBEMあたりを使っていきます。

プログラミング初心者の方もいまはよく分からないかもしれませんが、世の中にはCSS設計手法というルールが存在するということだけでも頭に入れておくといいですよ。

 

プログラミング6ヶ月目:勉強方法はWordPress案件/参考書3冊

プログラミング6ヶ月目はスキルアップのために以下の勉強をしました。

  • コーディング・WordPress
  • 参考書:WordPress

 

1:WordPress案件への取り組み

WordPress案件を受注してから納品するまでの全行程、デザインカンプ制作、HTML/CSSコーディング、WordPress化に取り組みました。

やはり実践が一番スキルアップするのは間違いないですね。

 

2:いちばんやさしいWordPressの教本

WordPressの概要について学習するためにこちらの参考書を読みました。

内容としては1時間ほどでサクッと読める超初心者向けでしたね。

WordPressを触ったことがない方は読んでみる価値ありですが、すでにご自身でブログを運営している方は読む必要はありません

 

3:WordPressレッスンブック

こちらの参考書を使って実際にWordPressの自作テーマを作りました。

自作テーマの作り方が初心者にも分かりやすい文章で書かれているので、WordPressのテーマをいじったことがない初心者にはかなりおすすめです。

 

4:WordPressのカスタマイズがわかる本

こちらはWordPressのテーマ作成について詳しく学びたい方向けの参考書です。

WordPressの専門用語が多くて、WordPress未経験者には難しい内容だったので、レベル的にはWordPress案件をこなしたことがある中級者向けといった感じですね。

 

 

ぼくがWordPress参考書を3冊やってみて思うのは、WordPress初心者は「WordPressレッスンブック」のみで十分だということ

WordPressの情報はネット上にたくさん落ちているので、あとは案件に取り組みながらググって学んでいけばOKです。

 

プログラミング7ヶ月目は月収25万円を目指します!

ぼくのプログラミング6ヶ月目の振り返りが少しでもあなたのお役に立てたなら大変嬉しいです。

7ヶ月目は案件が落ち着きそうなので、これまでに作ったポートフォリオを整理して心機一転営業しまくりたいと思います!

目指せ月収25万円です!

 

引き続き、プログラミング頑張っていきます!!!

 

【あわせて読みたい】プログラミング7ヶ月目の成果報告

【プログラミング7ヶ月目】ようやく月収20万円を突破しました!

2019-11-20

 

  • プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する!

2019-02-06

プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】

2019-09-21

本気でおすすめできるプログラミングスクール5選【現役エンジニア厳選】

2019-02-24

ABOUTこの記事を書いた人

当ブログ《きたらいふ》を運営している30歳。地方銀行で丸5年働いた後、WEB系フリーランスとして独立。完全未経験からプログラミングを始めて1年で月商120万円を達成。現在はフリーランスエンジニアとして都内の企業に常駐勤務。Twitterフォロワー数11,000人超。スルメが大好物。