MEGUMI

【独学方法】WordPressのオリジナルテーマが作れるようになるまでに僕が行った6つのステップ

地図

Web制作を独学で勉強し始めてから2年ほどが経過。
はじめは参考書にあるデモサイトを作れるレベルでしたが、今ではWordPressのオリジナルテーマを作れるまでにスキルが身につきました。

作りたいとものを形にできるのは、とても気持ちがいいしモチベーションにもつながりますよね。

今回は、WordPressのオリジナルテーマを作るまでに私がしてきた6つのステップをまとめてみます。
ある程度HTMLやCSSなどの基礎的な知識を知っている方、これからWeb制作の勉強を始めようと考えている方の参考になれば嬉しいです。

 

動画学習サイトを活用する

動画学習

WebページはHTML/CSSという基礎的なマークアップ言語で成り立っています。
オリジナルのサイトをつくるための第一歩は、この2つの言語をマスターすることです。

とはいえ、そこまで気を張る必要はありません。
HTML/CSSはプログラミング言語と違い基本的なルールと知識を覚えれば誰でも簡単に習得できるからです。

ドットインストール」「Progate」という本当に便利な素晴らしい動画学習サイトがあるので、それらを活用して気軽に初めてみましょう。

 

 

①ドットインストールでHTMLとCSSの講座を見る

ドットインストールは、ほとんどの講座を無料で受けることができるプログラミング学習サイトです。
全部で343のレッスン(当記事執筆時点)があり、1つの動画は3分にまとめられています。

ホームページをこれから作ってみようと考えている方は、まず「はじめてのHTML(全15回)」と「はじめてのCSS(全17回)」を視聴しましょう。
Webサイトがどのようにできていて、これから何を自分は勉強していけばいいのか大枠を掴めるようになるはずです。

 

 

②ProgateのHTML&CSSを全てクリアする

次にProgateでドットインストールで学んだことを復習しましょう。

アウトプットの量は多いに越したことはありません。
自分の引き出しを増やしたいという方はProgateでも学習してみましょう。

Progateのメリットは、Webページの完成形をあらかじめ知ることができ、アウトプットを意識しながら基礎知識を習得できる点です。

これから先プログラミングを勉強すると、成果物に必要な知識や機能に絞って学び、わからないところはググって調べる力が必要になるので、そういった点でいうとProgateの学習法はこの先も役に立つと思います。

ただし、ドットインストールで十分大枠を掴めたと思う人は必要ないかもしれません。

 

 

学習本でとにかくデモサイトをつくる

学習本

③ HTML5&CSS3デザインブック

HTML/CSSの学習本を買って、とにかくデモサイトを作りましょう。
天才的な記憶力と応用力を持った人じゃない限り、動画サイトで勉強しただけで質の高いWebサイトを作れることはないと思います。

HTML5&CSS3デザインブック

この本はWeb制作の勉強をする定番の学習本で、スマートフォンやタブレットなど各デバイス毎に最適なレイアウトを組む方法を学ぶことができます。

最近はパソコンよりもスマホでネットを閲覧する人が増えているため、スマホ対応のWebサイトをつくるスキルは必須です。この本を一通り読み終われば、簡単なレイアウトのWebサイトは作れるようになるでしょう。

HTML5&CSS3デザインブック

HTML/CSSの勉強は動画学習とこの1冊だけで十分ですが、動画よりも腰を据えて本で勉強する方が合っている方もかと思います。(ちなみに僕も本で勉強するタイプです)

そんな方にはこちらの記事↓がおすすめだ。

→とにかくホームページを作ってみたい!という人におすすめな本5冊

 

 

④ WordPressの学習本を2冊読む

WordPressとは、簡単にWebページ内のコンテンツ(文章や画像)を更新できるシステムのことです。

当ブログもWordPressで運用しています。
もっと詳しく知りたいという方はこちらの記事↓を参考にしてください。

WordPressとは?初心者でもわかるように仕組みを図解

 

WordPressの勉強は以下の2冊を読み込みましょう。

WordPressレッスンブック

WordPressはPHP(ピー・エイチ・ピー)というプログラミング言語でできており、ゼロからテーマをつくるときはPHPのコードを書く必要があります。

しかしWordPressはPHPの文法をそこまで知らなくてもWordPress固有の関数を覚えてしまえば実装できてしまいます。
まずはそれらの関数を覚えるために「WordPressレッスンブック」を読み込みましょう。

基本的な知識が丁寧に解説されているので読みやすいです。
(仕組みまでしっかり理解しないと気が済まない方はドットインストールなどでPHPの基礎的な知識勉強するのもいいでしょう)

WordPressレッスンブック

 

WordPressデザインブック

次にこの本のデモサイトであるオリジナルテーマの完成形を作り上げましょう。
関数の基礎的な説明は省いてありますが、この本に書かれている内容をマスターすればオリジナルのWordPressテーマを作れるようになります。

おそらく今までのステップを踏んでもPHPの記述式でわからない部分が出てくると思いますが、わからない部分は読み飛ばしてまずはデモサイトを作り上げてしまいましょう。

それでも挫折しそうになったときはWordCampやWordBenchといった勉強会が多く開催されているのでそこに足を運ぶのがいいかと思います。
プログラミングは一人で悩むと孤独だし心細いですよね。
疑問点を気軽に教えてくれる仲間がいた方が心強いしモチベーションの維持にもつながります。

WordPressデザインブック

 

 

自分でサイトをゼロから作ってみる

プログラミング

⑤ ディベロッパーツールを使いこなす

初心者が完全にオリジナルのサイトをつくることは難しいと思います。
まずはクオリティの高いサイトを真似て盗むのが上達する一番の近道です。

レイアウトや配置を真似してみて、文字や画像、色の組み合わせをアレンジするところから始めてみましょう。
そして段々と自分の引き出しを増やしていきます。

そのためには、まず「Googleディベロッパーツール」を使いこなせるようになりましょう。
ディベロッパーツールを使うことで、見本とするサイトの真似したい部分(文字の大きさや色、文書構造など)を知ることができます。

使い方については下の記事に詳しく書かれているのでぜひ参考にしてみてください。

初心者向け!Chromeの検証機能(ディベロッパーツール)の使い方

 

 

⑥ ゼロからサイトを作ってみる

ここまでのステップを踏んだらもうインプットは十分です。
あとは作りたいものを決めて、作りながら知識を吸収していくのが手っ取り早いでしょう。

プログラミングに限らず、わからないことがある度にググって調べることはしっかりとしたスキルを身につけるのに大切です。

ディベロッパーツールを使いこなし、見本サイトを参考にしながら自分のイメージしたサイトを作り上げましょう!