Webサイト製作を学ぶなら『WordPressの教科書２』で！【プログラミング学習記録⑤】
この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。
こんばんは、プログラミング初心者の氷犬です。
前回の記事はこちら→【プログラミング学習記録④】はじめてのランディングページ模写【画像あり】
この記事では、「『Wordpressの教科書２」を使ったWordpressによるサイト構築の学習」について書いています。
- HTML/CSSの基礎学習はだいたい終わった
- WordPressを学ぶ上でおすすめな本を知りたい
- 「Web系エンジニアになりたいけど、何を学習したらいいんだろう」
なお、この記事を読む前にこちらの記事を読むことをおすすめします↓
【プログラミング学習記録③】WordPressの基礎はドットインストールで
ドットインストールで勉強してからでないと、『Wordpressの教科書２』をやりきるのは相当しんどいと思うので…
Web系エンジニアを目指すならWordpressを学習しよう！
Web系エンジニアを目指すなら、Wordpressの学習はほぼマストといっていいでしょう。
理由は「Wordpressは世の中のWebサイト製作によく使われているから」ですね。
「よく使われている＝ニーズがある＝エンジニア需要がある」ということなので、仕事も獲得しやすいというメリットがあります。
「Wordpressの知識があると仕事ができる」ということは、マナブさんとテツヤマモトさんのブログを見るとよくわかりますね(^_^)
マナブさんのブログ⇒【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】
テツヤマモトさんのブログ⇒フリーランスエンジニアを目指すなら、WordPress制作をやるべき理由
WordPressの基礎はドットインストールと本で身に着けよう
【【プログラミング学習記録③】WordPressの基礎はドットインストールで】でも書きましたが、Wordpressの基礎はドットインストールで学習するのがおすすめです。
理由は「ドットインストールの方が難易度が低いから」ですね。
本だと値段も高いし、ボリュームも多いのでやりきるのが大変なので、手始めにドットインストールで学習するのがいいでしょう。
ドットインストールで基礎の基礎学習を終えたら、本に移るのがおすすめです。
『Wordpressの教科書２』を紹介します
この記事では、『Wordpressの教科書２』を紹介します。
僕がこの本を買った理由はすごく単純で「おすすめしている人がいたから」です。
プログラミング学習/アフィリエイト/SEOの情報を発信している、マナブさんのブログ記事のとおりに僕は学習しています。
（せっかくの機会なので、マナブさんのTwitterもフォローしておきましょう ⇒ マナブ@バンコク）
『Wordpressの教科書２』の中身を紹介
WordPressの教科書２はこんな設定(↓)のもとにWebサイトを製作する、という内容です。
- アジアパシフィック旅行社という旅行会社から自社サイトの製作依頼が来る
- PC・スマホの両方に対応したWebサイト
- 素人でも管理が比較的簡単なもの←Wordpressってことです
実際に作ったサイトのイメージはこちら
実際に僕が作ったページはこちら（画像です）
サーバーにアップロードするのが手間だったので画像ですみません(-_-;)
トップページのイメージだけ貼りますね↓
2013年に発売された本なので、デザインが古臭いのはご愛敬です笑
WordPressの仕組みが学べる
『Wordpressの教科書２』では以下の流れでWebサイトを作っていきます。
- WordPressのインストール
- htmlファイルの確認
- htmlファイルをphpファイルに
- index.htmlをヘッダー/コンテンツ/サイドバー/フッターに分割
- 固定ページの作成
- 投稿ページの作成
- カスタム投稿ページの作成
- 子テーマの導入によるスマートフォン対応
- プラグインの導入＆説明
Webサイトの構造は、ヘッダー/メインコンテンツ/サイドバー/フッターの４つに大きく分類することができます。
WordPressだとこういうイメージですね↓
図のとおり、各パーツをひとつひとつ作り込んでいきます。
HTML/CSSでパーツを作り、PHPで組み合わせる
もう１度トップページを貼ります。
目で見ると１ページに感じますが、実際はパーツごとに作り込んだものを組み合わせて表示させているんですね。
- HTML/CSS/jQueryでパーツの見た目を作る
- PHPの関数を使って組み合わせる
パーツの情報をデータベースに取り込んで、パーツをPHPで呼び出して管理するためのシステムが「Wordpress」という感じでしょうか。
ブログの記事を書いて表示するまでの流れは以下のとおり。
- 記事を書く
- 書いた記事がデータベースに保存される（MySQL）
- データベースからPHPを使って呼び出す
- ブログに表示する
『Wordpressの教科書２』はゼロからWebサイトを作るので、こういう流れが具体的にイメージできるようになります。
スマホ対応は子テーマを実装してつくる
WordPressには親テーマと子テーマという機能があります。
簡単にいうと、子テーマは親テーマにひと手間加えたものですね。調味料みたいな。
スマホ用の表示を作るには、親テーマの内容を踏まえつつ、子テーマで調整するというイメージです。
実際に作ったファイルはこんな感じ。
パソコン用表示のデータ
パソコン用のデータは全39ファイル。
スマホ用表示のデータ
一方でスマホ用データはこれだけ。
このスマホ用テーマの作り方も、実際に本を進めていく中でわかるようになります。
『Wordpressの教科書２』の感想【メリット・デメリット】
ここまで『Wordpressの教科書２』で学習した内容を簡単に説明しました。
では、「実際にやってみた感想」を書いてみますね。
よかったこと【メリット】
WordPressの教科書２では、WebサイトをゼロからWordpress対応させるので、
- WordPressの使い方がわかる
- WordPressの仕組みがわかる
- スマートフォン対応のさせ方がわかる
などといった、WordPressの基礎がわかるようになります。
特に「Wordpress自体の仕組みがわかるようになる」のは大きいメリットかなと。
ドットインストールよりも細かく作るだけあって、より詳しく学べます。
悪かったこと【デメリット】
一方で、デメリットも多いかなーとは思います。
- PHPのコードを書くけど説明が少ない
- jQueryの説明は一切ない
- デザインが古臭い
まあ、デザインはおいといて、「PHPのコードの説明は書いてあるけど意味がわからない」んですよね笑
PHPのコードが読めないと、「実際に何をしてるかわからない」状態になります。
何をしてるかわからないので、「内容はわからないけどとりあえず動くから進めてみよう」みたいなポジティブな気持ちがないと、全部やりきるのは相当しんどいと思います。
実際進めるうちにドンドン疲れてきて、１周するのに１週間以上かかってしまいました。
「やらなきゃいけないけどやりたくない」って気持ちです笑
まあ、コードの意味がわかるようになるにはPHPを学習しなきゃいけないので、あくまでも「Wordpressの仕組みをなんとなく理解する」ぐらいの気持ちで取り組んだ方が気楽かなと。
プログラミングの参考書を最初から理解できると思わないこと
『Wordpressの教科書２』をやるのが辛かったので、おすすめされていたマナブさんに質問箱で聞いてみました笑
（要約）
おすすめされていた『Wordpressの教科書２』を買って、実際にやってみました。
PHPの知識がないと理解が難しく感じますが、とりあえずがんばっています。
マナブさんの場合は、実際にこの教科書を終えた段階ではどの程度Wordpressの理解が進みましたか？
プログラミング学習で「参考書が理解できない…」というのは定番の悩みでして、結論は「最初からすべて理解しなくてOK」かなと思います。
最初は30%くらいの理解で、前に進むことが大切ですね。あと、伸びシロなので、伸びシロサロンもおすすめです #peing #質問箱 https://t.co/SjXiSEITMn pic.twitter.com/sKfIpwREBg— マナブ@バンコク (@manabubannai) 2018年6月9日
（すばらしく親切な方で感動しました(T_T)笑）
ということで、「最初からすべて理解しなくてOK」だそうなので、「とりあえず手を動かせ」ってことですね。
１回やって終わりではなく、繰り返したり他の教材と一緒にやるのがよさそうです。
辛いかもしれませんが、いつか楽になると思うのでがんばりましょう(^_^)/
『Wordpressの教科書２』まとめ
- WordPressの仕組みや扱い方はわかるようになる
- PHP/jQueryの知識がないと完全理解は難しい
- やると辛いけどいつかは終わる
- １度やって理解できると思わないこと
次回はこちら⇒自分のブログをコーディングしてみました【プログラミング学習記録⑥】
