WordPressの自作テーマに挑戦してみよう！ 初めてでも意外と簡単？

ローカル環境とは、自分のパソコン内部だけで完結する環境のことです。

ローカル環境では、万が一エラーが出てもほかに影響しないため、思う存分テストができるといったメリットがあります。

WordPressのテーマに限らず、プログラムを開発する際はまずローカル環境でテストをおこない、問題ないことを確認してから本番環境に実装するのが一般的です。

テーマ自作のためのローカル環境を構築するには、次のような専用ツールを利用します。

いずれのツールも無料で利用でき、ダウンロードして手順に沿ってインストールするだけでローカル環境が整います。

ローカル環境が整ったら、WordPress日本語版の公式サイトにアクセスしてWordPressの本体をダウンロードし、ローカル環境にインストールしましょう。

インストール方法は、ローカル環境を構築するのに使ったツールによって異なります。

ツールの一つである「Local」はWordPressのインストール作業が必要なく、ボタンをクリックするだけでローカル環境のWordPressを立ち上げることができるので、初心者にもおすすめです。

WordPressテーマの自作に取りかかる前に、サンプルとして使うテキスト（記事）をいくつか準備しておきましょう。

サイトの中身が空っぽでもテーマを作ることはできますが、動作テストをして思い通りに動いているかどうかを確認するのが難しいからです。

ローカル環境のWordPressにサンプル用の記事を投稿し、問題なく表示されたら、テーマの自作に取りかかります。

「functions.php」はテーマ全体をつかさどる、とても重要なファイルです。

主な役割はこちら。

「functions.php」はテーマのファイルよりも先に読み込まれるので、具体的な表示に関する記述はおこないません。

また、記述にミスがあるとサイトの表示に影響が出ることもあるので、編集する前にバックアップを取っておくようにしましょう。

「style.css」はWebサイトを装飾するためのCSSを記述するファイルです。

ファイルの冒頭には、どのテーマで使うCSSファイルなのかを記載してください。

内容を書き換えることで、フォントの大きさやテーマ内で使うカラー、空きスペースの量、線の太さやスタイルなどを自在に変更することができます。

記述にミスがあるとデザインが大きく崩れてしまいますので、こまめに表示を確認しながら作成していきましょう。

「index.php」はフロントページをはじめ、サイト全体のデザインのベースとなるファイルです。

ページごとのテンプレートファイルを準備しない場合は、すべてのページで「index.php」が読み込まれて表示されます。

「index.php」を作成するときはまず、冒頭部分に「header.php」、一番最後に「footer.php」を読み込むコードを記述します。

この2つのコードの間に、表示させたい内容を記載しましょう。

「header.php」は、すべてのページで表示するヘッダー（ページの上部）部分を記載するファイルです。

Webサイトのタイトルやロゴ、各コンテンツへアクセスするためのナビゲーションメニュー、アクセス解析用のタグ、ファビコンの指定タグなど、全ページ共通で表示・使用したい要素をこちらに記載します。

また、HTMLの書き出しで必要なbodyやhtmlの開始タグ、ヘッダー情報を読み込むタグも忘れずに記載してください。

「footer.php」は、すべてのページで表示するフッター（ページの下部）部分を記載するファイルです。

ここには、コピーライト表記（著作権情報）やお問い合わせ先、お店の住所や電話番号、免責事項など、全ページ共通で表示させたい要素を盛り込みます。

また、bodyやhtmlの終了タグと、フッター情報を読み込むタグも記載してください。

必要に応じて、ナビゲーションメニューやサイトマップへのリンクなどを入れるといいでしょう。

「sidebar.php」は、Webサイトの左端や右端に表示するタテ長のサイドバーについて記載するファイルです。

サイドバーには、管理者のプロフィールや最近投稿した記事のリスト、カレンダー、SNSへのリンク、アフィリエイト用の広告など、多彩なコンテンツを表示できます。

ECサイトなら、商品カテゴリやセール情報を掲載するのもいいでしょう。

内容は直接HTMLで表記することもできますし、管理画面でウィジェットを追加して表示させることもできます。

「comments.php」は、1件ごとの記事につくコメントの表示とコメント入力欄をカスタマイズするためのファイルです。

書き込まれたコメントを表示する機能と、コメントフォームを表示する機能が含まれています。

コメント欄は簡単なコードを記載するだけで表示できますが、そのままでは見栄えがいいとはいえません。

見た目を変えたいときは、「style.css」にCSSを追加して整えましょう。

「single.php」は、WordPressの「投稿」機能で追加したページの表示に使うファイルです。

投稿ページは訪問者が目にすることの多いページですので、必要な要素をしっかり盛り込んでおきましょう。

「header.php」や「footer.php」を読み込んで、Webサイト内を回遊しやすくするのも大切です。

「index.php」や「page.php」と共通部分が多いファイルですので、複製して作成しても問題ありません。

「page.php」はWordPressの「固定ページ」機能で追加したページの表示に使うファイルです。

「single.php」との違いは、「次の記事へ」「前の記事へ」といったページ移動のナビゲーションが必要ないことです。

「index.php」や「single.php」をいったん完成させて、それを複製して作ると作成の手間を省くことができます。

「page.php」「index.php」「single.php」の3つは、必然的に共通ポイントが多くなるので、共通部分を決めてからページごとに異なる部分を作っていくとスムーズです。

「search.php」は、訪問者がWebサイト内検索した際に検索結果を表示させるためのファイルです。

検索ワードに該当する記事を一覧で表示することができます。

Webサイト内検索の機能を有効にするには、検索用のフォームとボタンも必要ですので、フォームを表示させるためのPHPファイルも作成しておきましょう。

検索フォームは、ヘッダーやフッター、サイドバーなど、全ページ共通で表示する部分につけておくとアクセスしやすくなり便利です。

「screenshot.png」はテーマの概要をあらわす画像ファイルです。

管理画面で「外観」→「テーマ」にアクセスしたとき、テーマの一覧画面で「screenshot.png」がサムネイルとして表示されます。

独自の画像を作成してもいいですし、フロントページのスクリーンショットを撮影してアップロードしても問題ありません。

このファイルは訪問者から見えるものではありませんので、自分で自作テーマだとわかる画像を用意しておけば管理がしやすくなります。

「404.php」は訪問者が存在しないページにアクセスしたときに表示させる内容を記載するファイルです。

フロントページに戻るようにうながしたり、メニューから別のページに飛ぶよう案内したりしておくと親切です。

Webサイトによっては、せっかく訪問してくれた人をクスッと笑わせるようなユーモアを取り入れているところもあります。

細かい部分になりますが、せっかくアクセスしたページが存在しないとなると離脱の原因になってしまうので、別のページへ誘導する仕組みを盛り込んでおきましょう。

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。