中学生が3日間でWordPressのテーマを作った方法
2014年2月7日
こんにちは。しゅんぼー(@shun_kashiwa)です。
ブログはWordPressを使っているのですが、そのテーマを3日間で作ってしまいました。
今回は、そのためにやったことを、具体的にご紹介していきます。
みなさんがWordPressのテーマを作るときの参考にしてみてください。誰にでも出来ると思います！
テーマ作成前の僕のスペック
- HTML→まあ分かる。
- CSS→まあ分かる
- JavaScript(jQuery)→そこそこ分かる
- PHP→無知
こんなところです。HTML,CSS,JavaScriptは2年位前からボチボチ勉強してます。
3日間という短期間で出来たのも、この知識がかなり役立ってます。
作り方の勉強
2冊ほど本を買いました。プログラミングの勉強ですからね。
一冊目はこちら。「WordPressデザインブック」
WordPressの関数なんかの解説がちゃんと乗ってて、WordPressの仕組みとPHPに無知な僕には必須な一冊でした。
もう一冊は「よくわかるPHPの教科書」です。
WordPressもPHPで動いてますし、その勉強もしようと思っています。
あとは、すべてGoogle先生に聞きました。
本に載っていないけどやりたいことなんてたくさんあります。Googleで検索すればほとんど出てきました。
下準備:デザインを大雑把に考える
僕のやり方ですが、スケッチなどはしていません。
お風呂に浸かりながら、
- カラムはいくつ作るのか
- どんな色を使うのか
- 大まかな装飾の構成
- 2カラム（右）
- グレー+オレンジ,緑
- 吹き出しのようなデザイン
一日目:装飾は無視してページ構成を作る
一日目。装飾はガン無視し、
- 各パーツの大きさ
- その表示の中身(記事,ページetc)
- その配置
- 文字のサイズ
主にこの3つを作りました。なお、PCでの表示だけです。
大きさ、配置などはCSSなので慣れていましたが、何かを表示させるためにはWordPressの関数を使わなければいけません。
僕にとっては一番多くのことを学ぶ必要がったわけです。
基本的には本を参考にしましたが、以下のページも参考にしました。
具体的には、
- 核となるPHPの作成
- floatやinline-blockを使った段組の作成
- width,height等で微調整
を行いました。
こんな感じ。若干装飾もしてますね。
2日目:装飾していく
1日目の時点でかなりブログっぽくなります。これを装飾するのが2日目です。
borderの色、角を丸く、hoverの動作、transitionなどですね。CSSで書いていきます。
僕は、ここでJavaScriptも一緒に使いました。
脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）：CSS3アニメーションの基本 (1/3) – ＠IT
CSSのアニメーションに関しては、この記事が参考になると思います。非常に分かりやすいです。
また、ロゴをつくったのも2日目です。
こんな感じで、PCのテーマはほぼ完成させました。
3日目:レスポンシブ化&最終調整
今まではPCでの表示を考えてきましたが、ここでレスポンシブ化を行いますｌ
レスポンシブWebデザインの作り方（簡単設定方法） ｜ フリーランスWebデザイナーの仕事
こんな記事も参考にしました。
僕の場合ですが
- タブレットはサイドバーを下に
- スマホはサイドバーを下に+記事表示を1列に
これをメディアクエリーで設定しました。
3日間の作業時間
これを2/1~2/3にやっていたのですが、ものすごい時間をこれに費やしました。
一日に最低でも6時間。3日間で20時間は確実に使いました。
ディスプレイを長く見て、デザインを考えるのは楽ではないですが、個人的にはとても楽しく、あっという間に3日間が過ぎてしまいました。
さいごに
僕がテーマを自作した理由は「テーマを理解し、WordPressも理解したい」からです。
実際、このテーマを作ったことで自分の知識はかなり幅が広がりました。
3日間で出来たのには、様々な理由があり、普通はもっと時間が必要だと思います。
しかし、興味のある人は一回やっておくべきだとも思いました。中学生にできるんですから、誰だって出来るはずです！
この記事が、WordPressテーマ作成に役立てば幸いです。しゅんぼー(@shun_kashiwa)でした。