先月、当ブログのテーマをWordPressにて自作した私。実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。ひとりじゃ出来なかった今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。WordPressのテーマ作成の手順さて、WordPressのテーマを作成するためには、0.WordPressをローカルに導入する1.ブログのデザインを考える2.テーマのhtmlをコーディングする3.2でコーディングしたhtmlをphpに置き換える4.うpとまぁざっと以上のような手順が考えられます。)のブログおそらく最もわかりやすいWordPressテーマ制作チュートリアルをご覧ください。ものごっついわかりやすいです。作り方の記事まとめではざっと順を追って行きましょう。0.WordPressをローカルに導入するまずは準備段階として、WordPress環境をローカルに構築します。私はBitNamiを使用しますた。関連:死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編)1.ブログのデザインを考える...と言ってもどこから手をつけていいのかよくわからないよ!と言う方のためにざっくりチェック項目を記すとカラム数を考える(1カラム?2カラム?3カラム?)各カラムのサイズを決める(1px単位できっちりと)ヘッダー、メインカラム、サイドバー、フッターの内容を考える(カテゴリー一覧は作る?タグクラウドは?最近の記事一覧も入れる?...etc)ってところでしょうか。決めなきゃいけないことありますけどとりあえずこれぐらいで。以上が決まったら、PhotoshopなりIllustratorなりノートなりでブログのデザインを起こします。デザインはトップページ記事ページをすればいいでしょう。ちなみにこちらが私が最初に作ったラフ原案。この時は何もわからないまま作ったので、ピクセル数とかが適当だったために後ほどエラい苦労しました。2.テーマのhtmlをコーディングするさて、次に起こしたデザインを基にして、cssを使用してhtmlのコードを組み上げるだk・・・なるほど、まったくわからん。何度も何度も申し上げております通り、私、html及びcssの知識がそれはそれは驚くほどありません。その代わり、美味しいアボカドの見分け方ならよく知っております。ありがとうございます。話を戻しますと、htmlのことなどstrongタグで囲えば文字が太くなるという程度の知識しかない私はこの段階で躓くのが目に見えておりましたので、とある方にご指導を煽ることとしました。)さんに泣きつき、htmlとcssを基礎の基礎から教えていただくこととしました。みぞれ「ほら・・・何を教えてほしいの・・・?」おつぱ「あの・・・僕に・・・H・・・を・・・教えて・・・ください・・・」みぞれ「んん?なぁに?聞こえないわよ・・・?」おつぱ「H・・・HTMLを・・・教えてください・・・!」via:回想シーンまぁ当然びた一文そんな会話はありませんでしたが、霙さんは何も知らないウブな私に丁寧にhtml及びcssを教えてくれました。・・・じゃぁ・・・まず・・・divっていう箱を作ります。」via:嘘のようなホントの会話という会話がスタートでしたからね。「え・・・?7.5pxずつだろ・・・?」と本気で答えた私。呆れもせず教えてくれたと思います。ほんとうにありがとう。_)mみなさんほんとうにありがとう!もちろん教わっている時間だけでは足りませんでしたので、自宅などでも様々なwebページを参考にしてhtmlを組みました。CSSPROそんなこんなで苦労の末組みあがったhtmlがこちらです。3.2でコーディングしたhtmlをphpに置き換えるここまできたらあとは、このhtmlをWordPressの形式に作り替えるのみ。htmlを部品ごとにわけて、ヘッダー→header.php記事一覧ループ部分→loop.phpサイドバー→sidebar.phpフッター→footer.phpとして書き換えていきます。content=&quot;Mac,iPhone,Evernoteを中心に様々な情報をお届けするブログです。/&gt;&lt;title&gt;OZPAの表4&lt;/title&gt;例えばこちらのヘッダー部分のhtmlでしたら、ハイライト部分をWordPressのテンプレートタグに置き換えます。content=&quot;Mac,iPhone,Evernoteを中心に様々な情報をお届けするブログです。?&gt;&lt;/title&gt;こんな感じ。各々のパーツをメインインデックスのテンプレートである「index.php」にて、同じくテンプレートタグを使用して呼び出します。?&gt;上は現在の私のブログテーマの「index.php」。(ちょっと削ってるけど)例えば、1行目の「get_header」でheader.phpを呼び出す、5行目の「get_sidebar」ではサイドバーを呼び出す...と言った形で、全てのパーツをメインインデックスに呼び出しております。WordPressの「テンプレートタグ」に関しましてはそんなすぐ覚えられるわけもございませんので、チートシートを用意すると作業の際大変に便利です。WebクリエイターボックスWordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。あとは公式ページも参考に。公式が基本ですものね。後はコチラの本を参考に。初心者さんで分かりやすかったです。)さんに直接やり方を教えて頂けるという僥倖にも恵まれました!参考にさせていただいているブログの中の人に直接お教え頂けるなんて本当に私は幸せものだと思います。)先生が私のブログにjQueryを搭載してくださり、自動で画像のリサイズを行うjavascriptまで書いてくださいました!!アキオーアキオー!アキオ先生の手助けがなければ、過去の画像を全てちまちまリサイズしようか・・・などと賽の河原ばりの苦行を敢行しようとしていた私にとって、まさに神の助けでした!本当に本当にありがとうございます!まとめ・・・とまぁそんなわけで様々なお方の手助けを借りながらようやく完成したのがこのテーマなのです。偉そうに「htmlすら知らなかった私が〜」なんて書いておりますが、まだまだ全然知識も足りてないし、これからいっぱいおっぱい勉強しようと思っております。やる気さえあれば私のようにまったくの素人でも(一応)WordPressのテーマを作れるということで、「よし、じゃぁやってやろうかな!」なんて方が一人でも出てくだされば幸いでございます。追記:このテーマの公開後、改めてWordPressのテーマを再作成してリニューアルをいたしました。OZPA名前:OZPA(おつぱ)東京在住・デザイン会社勤務のブロガー。1984年1月1日生まれ。