今回から何回かに分けてWordPressのテーマをゼロから作成していきます。そして、その過程をできるだけ分かりやすく説明していこうと思います。

説明していく方法としては、コードの掲載はGitHub Gistを利用して掲載していこうと思います。コードを管理するのもスニペットとして利用するにも便利かと思います。また、テーマファイルとしては全てGitHubに公開していきますので履歴等参照していただけるかと思います。

簡単に仕様を決めていく

こちらを執筆している段階でどんなものが出来上がるのか全く想定できていない（思いつき企画で申し訳ないです）ので、仕様を決めつつ過程の中では最適化をしていく可能性もあるのでご了承ください。

用途

基本的なブログとして利用することを想定して構築していきます。

デザインファイル

デザインファイルは用意していません。思いつき企画ということもありますが、シンプルなブログテーマということもありますので、デザイニング・イン・ブラウザ（って言うんでしたっけ？）で作っていこうと思います。

レスポンシブ対応方法

スマートフォンからCSSを記述していって、順に画面幅が大きいデバイス向けの差分を記述していきます。

• スマートフォン（画面幅767px以下）
• タブレット（画面幅768px以上1200px以下）
• デスクトップ（画面幅1201px以上）

実際の案件では必要に応じてもっと細かく区切ることもありますし、スマートフォン表示に特化したい場合にはレスポンシブでの実装ではなく、スマートフォン用に別にテーマを用意して切り替える方法も用いることがあります。

多言語対応について

WordPressに登録申請するのであれば多言語化を行う必要があるのですが、今回はそのような想定はしておりません。ですので、原則行いませんがテキストドメインについては記述して、後々に対応できるようには配慮していこうと考えています。（できていないところがあったらごめんなさい…）

制作環境

簡単に制作環境をご紹介しておきます。

• Brackets（エディター）
• MAMP（ローカル開発環境）
• Prepros（コンパイラ）

といった環境で作っていきます。

制作の流れ

制作の流れとしては、実際にテーマファイルを作成して作っていきます。

WordPressのテーマを作る方法として大きく分けて２つあると思います。１つは、HTMLやCSSでのコーディングを終えてからWordPressテーマに変換していくという方法。もう１つは、実際にWordPress内にテーマとして認識できるようにファイルを設置して、HTMLやCSSでのコーディングを行いながらWordPress実装していくという方法、この２つだと思います。

今回は後者の方法で行っていこうと思います。デザインファイルなどがちゃんとある場合には、前者でコーディングを行ってブラウザで確認・検証してから実装していく流れが多いかもしれませんが、今回はデザインファイルも用意していませんし、WordPress実装がメインとなっている関係で、この方法で進めることにしました。