目的
WordPressのオリジナルテーマを作成することで、WordPressのテーマ、テンプレートの理解を深める。
内容（予定）
- index.htmlをhtml5とcssで作成する。
- モバイルファースト＆フラットデザインでindex.htmlをレイアウト＆デザイン
- index.htmlを最小の構成でWPテンプレート化する
- メニュー、ウィジェットなどWPの機能を使えるように拡張
必要な心構え
WPへの理解を深める他にも、
- html5、css、phpのコーディングの練習
- レスポンシブWebデザインの練習
- フラットデザインの練習
などの練習にもなります。各自、自分の目的に照らし合わせて、何か利用できる事があるはずです。その事を常に頭の隅に置いておきましょう。
必要な環境
個人で使えるWordPressを用意しておいて下さい。個人で使えるサーバをロリポップなどで契約してWPをインストールしておくか、XAMPPやMAMPなど、ローカル環境でWPをインストールしておいて下さい。
html5で作るWPオリジナルテーマ:1
の勉強会から全4回の予定でWPオリジナルテーマを作成します。今回の参加者のスキルレベルは個人でWeb制作を仕事にする人から、html要素やcssをリファレンスを見ながらタイプする人までいますが、まあ何とかなるでしょう。各自、自分の現時点の課題を意識して勉強に望んで下さい。
1-1：ドットインストールの動画を見る
学習を始める前に、ドットインストールさんを見て、作業の概要をつかみました。
#07 ゼロからテーマを作ってみよう
次回の予習としてドットインストールを7回目以降くらいから見ておきましょう。初心者の人は最初からどうぞ。
1-2：作業用のフォルダとindex.htmlファイルを作成
新規フォルダ「wptest」を作って、新規に index.html を作成します。文字コードはutf-8にしましょう。
ドットインストールさんの手順を参考にindex.htmlを書いていきましょう。ただし、この授業ではマークアップにhtml5の要素も使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>はじめてのWordPress</title> </head> <body> <div id="top"> <header> <h1><a href="/">はじめてのWordPress</a></h1> <nav> <ul> <li><a href="/">menu</a></li> <li><a href="/">menu</a></li> <li><a href="/">menu</a></li> <li><a href="/">menu</a></li> </ul> </nav> </header> <div id="main"> main </div> <aside> sidebor </aside> <footer> footer </footer> </div> </body> </html> |
1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置
今回はreset cssを書かずに、normalize.cssを利用します。Downloadをクリックして、開いたページを「wptest」フォルダに”別名でページを保存”しましょう。
normalize.cssについてはコリスさんの記事が分かり易いので、読んでおきましょう。
head要素の最下部に、normalize.cssを読み込んでおきます。
|
1 2 3 4 5 |
<head> <meta charset="UTF-8"> <title>はじめてのWordPress</title> <link rel="stylesheet" href="normalize.css"> </head> |
1-3：style.cssを設置
「wptest」フォルダにstyle.cssを作成します。文字コードはutf-8にしましょう。後で、ちゃんと読み込まれているかを確認し易いように、bodyのcolorを変えてあります。
|
1 2 3 4 |
@charset "UTF-8"; body { color:red; } |
head要素の最下部に、style.cssを追加します。
|
1 2 3 4 5 6 |
<head> <meta charset="UTF-8"> <title>はじめてのWordPress</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> </head> |
index.htmlをブラウザで表示して、Firebugなどの開発ツールでnormalize.cssとstyle.cssが読み込まれているか、確認しましょう。
1-4：今回のまとめ
テキストエディタの操作に慣れておこう
学習の際にはテキストエディタを使いこなす事が大事です。Dreamweaver、TeraPad、真魚、mi（Mac）など、なんでも良いのですが、初期文字コードはUTF-8Nにしておきましょう。また、普段から学習に使うテキストエディタをどんどん使って、操作に馴れておくのが良いです。自転車の運転と同じで、どうしても一定の練習時間が必要ですから、それは覚悟しておくように。
高性能な開発環境について
EclipseやAptana Studioなど、高性能な開発環境は、基礎が身に付いた人が効率を上げるために使うものです。html要素やcssプロパティがスラスラ書けるようになってから使うのをお勧めします。
便利なWebサービスについて
また、便利なWebサービスの中には「簡単なドラッグ＆ドロップ操作でWebサイトを構築できる」というものがありますが、これはhtmlやcssを勉強したくない人や、基礎が身に付いた人が仕事などのカンプ制作目的で使うツールです。学習中の人は無視しましょう。
例えば、カップ麺はおいしいくて便利ですが、料理が上手になりたいなら、カップ麺は排除すべきです。食材や味付けの知識や、調理道具の使い方を学ぶ機会を自ら逃してしまうだけです。
