こんにちは、Autumn(オータム)です。
フロントエンドエンジニアとして働くためにはほぼ必須となっている「wordpress」。副業でよくあるWEB制作の案件もwordpressがよく使われています。
wordpressって聞いたことはあるけど、実際どのように使われてるの？
wordpressの独学方法を知りたい！
そんな方のために、今回はwordpressを独学で習得する方法を解説して行きます。
- この記事を読んでわかること
- ・wordpressについて
・習得までに必要なスキル
・wordpress勉強方法
私自身現在プログラミング歴1年ですが、15~20ページほどの企業サイトを一人で作成できるレベルまで成長しました。
これからwordpressを勉強する方も、途中で挫折してしまった方にも参考になるかと思いますので、ぜひ最後まで読んでいただければ幸いです。
wordpressの基本知識を解説
まずは本題に入る前にwordpressについて簡単に説明しますね。
wordpressは、CMS（Contents Management System）という管理システムの一種で、ブログサイトや企業サイトを作成することができるツールです。
初版リリースが2003年ですが、アップデートを繰り返し、現在も世界の約40％のWEBサイトがwordpressで作成されています。
そんなwordpressの大きな特徴は以下の2つ。
- 誰でも簡単に情報更新ができる使いやすさ
- テーマをカスタマイズすることでオリジナルサイトを作成できる
誰でも簡単に情報更新ができる使いやすさ
もともとブログサイトを作成するために作られたツールということもあり、記事作成がしやすい設計になっています。
画像も貼ることができるので、会社の実績をビジュアルで表現することもでき、汎用性が高いです。
ちなみにこのAutumn blogもwordpressで構成されていますよー
テーマをカスタマイズすることでオリジナルサイトを作成できる
「テーマ」とは、サイトの外観を形成するもので、人間でいう所の「洋服」に近いイメージです。
テーマを違うものに変更したりカスタマイズすることで、自分好みのサイトを作成することができます。
そして、wordpressでのHP作成案件は「テーマのカスタマイズ」がメイン業務です。いわばHPが着る洋服をコーディングで作成していくお仕事なわけですね。
フロントエンドエンジニアとして働くには必須のスキル
いまだにwordpress案件がメイン業務の企業が多いため、wordpressのスキルが必須のパターンも多いです。
実際の業務では、
・新規でのHP作成
・既存サイトのリニューアル
・自社で管理しているサイトの保守管理
などなどいろんなパターンがあり、対応力も求められます。
また、既存サイトのリニューアルの場合は、ドメインやサーバーの対応も依頼されることもあります。
なんにせよ、エンジニア転職を目指すのであれば、覚えておいて損はありませんね。
wordpress学習の前に必要なスキルとは
wordpressの学習方法を説明する前に、前提として習得しておきたいプログラミング言語がいくつかあります。
- HTML/CSS
- Javascript
それぞれ順番に解説していきますね。
HTML/CSS
ブラウザ上に情報を表示させたり、見やすくレイアウトしたりするために使用するWEB制作の基礎中の基礎となる言語です。まずはこれを覚えないと話にならないので、基本的な使い方は勉強しておきましょう。
HTML・CSSの勉強方法については、以下の記事にまとめていますので参考にしてみてください。
Javascript
Javasriptは、HTML・CSSで作成したページに動きをつけるのに使用します。
先ほどの2つより難易度は上がりますが、サイトのクオリティを上げる大切な要素ですので、こちらもマストで勉強しましょう。
こちらも私が実践した勉強方法をまとめた記事がありますので、よかったらどうぞ。
wordpressの勉強方法
上記3つの言語の学習を終えたら、早速wordpressの勉強を始めていきましょう。
学習手順は以下の3ステップです。
- wordpressの構造を理解する
- PHPの基本文法を勉強する
- 実際に自分でサイトを作成してみる
wordpressの構造を理解する
wordpressは「テンプレート階層」という独自のシステムで構成されており、ここを理解しないと手も足も出ません。
そして、「全体構造の理解不足」がwordpress学習で挫折するポイントです。
私は最初、参考書を読んで勉強しましたが、wordpressの全体像がつかめず、頭が割れそうなぐらい悩んだのを今でも覚えています。
でも安心してください、わかりやすく解説しているyoutube動画がありますので紹介します。
アキユキさんというWEBデザイナーの方の動画で、wordpressの基本的な仕組みをまとめてくれていて、超オススメです。
この動画を3周すれば、大まかな全体像を理解することができると思います。
PHPの基本文法を勉強する
wordpressは「PHP」というプログラミング言語で作られています。
ガチガチに習得する必要はないものの、基礎文法ぐらいは知っておくべきです。
こちらも、天下のyoutubeに有益な動画がありますのでご紹介します。
キノコードさんという方が投稿しているPHP文法のまとめ講座です。1本3~5分でまとめられていて、見やすく参考になります。もちろん無料です。
これも3周して基礎文法を理解しましょう。
実際に自分でサイトを作成してみる
最後に、実際に自分でwordpressを作成してみます。
結局、自分で手を動かしてみないとwordpressを理解するのは難しいです。百聞は一見に如かず、ですね。
大まかな作成の手順は以下の通りです。
- HTML / CSS / Javascriptで静的なページを作成
- レンタルサーバー契約＆独自ドメイン取得
- wordpress立ち上げ
- HTMLをwordpressに移行
HTMLで静的なページを作成
まずは、デザインデータを見ながらHTMLで静的なページをローカルで作成していきます。
必要に応じてCSS・Javascriptでレイアウトやアニメーションを追加し、装飾を施しましょう。
基本コーポレートサイトであれば、最低10〜15ページぐらいのボリュームになることが多いですが、最初はトップページ＋下層ページ3枚ぐらいの簡単なボリュームでもちょうどいいと思います。
wordpress立ち上げ
ページの準備ができたら、いよいよwordpressを立ち上げます。
wordpressを使用するにはレンタルサーバーと独自ドメインが必要となります。
費用としては、レンタルサーバーが月額1000円前後、ドメインも数百円で購入可能です。
「勉強段階でお金をかけたくないなー」
と思う方もいますが、ここは将来の自分のためだと捉えて投資しましょう。
数千円の自己投資が未来の10万を生み出します。
レンタルサーバーであれば「Xサーバー」か「ConoHa WING」、ドメインであれば「お名前.com」が使いやすくてオススメです。
特にXサーバーは、ドメインの取得からwordpressの立ち上げまで一括ですることができるので、特に理由がなければ初心者の方はXサーバーでいいんじゃないかなと思います。
作成したHTMLデータをwordpressに移行する
wordpressを立ち上げると、デフォルトでいくつかのテーマファイルが登録されていますので、コピペして作成したHTMLデータをPHPファイルに移行します。
wordpressのPHPファイルには色々な種類があり、ファイルの名前によって役割が決まっています。
例を挙げるとこんな感じです。
「index.php」→「メインページ」
「page.php」→「下層固定ページ」
「archive.php」→「記事一覧ページ」
「single.php」→「記事詳細ページ」
なので、ページ構成に合ったPHPファイルを随時準備していくことになります。
また、wordpressは独自の関数を使ってカスタマイズしていくので、覚える要素が多く、最初はかなり難しく感じるかと思います。
ただ一度コツを掴むと、一気に理解できようになりますので根気よく継続していきましょう。また、途中で分からなくなったら一度基礎に戻って繰り返し復習をするのも大事です。
ついでに抑えておきたいスキル【WEBデザイン・ライティング】
wordpressの勉強方法について解説してきましたが、合わせて勉強しておきたいスキルが2つあります。
そのスキルは以下の2つ。
- WEBデザイン基礎
- WEBライティング
WEBデザイン基礎
現場では、デザイナー作成したphotoshopなどのデザインデータを元にコーディングしていくため、エンジニア自身もphotoshop・XDの使い方は理解しておいた方がいいです。
また、コーディングだけでなく、自身でデザインをすることができれば、仕事の幅も広がり収入アップにつながります。
wordpressの学習が一通り終わったら、WEBデザインの勉強にも挑戦してみましょう。
WEBライティング
一見するとあまり関係ないように感じますが、自分でオリジナルテーマを作成する際に必要になってきます。
WEBライティングを学習すれば、以下の2つが身につきます。
- ページ全体を構成する力
- 自分が一番伝えたいことを明確にする力
「自社の認知度を高めたい」
「自社商品をたくさん売りたい」
「優秀な人材が興味を持つようにしたい」
などなど、HPを作成したいクライアントは、何か明確な目的があるはずです。
クライアントの目的に合ったサイト構成を作成するためには、WEBライティングの力が役に立つんです。
関連書籍を読んでみたり、自身でブログサイトを開設したり、色々行動してみるとライティング力が高まりますよー
まとめ：wordpressマスターになってエンジニアになろう
wordpressを扱えるようになれば、エンジニア転職まであと一歩です。
転職市場の情報収集・市場分析を行い、書類・面接選考の準備をしていきましょう。
情報収集をするには、転職サイトに登録して、転職エージェントを活用するのがオススメです。私自身が実際に利用したサイトをまとめていますのでぜひ参考にしてください。
また、書類・面接選考にはポートフォリオの作成が必須です。オリジナル性の高いポートフォリオを準備して転職市場を勝ち抜きましょう。
WEB制作ができるようになれば、人生の選択肢も広がります。自分の将来を変えていくのは自分しかいません。全力でコツコツ積み上げていきましょう。
最後まで読んでいただき、ありがとうございました！
