WEBCAMP:経済産業省が認定!エンジニア転職成功率98%!HikoProこんにちは!大学生フリーランスエンジニアのHikoProです!今回のお悩みフリーランスとしてWordPressの案件(仕事)を受注できるようになりたいけど、何を勉強すればいいか分からない。実際にWordPressの仕事をしている現役フリーランスの方から、案件が受注できるレベルまでにするべき学習内容を全て教えて欲しい!今回の記事では、これからWordPressの学習を始められて、最終的には案件を受注できる様になりたい方向けに、WordPress学習の完全ロードマップをご紹介します!HTML,CSS,PHPなどの学習方法を紹介しているサイトや、プログラミングスクールは多いですが、WordPressの学習方法をまとめているサイトは非常に少なく、プログラミングスクールもあまりありません。WordPressを習得し、案件を受注できる様になると、非常に単価の高い(最低10万円〜)収入を得れる様になるので、ノマド的な自由なライフスタイルを得れることにも直結します。未経験の僕でも独学でWordPressの案件を受注できた方法を全て詰め込んだ記事となっているので、全ての人に実現可能な内容となっています!この記事を読むと得れるメリットWordPressで案件を受注できるまでの学習方法が分かる最短2ヶ月でサイト制作の仕事ができるレベルになる今からWordPressの学習ができる様になる。前提として、HTML,CSSの学習は終わっており、模写コーディングで大体のサイトはコーディングできるレベルである事とします。世界には数え切れないほどのwebサイトがあり、どれを模写コーディングすればいいか迷っている方も多いかと思います。そこで今回の記事では、能力別(初級・中級・上級)に模写コーディングするべきサイトをご紹介します。ランサーズで募集されている案件です。STEP1:WordPressでブログorサイトを開設するSTEP1では、実際にWordPressでサイトやブログを開設してみて、WordPressとは何なのか概要を掴みましょう!STEP1で学ぶ事サーバー、ドメイン、インストールの流れを学ぶWordPressの管理画面の使い方について学ぶWordPressの概要、基礎知識を学ぶWordPressの案件を受注する際には、クライアントはサーバーやドメインの知識は全くないので、この辺りの環境構築も任される場合があります。自分でブログを開設することによって、サーバーの構築の流れが学べるので、いざ案件をこなす際にもスムーズに対応できる様になります。取得するといいでしょう。今回のお悩みWordPressでブログを始めようと思うけど、サーバーとかドメインとかWordPressの設定とかいまいちよく分からないし、難しそう。0からWordPressでブログを公開するまでのマニュアル的な記事を...hikopro.com2019.09.19WordPressのインストールが完了し、ブログを開設できたら、WordPressの管理画面の操作方法について学びます。基礎的な部分を学習しましょう!リンクHikoProSTEP1では、WordPressの大まかな概念と管理画面の使い方や、できる事を学びましょう!STEP2:テーマをインストールし、自分好みにカスタマイズしてみるWordPressの案件を行う際には、必ずテーマというサイトにおける機能や見た目を作るファイルを作る必要があります。STEP2で学ぶ事ネット上にどんなテーマがあるかを知るCSSでテーマを簡単にカスタマイズできる様になるネット上にはもうすでに、ブロガー向けのテーマや、企業用のテーマなどが配布されており、誰でもダウンロードしてWordPressにインストールすることができます。SANGOというテーマJINというテーマこの様にテーマをダウンロードすると、見違えるほどサイトの印象がガラッと変わり、実装されている機能にも違いがあります。(検索機能や、アニメーションなど)ネコ君でもみんな同じテーマを使ったら、サイトにオリジナリティがなくなるね!WordPressの案件では、このようなテーマをインストールしてサイトを作ってしまうと、オリジナリティの低いサイトになってしまいます。顧客のニーズでは、自社の雰囲気が分かるサイトデザインにしたいとか、顧客それぞれによってニーズは様々です。始めに、自分のブログサイトにインストールするテーマが見つかったら、CSSのスキルを活用して、背景色を変えたり、配置を変えてみたり簡単なカスタマイズをしてみましょう!HikoProインストールするテーマはXeoryがシンプルでカスタマイズのしがいがあり勉強になりますよ!Xeory-無料WordPressテーマ-Xeoryはコンテンツマーケティングに特化した無料のWordPressテーマです。内部SEOも最大限まで最適化しているので、このテーマを使って、良質な記事を届けて行けば自然と多くのアクセスを得られるようになっています。xeory.jp管理画面から「外観」→「カスタマイズ」と進むとテーマのカスタマイズを行うことができます。追加CSSをクリックすると、CSSを追加できる様になるので、好きなスタイルを記述して自分好みにカスタマイズしてみましょう!レイアウトを変えてみる色の変更hoverの時の挙動を変えてみるHikoPro案件の中には、あるテーマのCSSを少しいじって終わってしまう案件もあったりします!STEP3:子テーマを作って、幅広くテーマをカスタマイズするWordPressのテーマには、親テーマと子テーマと言うものが存在します。親テーマ:テーマの核となるファイル子テーマ:カスタマイズするためのファイルSTEP2では、子テーマを作らずにWordPressの管理画面だけでカスタマイズをしましたが、HTML要素を追加したり、機能を追加するには子テーマを作ってカスタマイズする必要があります。言うテーマから子テーマを作成し、カスタマイズして作りました!子テーマを作ると見違えるほどサイトの雰囲気が変わります!カスタマイズ無し:https://xeory.jp/extension/子テーマでカスタマイズ:https://hikoproduction.comWordPressの案件において、この子テーマを使ったカスタマイズの案件が非常に多いです。凝ったデザインでなければ、既存のテーマをインストールして子テーマを作り、カスタマイズしてクライアントのイメージに沿ったデザインを作ることができます!この辺りは、クライアントと相談して決めるといいでしょう!↓子テーマの作り方とカスタマイズ方法はこちらの記事を参考にしてください↓WordPressで子テーマを作って既存の親テーマをカスタマイズする方法と理由WordPressをカスタマイズしたいけどどうすればいいか分からない。子テーマをカスタマイズすれば良いと聞いたことがあるが、どうやって子テーマを作るの?あと、なんで親テーマをカスタマイズしたらいけないか理由も...hikopro.com2019.09.05STEP4:静的なHTMLファイルをWordPress化するSTEP3では、既存であるテーマをカスタマイズしてお客様の求めているサイトを作る練習をしましたが、STEP4では、テーマを自分で作ると言う作業を行います。冒頭にも紹介した様に、受注案件の例として「デザインカンプがある」案件を紹介しました。この案件の制作の流れとして、、、デザインカンプをみながらHTML,CSSコーディングするhtmlの静的なページをWordPress化するこの様な流れで制作をしていきます。STEP4で学ぶことHTMLファイルをWordPress化する流れを知るFTPツールの使い方を学ぶローカル環境でのWordPress開発のやり方を知るHikoProこのSTEP4が最も重要で、案件でも多いのでしっかりとマスターしましょう!1.静的なHTMLファイルを用意するまず始めにWordPress化を行うための静的なHTMLファイルを準備します。下記のファイル名でURLのサイトをHTML,CSSで模写し、sampleフォルダとして作ってください。Flywheelと言うツールを使って、構築します。今回はWordPressの学習を始める方向けにWordPress学習のためのローカル環境開発の方法をご紹介します!ネコ君WordPressってインストールすれば簡単に学習できるんじゃないの?ネコ君いいえ!Wo...hikopro.com2019.05.12一般的には、XAMPPサーバーを構築して作ったりしますが、面倒なのでこのソフトを使えば簡単に構築できるのでオススメです!HikoProWordPressの仕事では、ローカルで完成させて、本番環境にアップロードする流れが一般的です!3.HTMLからWordPress化を行うWordPressはPHPと言うプログラミング言語でできているので、HTMLファイルをWordPress化する際にもPHPを使用します。僕PHPなんか全くわからないよ〜。HikoPro安心してください!HTMLをWordPress化する際には、それほど高度なPHPは扱いません!一般的なPHPを使うのでなくWordPress独自のPHPを使うので、PHPをガッツリ勉強しなくてもOKです!先ほど作ったHTMLファイルをPHPファイルに書き換えます。index.html→index.phpsingle.html→single.phparchive.html→archive.phppage.html→page.phpファイルの拡張子を変更するだけで、phpと認識できるので、名前を変更するだけでOKです!style.cssの始めの部分に、これはWordPressのテーマと認識させるために以下のコードを記入します。URI*/次に、header.phpとfooter.phpとsidebar.phpを作成し、ヘッダーとフッター、サイドバーにあたる部分を分割します。html>〜</header>までをカットし、header.phpに貼り付けます。index.phpのサイドバーにあたる部分をカットし、sidebar.phpに貼り付けます。index.phpの<footer>〜</html>までをカットし、footer.phpに貼り付けます。次に、WordPressの独自のPHP関数を用いて、投稿機能や画像のパスを通していきます。デザイン教科書」に全て書かれているので、この本に沿って進めていきましょう!リンク実務でもよく使う手法が、詰め込まれている中〜上級者向けの本です。この本さえマスターすれば、簡単なWordPress制作案件はできてしまうので、持っておくと安心です!4.FTPツールで本番環境にアップするローカル環境でWordPress化ができたら、FTPというファイルを本番サーバーにアップロードするためのツールを用いて、契約しているサーバーにアップロードします。FTPツールの使い方については、下記の記事を参考に行なってください!→【初心者向け】FTPソフトFileZillaとは?ダウンロードから使い方まで解説!【初心者向け】FTPソフトFileZillaとは?ダウンロードから使い方まで解説!今回はWordPressのテーマ編集をする際や、ホームページを自分で立ち上げたり、Web制作のお仕事の際に活用するFTPソフトの中でハイスペックで、現場でもよく使われている「FileZilla」(ファイルジラ)のインストールから使...hikopro.com2019.06.10HikoPro本番環境で、ローカル環境と全く同じサイトが見れていればOKです!STEP5:カスタムフィールドの使い方について学ぶ次に、WordPressの案件で多いカスタムフィールドプラグインの使い方について学びます。詳細を簡単に投稿できるようにして欲しい!」などの要求があります。投稿画面を追加してあげるイメージです。デザイン教科書」に全て書かれているので、マスターしましょう!リンクSTEP6:その他プラグインの使い方について学ぶお客様に簡単にWordPressを扱ってもらうにはプラグインの実装が欠かせません。プラグインを追加すると、コメントの管理やお問い合わせフォームの管理、スパム対策など様々なことができます。納品する前に、最低限追加しておきたいプラグインは以下の通りです。7完全ガイド】WordPressサイトのお問い合わせフォームの作り方【初心者向け】WordPressで運営しているコーポレートサイトや個人ブログに「お問い合わせフォーム」を設置したいがどうすればいいかわからない!方法教えて!ついでに自動返信メール機能や簡単なカスタマイズも教えて欲しい。今...hikopro.com2019.07.11まとめHikoProこれで冒頭でお伝えした案件レベルは十分できるスキルが身につきます!いかがでしたでしょうかか!WordPressの案件は難しそうなイメージがありますが、HTML,CSSをある程度マスターしている方であれば、少し勉強するだけで十分仕事できるレベルまでいけます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。Reserved.タイトルとURLをコピーしました。