• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN

「htmlすら知らなかった私が2週間でWordPressの新テーマを作成するまでにやったこと」と参考にした記事まとめ

Ozpah4 logo on

どうも、@OZPA です。

先月、当ブログのテーマをWordPressにて自作した私。
しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。

今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。


ひとりじゃ出来なかった

今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。

だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。
そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。

 



WordPressのテーマ作成の手順

さて、WordPressのテーマを作成するためには、

  • 0.WordPressをローカルに導入する
  • 1.ブログのデザインを考える
  • 2.テーマのhtmlをコーディングする
  • 3.2でコーディングしたhtmlをphpに置き換える
  • 4.うp
  • とまぁざっと以上のような手順が考えられます。

    より詳しく知りたい方は、なつきさん( @Stocker_jp )のブログおそらく最もわかりやすいWordPressテーマ制作チュートリアルをご覧ください。ものごっついわかりやすいです。

    関連:WordPressのオリジナルテーマ 作り方の記事まとめ

    ではざっと順を追って行きましょう。

     

    0.WordPressをローカルに導入する

    まずは準備段階として、WordPress環境をローカルに構築します。
    いきなりアップしながら作業なんてできないですから・・・

    私はBitNamiを使用しますた。

    関連:死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編)

     

    1.ブログのデザインを考える

    …と言ってもどこから手をつけていいのかよくわからないよ!と言う方のためにざっくりチェック項目を記すと

  • カラム数を考える(1カラム?2カラム?3カラム?)
  • 各カラムのサイズを決める(1px単位できっちりと)
  • ヘッダー、メインカラム、サイドバー、フッターの内容を考える(カテゴリー一覧は作る?タグクラウドは?最近の記事一覧も入れる?…etc)
  • ってところでしょうか。まぁまだたくさん決めなきゃいけないことありますけどとりあえずこれぐらいで。

    以上が決まったら、PhotoshopなりIllustratorなりノートなりでブログのデザインを起こします。

    デザインは

  • トップページ
  • 記事ページ
  • をすればいいでしょう。

     

    120225 html01

    ちなみにこちらが私が最初に作ったラフ原案。
    この時は何もわからないまま作ったので、ピクセル数とかが適当だったために後ほどエラい苦労しました。

     

    2.テーマのhtmlをコーディングする

    さて、次に起こしたデザインを基にして、cssを使用してhtmlのコードを組み上げるだk・・・
    なるほど、まったくわからん。

    何度も何度も申し上げております通り、私、html及びcssの知識がそれはそれは驚くほどありません。
    その代わり、美味しいアボカドの見分け方ならよく知っております。ありがとうございます。

    話を戻しますと、htmlのことなどstrongタグで囲えば文字が太くなるという程度の知識しかない私はこの段階で躓くのが目に見えておりましたので、とある方にご指導を煽ることとしました。

     

    htmlとcssを教わった

    まずは、超可愛いデザインと分かりやすい記事で人気のブログウェビメモの霙( @xxmiz0rexx )さんに泣きつき、htmlとcssを基礎の基礎から教えていただくこととしました。

    みぞれ「ほら・・・何を教えてほしいの・・・?」

    おつぱ「あの・・・僕に・・・H・・・を・・・教えて・・・ください・・・」

    みぞれ「んん?なぁに?聞こえないわよ・・・?」

    おつぱ「H・・・HTMLを・・・教えてください・・・!

    via:回想シーン

    まぁ当然びた一文そんな会話はありませんでしたが、霙さんは何も知らないウブな私に丁寧にhtml及びcssを教えてくれました。

    なにせ



    みぞれ「じゃあ始めるけど・・・どれくらいhtmlとcssのことわかってるの・・・?」

    おつぱ「えっと・・・さっき生まれた人間に教えるくらいのつもりでいてくれるとありがたい」

    みぞれ「あ・・・そう・・・
    ・・・じゃぁ・・・まず・・・
    divっていう箱を作ります。

    via:嘘のようなホントの会話



    という会話がスタートでしたからね。

    さらに

    「メインカラムとサイドバーの間を15px開けるためにはmarginを幾つずつとればいいと思う?」
    の問いに対し、

    「え・・・?7.5pxずつだろ・・・?

    と本気で答えた私。
    よく呆れもせず教えてくれたと思います。ほんとうにありがとう。

    また、テーマ作成初日には和洋風◎のするぷ( @isloop )くん、ぽよし( @poyosi )くん、WEBCRE8.jpの酒井( @glatyou )さんにまで色々とアドバイスを頂きましたm(_ _)m
    みなさんほんとうにありがとう!

    もちろん教わっている時間だけでは足りませんでしたので、自宅などでも様々なwebページを参考にしてhtmlを組みました。

     

    参考にしたページ

    HTMLクイックリファレンス




    CSSレイアウト実践講座



    ウェブサイトをHTML&CSSに基礎から構築 | CSSPRO

     

    120229 1927

    そんなこんなで苦労の末組みあがったhtmlがこちらです。

     



    3.2でコーディングしたhtmlをphpに置き換える

    ここまできたらあとは、このhtmlをWordPressの形式に作り替えるのみ。

     

    120229 1927 2

    htmlを部品ごとにわけて、

  • ヘッダー→header.php
  • 記事一覧ループ部分→loop.php
  • サイドバー→sidebar.php
  • フッター→footer.php
  • として書き換えていきます。

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Mac,iPhone,Evernoteを中心に様々な情報をお届けするブログです。" />
    <link rel="stylesheet" href="http://ozpa-h4.com/wp-content/themes/OZPA_H4_theme/style.css" />
    <title>OZPAの表4</title>
    

    例えばこちらのヘッダー部分のhtmlでしたら、ハイライト部分をWordPressのテンプレートタグに置き換えます。

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Mac,iPhone,Evernoteを中心に様々な情報をお届けするブログです。" />
    <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>
    

    こんな感じ。

    そして、各々のパーツをメインインデックスのテンプレートである「index.php」にて、同じくテンプレートタグを使用して呼び出します。

     

    <?php get_header(); ?>
    <div id="main">
    <?php get_template_part( 'loop' ); ?>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    

    上は現在の私のブログテーマの「index.php」。(ちょっと削ってるけど)

    例えば、1行目の「get_header」でheader.phpを呼び出す、5行目の「get_sidebar」ではサイドバーを呼び出す…と言った形で、全てのパーツをメインインデックスに呼び出しております。

    WordPressの「テンプレートタグ」に関しましてはそんなすぐ覚えられるわけもございませんので、チートシートを用意すると作業の際大変に便利です。

     



    日本語版 WordPress チートシート | Webクリエイターボックス
    WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。




    あとは公式ページも参考に。あくまで公式が基本ですものね。

    関数リファレンス – WordPress Codex 日本語版
    WordPress公式の関数リファレンスページ



     

    後はコチラの本を参考に。初心者さんで分かりやすかったです。

     

    またもいろんな人の助けをお借りした

    なお、このhtmlをWordPress形式に置き換える際には、@xxmiz0rexx さん、@poyosi くんのみならず、最初にご紹介したブログStocker.jpの中の人なつき( @Stocker_jp )さんに直接やり方を教えて頂けるという僥倖にも恵まれました!
    参考にさせていただいているブログの中の人に直接お教え頂けるなんて本当に私は幸せものだと思います。

    親切に教えて下さり、本当にありがとうございました!

    さらにさらに、以前のテーマからメインカラムのサイズが変わったために画像のリサイズを行わなければならなかったのですが、
    「それならjQueryでできるかもしれませんね・・・」
    と、iPhoneアプリクリエイター道場でもお世話になりました拡張現実ライフのアキオ( @akio0911 )先生が私のブログにjQueryを搭載してくださり、自動で画像のリサイズを行うjavascriptまで書いてくださいました!!
    アキオーアキオー!

    アキオ先生の手助けがなければ、過去の画像を全てちまちまリサイズしようか・・・などと賽の河原ばりの苦行を敢行しようとしていた私にとって、まさに神の助けでした!
    本当に本当にありがとうございます!

     

    まとめ

    ・・・とまぁそんなわけで様々なお方の手助けを借りながらようやく完成したのがこのテーマなのです。
    偉そうに「htmlすら知らなかった私が〜」なんて書いておりますが、まだまだ全然知識も足りてないし、これからいっぱいおっぱい勉強しようと思っております。

    ただ、やる気さえあれば私のようにまったくの素人でも(一応)WordPressのテーマを作れるということで、「よし、じゃぁやってやろうかな!」なんて方が一人でも出てくだされば幸いでございます。


    追記:このテーマの公開後、改めてWordPressのテーマを再作成してリニューアルをいたしました。よろしければこちらもご覧ください:)

     

    関連:WordPressのオリジナルテーマ 作り方の記事まとめ

    関連:私のような初心者におくる!!WordPressブログをsixcoreサーバーに移転した際の覚え書き!!

    関連:死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編)

    関連:「WordPress Hyper Response」を導入したらホントにWordPressが高速化したよ!

    SPONSORED LINK

    FB Comments

    About This Site

    Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
    ふざけた文体が目につきますが、本人はいたってふざけております。
    ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
    広告掲載、執筆、取材などの依頼も受け付けております。
    さらに詳しく

    SNS

    ×