- WordPressのオリジナルテーマを作ってみたい
- オリジナルテーマ作成の仕事を依頼された
WordPressにはたくさんのテーマが用意されていますが、デザインやレイアウトの都合上、HTMLを使って0から作りたいケースもあると思います。
ただ、0から作ることで臨機応変な対応ができるのですが、WordPressに慣れていないと、意外に詰まる場所は多いです。
この記事では、「初心者がHTMLサイトをWordPress化する際に気をつけるべき点」について書いていきます。
静的HTMLサイトのWordPress化の基本がわからない場合は、以下記事をどうぞ。
【挫折前に読んでほしい】静的HTMLサイトを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のファイルには優先順位という考え方があります。
たとえば、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」というプラグインでお問い合わせフォームを作る際の注意点です。
私が実際に詰まった点なので書いておきます。
実際に詰まらないと何のことかわからないと思うので、わからない場合は気にしなくてOKです。
お問い合わせフォームをオリジナルデザインで作る場合、HTMLソースで作った後に、そのHTMLソースを「MW WP Form」のテキスト欄から入力していくと思います。
その際に、自分で用意したHTMLソース内に＜form＞タグがあると、お問い合わせ時に「確認」画面に進めないという現象がおきます。
「MW WP Form」側でも＜form＞タグが出力されるから？のようです。
この場合、自分で用意したほうの＜form＞タグを削除すれば、問題なく確認画面に移動できるようになります。
まとめ
以上で、初心者がHTMLサイトをWordPres化する際に気をつけるべき点については終わりです。
WordPressは、はじめはややこしく感じるかもしれませんが、難しいプログラムを自分で組むことなく、ブログシステムを用意することができる貴重なシステムです。
扱えるようになると仕事の幅が広がるので、
頑張って身につけましょう。
