WordPress オリジナルテーマの作り方・制作フロー

初めてWordPressのオリジナルテーマ制作にトライする方や、以前オリジナルテーマ制作に挑戦したものの何から手を付けていいのかわからず断念したという方に向けて、テーマの制作フロー(工程)と周辺知識をまとめました。テーマの作り方を一通り知っておけばWordPressテーマの構造や仕様といった全体像を把握できるため、他のテーマを編集する際も役立ちます。

目次

1.開発環境の用意

WordPressのテーマファイルを制作するための開発環境として必要なものは下記の通りです。

・PHPに対応したテキストエディタまたはWebオーサリングツール
・確認用ブラウザ
・WordPressのローカル開発環境

テキストエディタはPHPに対応しているものであれば何でも構いません。TeraPadやAtomなど無料ソフトでもPHPに対応しているものは少なくありません。

ブラウザはGoogleChromeやFirefox、Internet Explorer、Microsoft EdgeなどWebサイトを閲覧するためのソフトです。

ローカル開発環境

必須ではありませんがテーマの開発はローカル開発環境で行うのが一般的です。理由としては、テーマの動作を確認するためにファイルを外部のサーバーへアップロードするのは余計な工程と通信量が発生しますし、テストも行わずにいきなり本番環境にプログラムファイルをアップロードするのは危険なためです。

HTMLで静的なWebサイトを制作したことのある方は開発環境をわざわざ用意することを不思議に思われるかもしれません。HTMLはマークアップ言語のためブラウザさえあれば表示を確認することができましたが、WordPressのテーマファイルはPHP(サーバーサイドで動作するスクリプト言語)を利用したプログラムファイルのため、動作を確認するにはApache等のサーバーが必要になります。

ローカル開発環境の構築方法についての詳細は下記の記事をご参照ください。

2.サイトマップの作成(サイト構造の決定)

開発環境が用意できたら次はサイト構造を決定しましょう。

テーマを使用するWebサイトの想定がニュースサイトなのか、ブログサイトなのか、ノウハウサイトなのかによって必要なページや構造が異なり、それによって必要なテンプレートファイルの種類や最適なサイトデザインが変わってきます。

例えば

  • 固定ページは必要なのか
  • トップページから直接リンクを貼るページはどれか
  • サイトの階層は何層にしてどのページの下にどういったページを用意するのか

といったことを決定します。

3.ワイヤーフレーム(枠組み)を作ろう

ここから本格的にオリジナルテーマの作成作業に入ります。まずはワイヤーフレームと呼ばれるデザインの枠組みを各ページごとに作成しましょう。手書きでも構いません。

各ページとは

  • TOPページ
  • 固定ページ
  • カテゴリーページ
  • 投稿記事ページ
  • サイト内検索結果ページ

といった具合にデザインの枠組みの異なるページごとに作成します。

用意できたらこのワイヤーフレームを元にコーディングしたHTMLファイル(index.htmlなど)と、デザインをCSSで記述したスタイルシート(style.css)を作成します。

WordPressのテーマ制作とはつまるところ、このHTMLソースを動的に出力できるようPHPに置き換えていくことです。HTMLで制作されたサイト(静的サイト)では記述や枠組みを変更しようとすると、その記述や枠組みを表示している全てのページを変更する必要があります。

例えばヘッダーの一部にdivタグを追加したい、各投稿ページのタイトル下に投稿日を追加したい、各ページに表示しているサイドバーに項目を1つ追加したいなど、静的なサイトでは変更が多数のページに及ぶ場合その全てのページの記述を変更する必要がありますが、PHPを使えばこれらの変更は1つのファイルをいじるだけで済みます。

4.WordPressのテーマ構造

HTMLファイルをPHPに置き換える前にWordPressテーマの基本的な構造を知っておきましょう。

本記事の続きは技術同人誌即売会・技術書典5にて頒布予定です。

イベント日時・場所:10月8日池袋サンシャインシティ
イベント詳細:https://techbookfest.org/event/tbf05

関係者、参加者の皆様どうぞ宜しくお願い致します。

このエントリーをはてなブックマークに追加
カテゴリー: WordPress 投稿日:

最終更新日: 2018年8月11日

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。