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

こんにちは。

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

 

プログラミングを始めて6ヶ月が経過したので、6ヶ月目の成果報告を行いたいと思います。

 

〜プログラミング6ヶ月目の成果〜

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

 

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

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

【プログラミング5ヶ月目】Webデザインに苦戦した1ヶ月でした!

2019-08-06

 

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

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

プログラミング6ヶ月目はひたすらHTML/CSSコーディングとWordPressオリジナルテーマ作成に取り組みました。

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

 

ですが、思ったより簡単にHTML/CSSコーディングをWordPress化することができましたね

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

 

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

では、デザインカンプ制作からWordPress案件を納品するまでの流れを簡単に説明します。

WordPressオリジナルテーマの詳しい作成方法については参考記事を掲載していますので、ぜひこの機会にブックマークしておいてください。

 

1:デザインカンプをHTML/CSSコーディングする

デザインカンプが完成したら、適当なファイルを作ってHTML/CSSコーディングしていきます。

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

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

 

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

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

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

 

案件を受注してからデザインカンプを制作するまでの流れはこちらの記事に書いています。

【プログラミング5ヶ月目】Webデザインに苦戦した1ヶ月でした!

2019-08-06

2:HTML/CSSコーディングをWordPress化する

レスポンシブ対応までしたHTML/CSSファイルをWordPress化していきます。

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

 

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

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

とはいえ、コードを覚える必要はなくてGoogleで検索すれば分かるコードばかりなので心配ご無用。

 

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

細かい技術的なWordPressオリジナルテーマ作成方法はこちらの記事をご覧になってください。

3:WordPressをインストールしプラグイン導入

ローカル環境でWordPressのオリジナルテーマを作成したら、いよいよ本番環境でWordPressを立ち上げていきます。

WordPressのインストール方法やWordPressに導入すべきおすすめのプラグインはこちらの記事をご覧になってください。

4:動作チェックを行って顧客にOKをもらったら納品完了

以上の流れでWordPressでオリジナルテーマを作成したら、最後に動作チェックを行い、顧客にOKをもらったら納品です。

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

 

今回、ぼくがWordPressでホームページを制作させていただいた高野塾(@japagod)さんのサイトはこちらです。

高野塾の公式サイト

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

以前、以下のようなツイートをしたのですが、改めて考えてみると、WordPressをやるならPHPもある程度読めた方がいいですね。

 

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

 

こんな感じで先輩エンジニアの方からご指摘をいただいてやっと思い出したんです。

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

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

【プログラミング3ヶ月目】今後を見据えてPHP基礎学習に専念!

2019-05-09

 

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

CSS設計手法の詳細について以下の記事をご覧になってください。

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

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

〜プログラミング6ヶ月目の勉強方法〜

  • HTML/CSSコーディング・WordPress化
  • 参考書:WordPress

 

勉強方法①:WordPress案件

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

やはり実践が一番スキルアップするのは間違いありません。

 

勉強方法②:いちばんやさしいWordPressの教本

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

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

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

 

勉強方法③:WordPressレッスンブック

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

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

 

勉強方法④:WordPressのカスタマイズがわかる本

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

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

 

 

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

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

 

プログラミング7ヶ月目は収益250,000円を目指します!

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

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

収益は目指せ250,000円です!

 

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

 

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

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

2019-02-06

【無料体験あり】おすすめプログラミングスクール5選!現役スクール生イチオシ!

2019-02-24

ABOUTこの記事をかいた人

元銀行員Webエンジニアブロガー。月間2.3万人に読まれる当ブログ《きたらいふ》を運営している29歳。当ブログのメインジャンルは「プログラミング・働き方・お金」の3つで「ぼくがあなたの背中を押します」をテーマに運営中。これからの人生についてハゲるほど悩んだ挙句、愛車ハリアーを売って丸5年勤めた銀行を辞めました。Web制作のお仕事絶賛大募集中!!!