- WordPressのオリジナルテーマを作ってみたい
- オリジナルテーマ作成の仕事を依頼された
HTMLやCSSでのコーディング経験はあっても、WordPressのテンプレート構造やPHPの扱い方でつまずく人は少なくありません。
この記事では、初心者がオリジナルテーマを作成する際につまずきやすいポイントと、その回避法を具体的に解説します。
「詰まってから検索する」前に、あらかじめ知っておきたいことをまとめています。
静的HTMLサイトのWordPress化の基本がわからない場合は、以下記事をどうぞ。
【挫折前に読んでほしい】静的HTMLサイトをWordPress化する方法
WordPressオリジナルテーマを作る基本フローとは
オリジナルテーマ作成とは、無料や有料で配布されているテーマを使わずに、「0からHTML→WordPress化」することです。
個人ブログの場合は既存のテーマを使うことがほとんどですが、企業から仕事を依頼される場合には、私が知る限りでは、オリジナルテーマを利用する場合が多いです。
通常、次のようなフローとなります。
- ワイヤーフレーム
- デザインカンプ
- HTMLでサイト制作
- WordPress化
「WordPressで作りたい」という需要は多いので、WordPressが扱えると便利です。
ただ、会社やプログラミングスクールに所属しているならともかく、独学で WordPressを身につけるのは、HTML（CSS）と比べて、やや難易度があがります。
理由は、 WordPressを扱うためには、
PHPについて知っておく必要があるからです。
書店に行けばたくさんの書籍も売られていますが、実際の現場では教科書通りにいかない部分もあるので、最後は自分の頭で考えて、試行錯誤していく必要もあります。
ですので、場合によっては挫折してしまうこともあります。
とは言っても、独学で身につけることは十分可能だし、いくつかのポイントさえおさえておけば意外にいけます。
テーマ作成で最初に確認すべき必須ファイル一覧
オリジナルテーマを作る際に大事なことは、
必要なファイルを事前に考えておくことです。
WordPressでサイトを作る場合には、通常、ブログやお知らせ情報などの更新を想定しているはずです。
その場合に必要になるのが、
次のような機能（ファイル）です。
- 記事一覧ページ
- カテゴリー一覧ページ
- アーカイブ（日付ごと）ページ
- 検索機能
カテゴリー一覧ページは必須ではないですが、カテゴリーの表示があったら、それをクリックしてそのカテゴリーに属する記事一覧を見たい人もいるわけで、通常は用意します。
通常は用意するのですが、 WordPressに慣れていないと、どんなファイルが必要かがわからなくて、「用意していなかった」なんてこともあります。
私の場合は、記事一覧ページを用意していなくて後で困りました。
いくらでも後でカバーできるのでどうとでもなりますが、またデザインから考えるのは少々めんどうです。
ですので、ワイヤーフレームを作る段階で、必要なページをちゃんとピックアップしておくのが大事です。
基本的な構成として考えられるのは、次のようなかんじです。
- ホームページ（TOPページ）：front-page.php（index.phpやhome.phpでも可）
- 固定ページ（page.php）
- 投稿ページ（single.php）
- 一覧ページ、アーカイブページ（archive.phpなど）
- カテゴリーページ（category.phpなど）
- 404ページ（404.php）
- 検索結果ページ（search.php）
「など」と書いているのは、
対応可能なファイルが複数あるためです。
WordPressテンプレート階層とファイルの優先順位
上の話と関連していますが、 WordPressのファイルには優先順位という考え方があります。
たとえば、TOPページを例に考えてみましょう。
TOPページをphpファイルで作成する場合、
考えられるファイル名は次の通りです。
- front-page.php
- home.php
- index.php
↑のファイルのどれかを用意すれば、
TOPページがリクエストされた際に、
そのファイルに書かれている内容が表示されます。
上から順に優先順位が高くなっていて、front-page.phpが見つからない場合は、home.phpといったルールになっています。
「でも3つあるしどのファイルを用意すれば？」というかんじですが、他のページと被らなければOKです。
たとえば、index.phpは汎用ファイルなので、投稿ページやカテゴリーページ（記事一覧）にも使うことができます。
それは便利なのですが、たとえばindex.phpにカテゴリーページの内容を書いたとして、TOPページ用のファイルを用意していなければ、TOPページがリクエストされた際に、カテゴリーページの内容が表示されてしまいます。
ですので、もしもカテゴリーページとしてindex.phpを使いたいのであれば、TOPページ用のファイルとして、front-page.phpかhome.phpを用意する必要があります。
そこまで難しいことではないですが、「どのファイルをどのページに使うか」ということも、実際に手を動かす前に考えておく必要があります。
独自デザインを実装する際のテンプレート活用法
WordPressのメリットは、
ページの内容をテンプレート化できるので、
手軽にページを増やしていける点にあります。
ただ、HTMLでオリジナルデザインを作る際に、場合によってはテンプレート化できないようなデザインが発生するケースもあります。
このようなケースの場合、「あれっ、page.phpでいけるの？」と悩むかもしれませんが、page.phpとは別のファイルを用意することで解決することができます。
好きな名前-page.phpというファイルを用意
例）seo-page.php
このように、テンプレートファイルとは別に、特定の1ページだけのオリジナルなページを用意することも可能です。
MW WP Formでのformタグエラー対処法
少しニッチな話ですが、「MW WP Form」というプラグインでお問い合わせフォームを作る際の注意点です。
私が実際に詰まった点なので書いておきます。
実際に詰まらないと何のことかわからないと思うので、わからない場合は気にしなくてOKです。
お問い合わせフォームをオリジナルデザインで作る場合、HTMLソースで作った後に、そのHTMLソースを「MW WP Form」のテキスト欄から入力していくと思います。
その際に、自分で用意したHTMLソース内に＜form＞タグがあると、お問い合わせ時に「確認」画面に進めないという現象がおきます。
「MW WP Form」側でも＜form＞タグが出力されるから？のようです。
この場合、自分で用意したほうの＜form＞タグを削除すれば、問題なく確認画面に移動できるようになります。
オリジナルテーマ作成で初心者が失敗しないために
WordPressのオリジナルテーマ作成では、基本的な構造やファイルの役割を正しく理解しておくことが大切です。
最初は難しく感じるかもしれませんが、つまずきポイントを事前に知っておけば、学習効率も上がります。HTMLが書ける人であれば、WordPress化は決して不可能ではありません。
ぜひ、本記事を参考にしながら、一歩ずつテーマ作成に取り組んでみてください。