Webサイト製作を学ぶなら『WordPressの教科書2』で!【プログラミング学習記録⑤】

プログラミング学習記録シリーズ

この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。

こんばんは、プログラミング初心者の氷犬です。

 

前回の記事はこちら→【プログラミング学習記録④】はじめてのランディングページ模写【画像あり】

 

この記事では、「『Wordpressの教科書2」を使ったWordpressによるサイト構築の学習」について書いています。

  • HTML/CSSの基礎学習はだいたい終わった
  • WordPressを学ぶ上でおすすめな本を知りたい
  • 「Web系エンジニアになりたいけど、何を学習したらいいんだろう」

 

 

なお、この記事を読む前にこちらの記事を読むことをおすすめします↓

【プログラミング学習記録③】WordPressの基礎はドットインストールで

ドットインストールで勉強してからでないと、『Wordpressの教科書2』をやりきるのは相当しんどいと思うので…

[toc]

-スポンサードサーチ

Web系エンジニアを目指すならWordpressを学習しよう!

Web系エンジニアを目指すなら、Wordpressの学習はほぼマストといっていいでしょう。

理由は「Wordpressは世の中のWebサイト製作によく使われているから」ですね。

「よく使われている=ニーズがある=エンジニア需要がある」ということなので、仕事も獲得しやすいというメリットがあります。

 

「Wordpressの知識があると仕事ができる」ということは、マナブさんとテツヤマモトさんのブログを見るとよくわかりますね(^_^)

マナブさんのブログ⇒【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

テツヤマモトさんのブログ⇒フリーランスエンジニアを目指すなら、WordPress制作をやるべき理由

WordPressの基礎はドットインストールと本で身に着けよう

【プログラミング学習記録③】WordPressの基礎はドットインストールで】でも書きましたが、Wordpressの基礎はドットインストールで学習するのがおすすめです。

理由は「ドットインストールの方が難易度が低いから」ですね。

本だと値段も高いし、ボリュームも多いのでやりきるのが大変なので、手始めにドットインストールで学習するのがいいでしょう。

 

ドットインストールで基礎の基礎学習を終えたら、本に移るのがおすすめです。

-スポンサードサーチ

『Wordpressの教科書2』を紹介します

この記事では、『Wordpressの教科書2』を紹介します。

僕がこの本を買った理由はすごく単純で「おすすめしている人がいたから」です。

 

プログラミング学習/アフィリエイト/SEOの情報を発信している、マナブさんのブログ記事のとおりに僕は学習しています。

【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

