こんにちは。げんきWEB作者の”げんき”です。
現役のSE（システムエンジニア）です。
WEBサイトの知識ゼロだったWordPress初心者のわたしが ”具体的”に”何を”どのように学習してWordPressでオリジナルテーマのWEBサイトを作成したのかをご紹介します。
１．WordPressの使い方から概要理解
「そもそもWordPressってなんぞや？」という超初心者の知識レベルから始めました。
無料ブログサイト等で記事を書いた経験もありませんでした。
私の職業はエンジニアなのでさすがにパソコンの使い方は知っていましたが、ブログやHP作成に興味をもったことが無かったのでこの方面の知識は”ゼロ”でした。
インフラエンジニアの仕事内容やインフラエンジニアに興味がある方はこちらの記事で紹介しています。
『WordPressの基本的な使い方の学習』
まず初めにやったことは『WordPressって何？』という疑問を解消することから始めた方が良いと考え、『WordPressの概要理解』と『使い方の基礎』を学ぶため以下の書籍『(無料電話サポート付)できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 (できるシリーズ)』を参考に学習しました。
この書籍で学習に要した期間は 約2週間
この書籍は『WordPress初心者向けの入門書籍』です。
『できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 (できるシリーズ)』 の構成
第1章から第9章までの9部構成になっており各章の構成（見出し）は以下の通り
- 第1章 WordPressとホームページの基本を知ろう
- 第2章 ホームページを作る準備をしよう
- 第3章 ホームページのデザインとレイアウトを設定しよう
- 第4章 ホームページにコンテンツを投稿しよう
- 第5章 ホームページの投稿を読みやすくしよう
- 第6章 文章や動画などのさまざまな表現を追加しよう
- 第7章 ホームページの機能を充実させよう
- 第8章 ホームページのアクセス数を増やそう
- 第9章 ホームページの安全性を高めよう
この書籍で学習してみた感想
こちらの書籍はWordPress入門者向けの書籍なのでそれほど難しい内容ではありません。また書籍自体のページ数もメインページは250ページまで。大きな画面入りの解説が丁寧に入っているので、途中で詰まるような事はなく、スラスラと読み進めることができます。
ある程度WordPressの概要や使い方の基礎を理解したところで、自分の好みのデザインのWEBサイト（ブログサイト）を作るためには”HTML”と”CSS”を学ぶ必要があることに気づきました。
POINT
２．htmlとCSSの学習
htmlとCSSの学習に使った期間が一番長かったです。
htmlとCSSは5割程度理解できれば問題なし
学習始めの当時は、”htmlタグ”の意味や使い方がわからないものが沢山ありましたしWordPressでオリジナルのブログサイトを構築してからもまだまだ完全に習得できたわけではありませんが、『Webデザイナーなどの職業』の場合は、完全に習得する必要があるかも知れませんが、個人ブログ作成程度であれば5~6割程度理解できれば十分で、『必要になったらその都度調べる』これでどうにかなります。
重要なのは『とにかく書く』こと
私は「CSSってなんだ？」というところから始めたので、理解できないことは何度もやり直しを繰り返してその都度トコトン調べました。htmlとCSSを独学する上で、最も重要なことは「とにかく自分で書く！」これの繰り返ししかないと思います。とにかく反復して練習していたら『気づくといつの間にかhtmlやCSSが身についていた』こんな感覚でした。
htmlとCSSの学習に使った教材がこちら
この書籍は『モダンなデザインのWebページを作成するためのhtmlとCSSの中級者向け書籍』です。
『HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト 』の構成
Part0からPart3までの3部構成になっており、各Part毎に別々のレイアウトのWebページを作成してそれぞれのコーディングのやり方を学習する形式になっています。
各章の構成（見出し）は以下の通り
Part0 イントロダクション
作成するWebページの説明やコーディングの進め方・デベロッパーツールの使い方の説明など
Part1 スタンダードレイアウト
- Chapter01 このPARTでつくるサイト
- Chapter02 ベースのコーディング
- Chapter03 ヘッダーのコーディング
- Chapter04 メイン領域のコーディング
- Chapter05 サイドメニューのコーディング
- Chapter06 フッターのコーディング
- ★セルフコーディングにチャレンジ （練習問題）
Part2 グリッドレイアウト
- Chapter07 このPARTでつくるサイト
- Chapter08 ベースのコーディング
- Chapter09 ボックスのコーディング
- Chapter10 中ボックスと大ボックスのコーディング
- Chapter11 ナビゲーションのコーディング
- ★★セルフコーディングにチャレンジ （練習問題）
Part3 シングルページレイアウト
- Chapter12 このPARTでつくるサイト
- Chapter13 ベースのコーディング
- Chapter14 ヘッダーのコーディング
- Chapter15 セクション1（ABOUT ME）のコーディング
- Chapter16 セクション2（WORKS）のコーディング
- Chapter17 セクション3（MY SKILLS）のコーディング
- Chapter18 セクション4（CONTACT）とフッターのコーディング
- Chapter19 スマートフォン対応の下準備
- Chapter20 スマートフォン対応のコーディング
- ★★★セルフコーディングにチャレンジ （練習問題）
htmlでのモダンなWEBページの書き方が学習できる
各章毎で実際に３つのモダンなWEBページを作成します。
- スタンダードレイアウト
- グリッドレイアウト
- ランディングページ
この書籍で学習してみた感想
こちらの書籍は、『htmlで1つの箇所を作成して作成した箇所を CSSで装飾 ⇒ htmlで別の箇所を作成して作成した箇所を CSSで装飾 』この一連の作業の繰り返しの構成になっています。このため、『作成したhtmlのパーツにCSSでの装飾が上手く当たっているのか、おかしなところ（CSSの書き方が誤っていないか）はないかなど、CSSがどのような装飾をするためのモノなのか』が、初心者の私でも理解し易かったです。
３つのお洒落なレイアウトのページが作成できるので、ひな形そのままのページが完成できたときは感動を覚えますよ。
POINT
※中級者向けの書籍なのでhtml要素の細かな違いなどの基本的な説明はありません。
私の場合はhtml要素の種類（ブロックレベルとインラインの違いなど）など良くわからなかった
部分はググったりして都度調べて覚えるようにしました。
３．WordPressで独自テーマのWEBサイトをつくる方法の学習
htmlやCSSで静的WEBページを作成する方法を学んだあとは、「WEBサイトをカスタマイズする方法を学びたい！」と思うようになり、下記の教材を使って実際にWEBサイトを作成する方法を学習。
こちらの書籍では『ある架空レストランのWEBサイトを構築して実際に運用していく上で学習していく体の教本』となっておりデザインに関する書籍ではありませんが、WordPressを実践的に使いこなすために必須な知識を多く学ぶことができました。
『WordPress 仕事の現場でサッと使える! デザイン教科書』の構成
各章の構成（見出し）は以下の通り
- Chapter1 WordPressの準備と基本設定
- Chapter2 基本的なテーマを作成する
- Chapter3 プラグインを利用する
- Chapter4 Webサイトを拡張する
- Chapter5 投稿タイプ・フィールド・タクソノミーをカスタマイズする
- Chapter6 ブロックエディターを使いこなす
- Chapter7 管理画面をカスタマイズする
- Chapter8 高度な機能を活用する
- Chapter9 ショートコード・関数・プラグインを作成する
- Chapter10 WordPressを効率的に運用する
- APPENDIX
４．独自テーマのWEBサイト作成（1週間）
さて、ここまでくると １~３ までで学んだ知識をフル活用して実際に自分の好きなデザインでWEBサイトを構築するのみです。
4-1．オリジナルテーマ作成
まずは、工程２で学んだスタンダードレイアウトのデザインを基本にオリジナルのテーマを作成します。
4-2. WordPressにインポート
工程4-1で作成したhtmlファイルを.php形式 （ Index.html → Index.phpに ） にして、CSSファイルと一緒にZIPで圧縮。
圧縮したファイルをWordPressにインポート。
4-3. Index.phpから必要部品の切り出し
必要部品は以下
- header.php
- footer.php
- sidebar.php
- etc
4-4. テンプレートパーツの作成
必要なファイルは新規で作成していきます。
- single.php
- archive.php
- date.php
- category.php
- template.parts.php
- etc
4-3、4-4で切り出した各パーツと新規で作成したパーツをつなぎ合わせていきます。
4-5. WordPressループの作成
投稿記事を表示するためのWordPressループ（phpの関数）を作成します。
4-6. 機能の拡張（プラグイン）
自分のWEBサイトに必要なプラグインをインストールして設定します。
ここまでの工程でWEBサイトの作成工程は完了です。
わたしはここまでの工程を 知識ゼロから 約2か月～3か月ですべて自分で覚えて実行しました。
５．あとがき
わたしはWEBサイトの知識ゼロ の状態から２～３か月でこのサイトを作成しましたが、インフラの知識があることが前提です。
インフラ知識って・・・？
インフラとは、サーバやネットワークなどの基盤部分に関する全般の知識です。
具体的には以下の知識がインフラ知識にあたります。
- WEBサーバの基礎知識（apatchなどの基礎的な知識）
- SSL（暗号化）の基礎知識（SSL化する方法）
- Tera Termの基礎知識（コマンドでWordPressサーバにファイルを作成したり、ファイルの所有者や権限を変更したり）
WEBサイト知識ゼロの初心者でも、一からオリジナルのWEBサイトを構築することは可能です。
ただし、かなりの集中力と努力が必要になりますので、失敗しても「あきらめないでやり続けること」が一番重要です。
優良な書籍やネットの情報をフルに活用してオリジナルのWEBサイトを一から構築してみてください。
努力したぶん、完成したときの喜びも大きいです！
Html・CSS、WordPress初心者の方にオススメの学習書籍
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)
