WordPressのオリジナルテーマ制作にトライする方や、以前オリジナルテーマ制作に挑戦したものの何から手を付けていいのかわからず断念したという方に向けて、テーマの制作フロー(工程)と周辺知識をまとめました。テーマの作り方を一通り知っておけばWordPressテーマの構造や仕様といった全体像を把握できるため、他のテーマを編集する際も役立ちます。各エラーメッセージへの対応ユニットテスト1.開発環境の用意WordPressのテーマファイルを制作するための開発環境として必要なものは下記の通りです。・PHPに対応したテキストエディタまたはWebオーサリングツール・確認用ブラウザ・WordPressのローカル開発環境テキストエディタはPHPに対応しているものであれば何でも構いません。TeraPadやAtomなど無料ソフトでもPHPに対応しているものは少なくありません。EdgeなどWebサイトを閲覧するためのソフトです。ローカル開発環境とは必須ではありませんがテーマの開発はローカル開発環境で行うのが一般的です。理由としては、テーマの動作を確認するためにファイルを外部のサーバーへアップロードするのは余計な工程と通信量が発生しますし、テストも行わずにいきなり本番環境にプログラムファイルをアップロードするのは危険なためです。HTMLで静的なWebサイトを制作したことのある方は開発環境をわざわざ用意することを不思議に思われるかもしれません。HTMLはマークアップ言語のためブラウザさえあれば表示を確認することができましたが、WordPressのテーマファイルはPHP(サーバーサイドで動作するスクリプト言語)を利用したプログラムファイルのため、動作を確認するにはApache等のサーバー環境が必要になります。ローカル開発環境の構築WordPressのローカル開発環境構築ソフトはXAMPPやMAMP、InstantWPなど多数存在しますが、本著ではサーバー側の知識がない人でも手軽に環境を構築できる『Local』を使った方法をご紹介します。『Local』のページへアクセスします。Download』をクリック。お使いのパソコンのOSとメールアドレス、管理しているWordPressサイトの数などを聞かれますので入力してインストーラーをダウンロードします。macOSの場合は圧縮ファイルを解凍しアプリケーションフォルダに移動、ダブルクリックして起動します。Windowsの場合は、インストーラーをダブルクリックしてインストールを開始します。あとはインストーラーに従って進めていきましょう。GO!』ボタンをクリックしてセットアップを開始します。Windowsの場合はVirtualBoxというソフトのインストールが必要になります。ポップアップが表示されるので『はい』を選択します。FlywheelはVirtualBoxというフリーソフトを用いて仮想マシン(Linux)を構築し、Windows上でサーバを起動します。VirtualBoxが入っている方はそのまま進みますが、インストールした場合は再起動が行われます。その場合は再起動後、Localのショートカットがデスクトップに作成されているのでダブルクリックして起動しましょう。インストールが完了すると上記のような画面が表示されます。SITE』ボタンをクリックします。ローカルに作成するサイト名を入力します。ここで入力したサイト名はローカルドメインとして使用されるので控えておきましょう。この画面で日本語のサイト名は入力できませんが、サイト名は後ほどWordPressの管理画面から変更することができます。ローカル開発環境の構成を選択します。WordPressが動けばよい場合は『Preferred』を選択しましょう。『Custom』を選ぶとサーバーの種類やPHP、MySQLのバージョンなどを指定できます。このあたりの知識がある方は本番環境となるべく近い構成を指定すると良いでしょう。WordPressのセットアップ次に、構築した環境にWordPressをセットアップします。SITE』ボタンをクリックします。ローカル環境へのWordPressのセットアップが始まります。メールの動作確認などをする場合はメールアドレスも変更しましょう。無事、ローカル開発環境にWordPressがセットアップされました。SITE』ボタンを、WordPressの管理画面にログインするには『ADMIN』ボタンをクリックします。Localを使ってセットアップしたWordPressは英語版となっています。Language』の項から日本語を選択して最下部の『Save&Changes』ボタンをクリックすれば日本語化できます。Localでローカル開発環境を構築した場合、WordPressのテーマファイルはデフォルトでは下記の場所に置かれます。Sites\サイト名\app\public\wp-content\themes2.サイトマップの作成(サイト構造の決定)開発環境が用意できたら次はサイト構造を決定しましょう。テーマを使用するWebサイトの想定がニュースサイトなのか、ブログサイトなのか、ノウハウサイトなのかによって必要なページや構造が異なり、それによって必要なテンプレートファイルの種類や最適なサイトデザインが変わってきます。固定ページは必要なのかトップページから直接リンクを貼るページはどれかサイトの階層は何層にしてどのページの下にどういったページを用意するのかといったことを決定します。3.ワイヤーフレーム(枠組み)を作ろうここから本格的にオリジナルテーマの作成作業に入ります。ワイヤーフレームと呼ばれるデザインの枠組みを各ページごとに作成しましょう。手書きでも構いません。各ページとはTOPページ固定ページカテゴリーページ投稿記事ページサイト内検索結果ページといった具合にデザインの枠組みの異なるページごとに作成します。用意できたらこのワイヤーフレームを元にコーディングしたHTMLファイル(index.htmlなど)と、デザインをCSSで記述したスタイルシート(style.css)を作成します。WordPressのテーマ制作とはつまるところ、このHTMLソースを動的に出力できるようPHPに置き換えていくことです。HTMLで制作されたサイト(静的サイト)では記述や枠組みを変更しようとすると、その記述や枠組みを表示している全てのページを変更する必要があります。ヘッダーの一部にdivタグを追加したい、各投稿ページのタイトル下に投稿日を追加したい、各ページに表示しているサイドバーに項目を1つ追加したいなど、静的なサイトでは変更が多数のページに及ぶ場合その全てのページの記述を変更する必要がありますが、PHPを使えばこれらの変更は1つのファイルをいじるだけで済みます。4.WordPressのテーマ構造HTMLファイルをPHPに置き換える前にWordPressテーマの基本的な構造を知っておきましょう。全編はBOOTHにてお買い求め頂けます。コメントをキャンセル頂いたコメントは一読した後表示させて頂いております。反映まで数日かかる場合もございますがご了承下さい。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。