(せっかくの機会なので、マナブさんのTwitterもフォローしておきましょう ⇒ マナブ@バンコク

 

『Wordpressの教科書2』の中身を紹介

WordPressの教科書2はこんな設定(↓)のもとにWebサイトを製作する、という内容です。

  • アジアパシフィック旅行社という旅行会社から自社サイトの製作依頼が来る
  • PC・スマホの両方に対応したWebサイト
  • 素人でも管理が比較的簡単なもの←Wordpressってことです

実際に作ったサイトのイメージはこちら

実際に僕が作ったページはこちら(画像です)

サーバーにアップロードするのが手間だったので画像ですみません(-_-;)

 

トップページのイメージだけ貼りますね↓

2013年に発売された本なので、デザインが古臭いのはご愛敬です笑

 

-スポンサードサーチ

WordPressの仕組みが学べる

『Wordpressの教科書2』では以下の流れでWebサイトを作っていきます。

  1. WordPressのインストール
  2. htmlファイルの確認
  3. htmlファイルをphpファイルに
  4. index.htmlをヘッダー/コンテンツ/サイドバー/フッターに分割
  5. 固定ページの作成
  6. 投稿ページの作成
  7. カスタム投稿ページの作成
  8. 子テーマの導入によるスマートフォン対応
  9. プラグインの導入&説明

 

Webサイトの構造は、ヘッダー/メインコンテンツ/サイドバー/フッターの4つに大きく分類することができます。

WordPressだとこういうイメージですね↓

図のとおり、各パーツをひとつひとつ作り込んでいきます。

 

HTML/CSSでパーツを作り、PHPで組み合わせる

もう1度トップページを貼ります。

目で見ると1ページに感じますが、実際はパーツごとに作り込んだものを組み合わせて表示させているんですね。

  • HTML/CSS/jQueryでパーツの見た目を作る
  • PHPの関数を使って組み合わせる

 

パーツの情報をデータベースに取り込んで、パーツをPHPで呼び出して管理するためのシステムが「Wordpress」という感じでしょうか。

 

ブログの記事を書いて表示するまでの流れは以下のとおり。

  1. 記事を書く
  2. 書いた記事がデータベースに保存される(MySQL)
  3. データベースからPHPを使って呼び出す
  4. ブログに表示する

『Wordpressの教科書2』はゼロからWebサイトを作るので、こういう流れが具体的にイメージできるようになります。

 

スマホ対応は子テーマを実装してつくる

WordPressには親テーマと子テーマという機能があります。

簡単にいうと、子テーマは親テーマにひと手間加えたものですね。調味料みたいな。

スマホ用の表示を作るには、親テーマの内容を踏まえつつ、子テーマで調整するというイメージです。

 

実際に作ったファイルはこんな感じ。

パソコン用表示のデータ

パソコン用のデータは全39ファイル。

スマホ用表示のデータ

一方でスマホ用データはこれだけ。

このスマホ用テーマの作り方も、実際に本を進めていく中でわかるようになります。

 

-スポンサードサーチ

『Wordpressの教科書2』の感想【メリット・デメリット】

ここまで『Wordpressの教科書2』で学習した内容を簡単に説明しました。

 

では、「実際にやってみた感想」を書いてみますね。

よかったこと【メリット】

WordPressの教科書2では、WebサイトをゼロからWordpress対応させるので、

  • WordPressの使い方がわかる
  • WordPressの仕組みがわかる
  • スマートフォン対応のさせ方がわかる

などといった、WordPressの基礎がわかるようになります。

 

特に「Wordpress自体の仕組みがわかるようになる」のは大きいメリットかなと。

ドットインストールよりも細かく作るだけあって、より詳しく学べます。

悪かったこと【デメリット】

一方で、デメリットも多いかなーとは思います。

  1. PHPのコードを書くけど説明が少ない
  2. jQueryの説明は一切ない
  3. デザインが古臭い

まあ、デザインはおいといて、「PHPのコードの説明は書いてあるけど意味がわからない」んですよね笑

 

PHPのコードが読めないと、「実際に何をしてるかわからない」状態になります。

何をしてるかわからないので、「内容はわからないけどとりあえず動くから進めてみよう」みたいなポジティブな気持ちがないと、全部やりきるのは相当しんどいと思います。

 

実際進めるうちにドンドン疲れてきて、1周するのに1週間以上かかってしまいました。

「やらなきゃいけないけどやりたくない」って気持ちです笑

まあ、コードの意味がわかるようになるにはPHPを学習しなきゃいけないので、あくまでも「Wordpressの仕組みをなんとなく理解する」ぐらいの気持ちで取り組んだ方が気楽かなと。

 

プログラミングの参考書を最初から理解できると思わないこと

『Wordpressの教科書2』をやるのが辛かったので、おすすめされていたマナブさんに質問箱で聞いてみました笑

(要約)
おすすめされていた『Wordpressの教科書2』を買って、実際にやってみました。
PHPの知識がないと理解が難しく感じますが、とりあえずがんばっています。
マナブさんの場合は、実際にこの教科書を終えた段階ではどの程度Wordpressの理解が進みましたか?

(すばらしく親切な方で感動しました(T_T)笑)

ということで、「最初からすべて理解しなくてOK」だそうなので、「とりあえず手を動かせ」ってことですね。

 

1回やって終わりではなく、繰り返したり他の教材と一緒にやるのがよさそうです。

辛いかもしれませんが、いつか楽になると思うのでがんばりましょう(^_^)/

『Wordpressの教科書2』まとめ

  • WordPressの仕組みや扱い方はわかるようになる
  • PHP/jQueryの知識がないと完全理解は難しい
  • やると辛いけどいつかは終わる
  • 1度やって理解できると思わないこと

 

次回はこちら⇒自分のブログをコーディングしてみました【プログラミング学習記録⑥】

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA