Design Stock

デザインのアレコレ

  1. HOME
  2. コーディング
  3. 【独学方法】WordPressのオリジナルテーマが作れるようになるまでに僕が実行した6つのステップ

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

WordPressオリジナルテーマ作成の手順

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

作りたいと思ったものを形にできるのは、とても気持ちがいいしモチベーションにもつながる。
ゼロからサイトを作り上げた経験は、今後の成長の後押しをしてくれるはずだ。

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

 

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

動画学習

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

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

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

 

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

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

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

 

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

次にProgateでドットインストールで学んだことを復習しよう。
動画学習はドットインストールだけで十分と考えている方もいるかもしれないが、僕はそうは思わない。

ドットインストールは3分に動画をまとめるという特徴からか、インプットが重視されているように感じる。
何かWebページの完成形があり、それを作り上げるために必要な知識を学ぶというよりは、HTML/CSSの断片的な知識を網羅するよう構成されている。

Progateで学ぶメリットは、ホームページの完成形をあらかじめ知ることができ、アウトプットを意識しながら基礎知識を習得できる点だ。
実際にコーディングやプログラミングでは、わからなくなった時に自分でググって調べる力が必要になる。

ググる力を身につけるのに効率的なのはやはり作りたいものを決めて、アウトプットを意識しながら勉強することだ。

 

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

学習本

③HTML5&CSS3デザインブック

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

HTML5&CSS3デザインブック

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

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

HTML5&CSS3デザインブック

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

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

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

 

④WordPressの学習本を2冊読む

ついにWordPressの勉強に入る。
WordPressとは、自由にWebページ内のコンテンツ(文章や画像)を更新できるシステムのことだ。

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

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

 

WordPressの勉強は以下の2冊を読み込もう。

WordPressレッスンブック

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

しかしWordPressはPHPの文法をそこまで知らなくても記述式を覚えてしまえば実装できてしまう。
まずはその独特な記述式を覚えるために「WordPressレッスンブック」を読み込もう。

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

WordPressレッスンブック

 

WordPressデザインブック

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

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

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

WordPressデザインブック

 

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

ノートパソコンでプログラミング

⑤ディベロッパーツールを使いこなせるようになる

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

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

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

使い方についてはこちらの記事↓に詳しく書かれているのでぜひ参考にしてほしい。

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

 

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

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

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

Googleディベロッパーツールを使いこなし、見本サイトを真似て盗みながら自分のイメージしたサイトを作り上げよう。