WordPressオリジナルテーマの作り方｜初心者でも迷わない自作手順と必要ファイル完全ガイド
はじめに
WordPressでオリジナルテーマを作れるようになると、デザインの自由度が一気に広がります。既製テーマをそのまま使うのではなく、サイトの目的やブランドに合わせて、レイアウト・導線・機能を細かく設計できるのが大きな魅力です。特に「ワードプレス オリジナルテーマ」を作れるようになると、見た目だけでなく、表示速度や運用効率、SEO面の最適化まで自分で調整しやすくなります。
ただし、初心者にとっては「何から始めればいいのか分からない」「必要なファイルが多くて難しそう」と感じやすい分野でもあります。そこで本記事では、WordPressオリジナルテーマの基礎知識から、必要ファイル、作成手順、テンプレート階層、よくあるエラー対策までを、初心者でも迷わないように順番に解説します。
1. WordPressオリジナルテーマとは？初心者が最初に知るべき基礎知識
WordPressオリジナルテーマとは、自分のサイト専用に設計・開発したテーマのことです。既製テーマのデザインを少し変えるのではなく、HTML構造やCSS、PHPテンプレートを組み立てて、サイトの見た目と機能をゼロから近い形で作るのが特徴です。
1-1. WordPressテーマの役割と表示の仕組み
WordPressテーマは、サイトの表示を担当するテンプレートの集合体です。WordPress本体がコンテンツや設定を管理し、テーマがその情報をどのように見せるかを決めます。
たとえば、投稿ページでは記事タイトル、本文、アイキャッチ画像、カテゴリーなどを表示しますが、これらをどの位置に配置するか、どんな見出しデザインにするか、どのパーツを共通化するかはテーマ側で制御します。つまり、WordPressは「中身」を管理し、テーマは「見せ方」を担当していると考えると分かりやすいでしょう。
1-2. オリジナルテーマと既存テーマ・子テーマの違い
既存テーマは、すでに完成されたデザインや機能を持つテーマです。導入が簡単で、短時間でサイトを公開できます。一方で、デザインや構造を大きく変えたい場合には制約が出やすいです。
子テーマは、親テーマの機能やデザインを引き継ぎながら、一部だけ変更する方法です。親テーマのアップデートに強い反面、親テーマの設計に依存します。そのため、独自の構成や機能を深く作り込みたい場合は、オリジナルテーマの方が自由度が高くなります。
オリジナルテーマは、ベースとなる既存テーマに縛られないため、サイトの目的に合わせた最適化がしやすいです。ただし、その分だけ設計と実装の手間は増えます。
1-3. オリジナルテーマを自作するメリット・デメリット
メリットは、デザインと機能を完全にコントロールできることです。不要な機能を削ぎ落として軽量化しやすく、表示速度の改善にもつながります。また、クライアント案件や自社サイトでは、将来的な運用方針に合わせて構造を整えやすいのも利点です。
一方、デメリットは、作成に時間がかかることです。HTML/CSSだけでなく、PHPやWordPress独自の関数、テンプレート階層の理解も必要になります。さらに、セキュリティや保守性を意識した実装も欠かせません。
1-4. 初心者でもWordPressオリジナルテーマは作れるのか
結論からいえば、初心者でも作れます。ただし、いきなり高度な機能を詰め込むのではなく、まずは静的HTMLをWordPressテーマに変換する流れを理解することが大切です。
最初は、トップページ、投稿一覧、投稿詳細、固定ページの4種類を作れるだけでも十分です。そこからメニュー、ウィジェット、アイキャッチ画像、パンくずなどを少しずつ追加していけば、実践的なオリジナルテーマに育てられます。
2. WordPressオリジナルテーマ作成に必要な前提知識と準備
WordPressオリジナルテーマを作る前に、最低限の知識と作業環境を整えておくと、制作がスムーズになります。
2-1. 必要なスキルはHTML・CSS・PHP・WordPress関数
まず必要なのはHTMLとCSSです。HTMLはページの骨組みを作り、CSSは見た目を整えます。これがなければ、テーマのベースを構築できません。
さらに、WordPressテーマではPHPが必要です。PHPを使って、記事タイトルや本文、URL、画像パスなどを動的に出力します。加えて、WordPress関数を使うことで、テーマとWordPress本体を連携させます。たとえば、get_header()、the_title()、the_content()、wp_head() などの関数は頻出です。
2-2. ローカル開発環境を用意する
WordPressテーマは、いきなり本番環境で作るのではなく、ローカル開発環境で制作するのが基本です。ローカル環境なら、表示崩れやPHPエラーが起きても、公開サイトに影響を与えずに検証できます。
XAMPP、MAMP、Localなどを使えば、手元のパソコンにWordPressを構築できます。初心者は、まずWordPressを問題なくインストールし、管理画面にログインできる状態を作ることから始めましょう。
2-3. コードエディタとブラウザ検証ツールを準備する
コードを書くためには、使いやすいエディタが必要です。Visual Studio Codeのようなエディタを使うと、PHPやHTML、CSSの編集がしやすくなります。
ブラウザの開発者ツールも重要です。要素の確認、CSSの調整、コンソールエラーの発見など、テーマ開発では必須に近い存在です。テーマの崩れを見つけたときも、開発者ツールを使えば原因を効率よく追えます。
2-4. テーマ化する前の静的HTMLを用意する
オリジナルテーマ制作では、最初に静的HTMLでサイトの形を作っておくと進めやすくなります。ヘッダー、フッター、サイドバー、投稿一覧、記事詳細など、WordPress化する前の完成イメージを用意しておくことで、テンプレート分割の作業が明確になります。
この段階で、デザインの方向性、レイアウト、必要なパーツを整理しておくと、後の修正が少なくなります。
3. WordPressオリジナルテーマに必要な基本ファイル
WordPressテーマは複数のファイルで構成されますが、最初からすべてを用意する必要はありません。最低限のファイルから始めて、必要に応じて追加していけば十分です。
3-1. 最低限必要なstyle.cssとindex.php
WordPressテーマとして認識されるためには、少なくとも style.css と index.php が必要です。style.css にはテーマ情報を書き、index.php はテーマのメインテンプレートとして動作します。
style.css がないとテーマとして表示されないことがあり、index.php がないとWordPressが出力先を判断できません。まずはこの2つを用意するのが出発点です。
3-2. functions.phpの役割と使い方
functions.php は、テーマの機能を追加するためのファイルです。CSSやJavaScriptの読み込み、アイキャッチ画像の有効化、メニュー登録、ウィジェット追加などをここで行います。
また、WordPressの動作に関わる設定も記述できるため、テーマの中核を支える重要なファイルです。ただし、記述ミスがあると画面が真っ白になることがあるため、編集時には慎重さが必要です。
3-3. header.php・footer.php・sidebar.phpの役割
header.php は、サイト上部の共通部分をまとめるファイルです。meta情報、CSS読み込み、ヘッダー、ナビゲーションなどを入れます。
footer.php は、フッター部分や wp_footer() の出力先として使います。閉じタグの管理もここで行うことが多いです。
sidebar.php は、サイドバーを共通化したいときに使います。ウィジェットエリアと組み合わせることで、複数ページで同じサイドバーを表示できます。
3-4. front-page.php・home.php・page.php・single.php・archive.phpの違い
front-page.php はトップページ専用のテンプレートです。固定ページをトップにした場合や、独自のトップページを作るときに使われます。
home.php は投稿一覧ページに使われます。ブログのトップや記事一覧を表示するページで使うことが多いです。
page.php は固定ページに使われます。会社概要、サービス紹介、問い合わせページなどに対応します。
single.php は投稿詳細ページ用です。ブログ記事やお知らせ記事の個別表示を担当します。
archive.php は一覧ページのテンプレートです。カテゴリー一覧、タグ一覧、月別アーカイブなどに使われます。
3-5. screenshot.pngや404.phpなど追加しておきたいファイル
screenshot.png は、管理画面のテーマ一覧に表示されるサムネイル画像です。テーマの印象を伝えやすくなります。
404.php は、ページが見つからないときのエラーページです。ユーザーが迷わないように、トップページや検索窓への導線を設けると親切です。
そのほか、search.php や comments.php、template-parts ディレクトリなどを追加すると、より整理されたテーマになります。
4. WordPressオリジナルテーマの作り方｜基本手順
ここからは、実際にWordPressオリジナルテーマを作る流れを順番に見ていきます。
4-1. テーマ用フォルダを作成する
最初に、WordPressのテーマディレクトリ内に新しいフォルダを作成します。フォルダ名は、分かりやすくサイト名やテーマ名にしておくと管理しやすいです。
このフォルダが、オリジナルテーマの入れ物になります。ファイルはすべてこの中に整理して配置していきます。
4-2. style.cssにテーマ情報を記述する
style.css の先頭には、テーマ情報をコメント形式で記述します。テーマ名、作者名、説明文、バージョンなどを書いておくと、WordPressがテーマとして認識します。
この情報が正しく書かれていないと、管理画面にテーマが表示されないことがあるため注意が必要です。まずは最低限のテーマ名だけでも記述しましょう。
4-3. index.phpを作成してテーマを認識させる
次に、index.php を作成します。最初はシンプルな内容で構いません。WordPressがこのテーマを読み込める状態を作ることが目的です。
index.php が存在すると、WordPressはテーマのメインテンプレートとして利用できます。ここから他のテンプレートに分割していく流れになります。
4-4. 管理画面からオリジナルテーマを有効化する
テーマファイルを設置したら、WordPress管理画面の外観メニューからテーマ一覧を開きます。作成したテーマが表示されていれば、テーマ情報は正しく認識されています。
そのまま有効化すれば、オリジナルテーマが適用されます。表示が崩れても、この段階では正常です。まだテンプレートの分割やWordPressタグの埋め込みが済んでいないためです。
4-5. 静的HTMLをWordPressテーマ用に分割する
テーマを有効化したら、静的HTMLを header.php、footer.php、index.php などに分けていきます。ヘッダーやフッターの共通部分を切り出し、WordPress関数で呼び出す形に変換します。
この作業を行うことで、サイト全体の保守性が高まります。共通部分を一箇所で管理できるため、後から修正する際も効率的です。
5. HTMLをWordPress化する具体的な方法
HTMLをWordPressテーマへ変換する際のポイントは、静的な記述を動的な記述に置き換えることです。
5-1. header.phpとfooter.phpに共通パーツを分ける
サイト上部のロゴ、グローバルナビ、ヘッダー画像などは header.php にまとめます。ページ下部のコピーライトやフッターリンクは footer.php に分けます。
共通部分を分離しておくと、全ページに反映されるので修正が簡単です。デザイン変更時にも、1ファイルの編集で全体を更新できます。
5-2. get_header・get_footer・get_sidebarを使う
WordPressでは、共通パーツを読み込むために get_header()、get_footer()、get_sidebar() を使います。これにより、各テンプレートに共通コードを毎回書かずに済みます。
たとえば、index.php に get_header() を書けば header.php が読み込まれ、get_footer() を書けば footer.php が読み込まれます。テーマ開発の基本となる考え方です。
5-3. bloginfo・home_url・get_template_directory_uriでURLを動的にする
画像やリンクのURLを固定で書くと、環境が変わったときに表示されなくなることがあります。そこで、WordPress関数を使ってURLを動的に出力します。
bloginfo() はサイト情報の出力、home_url() はサイトのトップURL、get_template_directory_uri() はテーマ内のファイルパス取得に使います。これらを使うことで、ローカル環境から本番環境への移行がしやすくなります。
5-4. wp_headとwp_footerを正しく設置する
wp_head() は、</head> の直前に書きます。WordPressやプラグインがCSS・JavaScript・メタ情報などを追加するために必要です。
wp_footer() は、</body> の直前に書きます。こちらも重要な処理が出力される場所です。どちらかが抜けると、プラグインが正常に動作しないことがあります。
5-5. CSS・JavaScript・画像ファイルを正しく読み込む
テーマ内のCSSやJavaScript、画像ファイルは、正しいパスで読み込む必要があります。特にWordPressでは、テンプレートの中で相対パスを直接使うと、ページ階層によって崩れることがあります。
そのため、テーマディレクトリのURLを取得できる関数を利用するのが安全です。読み込みに失敗すると、デザインが反映されない、スクリプトが動かないなどの問題が起きます。
6. 投稿ページ・固定ページ・一覧ページを作る
WordPressオリジナルテーマの実用性を高めるには、各ページタイプに対応したテンプレートを作ることが重要です。
6-1. WordPressループで投稿を表示する
WordPressループは、投稿を順番に取得して表示する仕組みです。記事一覧ページでは、このループを使って記事タイトル、抜粋、投稿日などを出力します。
ループを理解すると、記事データを柔軟に扱えるようになります。オリジナルテーマ制作では必ず押さえておきたい基本です。
6-2. single.phpで投稿詳細ページを作る
single.php は、個別記事ページのテンプレートです。記事タイトル、本文、投稿日、カテゴリ、タグ、前後記事リンクなどを表示します。
ブログテーマでは最もよく使うテンプレートのひとつです。読みやすさや関連記事導線を意識して設計すると、ユーザー体験が向上します。
6-3. page.phpで固定ページを作る
page.php は、固定ページ専用のテンプレートです。会社概要、サービス案内、プライバシーポリシーなど、頻繁に更新されないページに向いています。
固定ページは投稿と違ってカテゴリーやタグを持たないことが多いため、シンプルで見やすいレイアウトにすると使いやすくなります。
6-4. archive.phpでカテゴリー・月別アーカイブを作る
archive.php は、一覧ページ全般に使えるテンプレートです。カテゴリー別、タグ別、日付別などの一覧をひとまとめに対応できます。
アーカイブページでは、タイトルだけでなく、件数や説明文を入れることで、ユーザーが内容を把握しやすくなります。投稿数が多いサイトでは特に重要です。
6-5. front-page.phpでトップページを作る
front-page.php は、サイトの顔となるトップページを作るためのテンプレートです。ファーストビュー、サービス紹介、最新記事、実績、CTAなどを自由に配置できます。
オリジナルテーマの強みは、このトップページをサイト目的に合わせて設計できる点です。企業サイト、ブログ、ポートフォリオなど、用途に応じて構成を変えられます。
7. functions.phpでテーマ機能を追加する
functions.php は、テーマの機能拡張を担う非常に重要なファイルです。
7-1. CSSとJavaScriptをwp_enqueue_style・wp_enqueue_scriptで読み込む
CSSやJavaScriptは、直接HTMLに書くのではなく、WordPressの読み込み関数を使うのが基本です。wp_enqueue_style() と wp_enqueue_script() を使えば、読み込み順や依存関係を管理しやすくなります。
この方法は、重複読み込みの防止やプラグインとの競合回避にも役立ちます。
7-2. アイキャッチ画像を有効化する
アイキャッチ画像を使うには、functions.php でサポートを有効化します。これにより、投稿や固定ページにサムネイル画像を設定できるようになります。
一覧ページや記事詳細ページでアイキャッチを表示すると、視認性が上がり、記事の印象も良くなります。
7-3. メニュー機能を追加する
WordPressでは、管理画面からメニューを編集できるようにすることができます。functions.php でメニュー位置を登録しておくと、ヘッダーナビやフッターナビを柔軟に管理できます。
メニューをコードに直書きせず、管理画面で差し替えられるようにしておくと、運用がしやすくなります。
7-4. ウィジェットエリアを追加する
サイドバーやフッターに表示する枠を、ウィジェットエリアとして登録できます。これにより、管理画面から検索窓、カテゴリー一覧、バナーなどを追加しやすくなります。
更新のしやすさを考えると、固定表示にするよりもウィジェット化したほうが実用的です。
7-5. タイトルタグやHTML5サポートを設定する
テーマの品質を高めるには、タイトルタグの自動管理やHTML5への対応も重要です。タイトルタグをWordPress側で制御できるようにすると、SEO面でも扱いやすくなります。
HTML5サポートを有効にしておくと、フォームやコメントなどの出力がより適切になります。
8. WordPressテンプレート階層を理解する
テンプレート階層は、WordPressがどのファイルを優先して使うかを決める仕組みです。オリジナルテーマ制作では、この理解が非常に重要です。
8-1. テンプレート階層とは何か
テンプレート階層とは、特定のページを表示するときに、WordPressが候補となるテンプレートを上から順に探していく仕組みです。より具体的なファイルがあればそれを使い、なければ汎用テンプレートにフォールバックします。
この仕組みを理解すると、なぜ single.php が使われるのか、なぜ archive.php が優先されるのかが分かるようになります。
8-2. トップページで使われるテンプレート
トップページでは、設定によって使われるファイルが変わります。固定ページをトップに設定した場合は front-page.php や page.php が使われることがあります。
投稿一覧をトップにする場合は home.php が使われることがあります。トップページの挙動はサイト設定とテンプレート階層の両方を見る必要があります。
8-3. 投稿・固定ページで使われるテンプレート
投稿詳細ページでは single.php、固定ページでは page.php が基本です。さらに、投稿タイプごとに個別テンプレートを用意することもできます。
サイトが大きくなるほど、テンプレートを細かく分けることで保守しやすくなります。
8-4. カテゴリー・タグ・検索結果で使われるテンプレート
カテゴリーやタグの一覧は archive.php や taxonomy.php 系のテンプレートが使われます。検索結果は search.php で制御できます。
一覧の種類ごとにデザインを変えたいときは、テンプレート階層を活用すると柔軟に対応できます。
8-5. 迷ったときに確認すべきテンプレートの優先順位
表示が思った通りにならない場合は、まずどのテンプレートが使われているかを確認します。WordPressはより具体的なテンプレートを優先するため、意図しないファイルが呼ばれていることがあります。
テンプレート階層を理解しておくと、どこを修正すべきかすぐに判断しやすくなります。
9. 初心者がつまずきやすいエラーと解決方法
WordPressオリジナルテーマ作成では、いくつか典型的なつまずきポイントがあります。あらかじめ知っておくと、トラブル時に落ち着いて対処できます。
9-1. テーマが管理画面に表示されない
テーマが表示されない場合は、style.css のテーマ情報が正しいか確認します。フォルダ位置が正しいか、コメント形式が崩れていないかも重要です。
また、index.php が存在しないと認識されないことがあります。まずは必要最小限の構成ができているかを見直しましょう。
9-2. CSSや画像が読み込まれない
CSSや画像が表示されない場合は、パスの記述ミスが原因であることが多いです。固定の相対パスではなく、テーマディレクトリのURLを使っているか確認します。
キャッシュが残っていることもあるので、ブラウザの再読み込みやキャッシュ削除も試してください。
9-3. 投稿が表示されない
投稿が表示されない場合は、WordPressループの書き方や、テンプレートファイルの選択を確認します。公開状態になっているか、表示設定に問題がないかも重要です。
また、クエリの条件が厳しすぎると投稿が取得されないことがあります。まずは基本のループから確認するのが安全です。
9-4. ヘッダーやフッターが崩れる
ヘッダーやフッターの崩れは、HTMLタグの閉じ忘れや、テンプレートの分割ミスで起こりやすいです。header.php と footer.php の構造を見直し、余計な閉じタグがないか確認しましょう。
CSSの読み込み順や、wp_head()・wp_footer() の設置漏れも原因になりがちです。
9-5. functions.php編集時の画面真っ白エラーを防ぐ方法
functions.php は、1文字のミスで致命的なエラーになることがあります。編集前にバックアップを取り、少しずつ保存して確認するのが安全です。
エラーが起きたら、直前に追加したコードを疑いましょう。可能であればローカル環境で検証してから本番に反映するのが理想です。
10. オリジナルテーマを公開前に確認するチェックリスト
公開前の確認は、テーマ品質を左右する大切な工程です。見た目だけでなく、運用面や安全性も確認しておきましょう。
10-1. レスポンシブ表示を確認する
パソコンだけでなく、スマホやタブレットでもレイアウトが崩れないか確認します。メニュー、画像、文字サイズ、余白の見え方をチェックしましょう。
レスポンシブ対応が甘いと、せっかくのオリジナルテーマでもユーザー体験が下がってしまいます。
10-2. パンくず・タイトル・メタ情報を確認する
SEOや使いやすさの観点から、パンくずリスト、ページタイトル、meta情報の確認は欠かせません。ページの構造が分かりやすいと、ユーザーにも検索エンジンにも伝わりやすくなります。
表示内容に漏れがないか、ページタイプごとに確認しておきましょう。
10-3. セキュリティとエスケープ処理を確認する
WordPressテーマでは、出力時のエスケープが重要です。URL、テキスト、属性値などは、適切な関数で安全に出力する必要があります。
入力値をそのまま出力すると、思わぬ脆弱性につながることがあります。安全な書き方を習慣化することが大切です。
10-4. 表示速度と不要ファイルを確認する
テーマ内に使っていないCSSやJavaScript、画像ファイルが多いと、表示速度に悪影響が出ます。公開前に不要なファイルを整理して、軽量化を意識しましょう。
ファイルの分割方法や画像の最適化も、速度改善に有効です。
10-5. 本番環境へアップロードする前のバックアップ確認
本番環境へ反映する前には、必ずバックアップを取っておきます。テーマファイルだけでなく、データベースも含めて保存しておくと安心です。
予期せぬ不具合が出ても、元に戻せる状態を作っておくことが重要です。
11. WordPressオリジナルテーマ作成を効率化する方法
オリジナルテーマは、工夫次第で制作効率を大きく高められます。最初から完璧を目指すより、再利用しやすい設計を意識することが大切です。
11-1. スターターテーマを活用する
ゼロから作るのが不安な場合は、スターターテーマを活用する方法があります。最初から最低限の構造やWordPressタグが整っているため、学習コストを下げられます。
ただし、既存の設計をそのまま使うのではなく、自分のサイトに合わせて整理しながら使うことが重要です。
11-2. ブロックテーマとクラシックテーマの違いを理解する
WordPressには、ブロックテーマとクラシックテーマがあります。ブロックテーマはサイトエディター中心の設計で、クラシックテーマはPHPテンプレートを中心に作る従来型です。
この記事で扱っているWordPressオリジナルテーマは、主にクラシックテーマの考え方です。既存の制作フローに慣れているなら、まずはクラシックテーマで基礎を固めると理解しやすいでしょう。
11-3. よく使うテンプレートパーツを共通化する
カードデザイン、ボタン、見出し、関連記事など、繰り返し使うパーツは共通化すると効率的です。template-parts を使って分割しておけば、修正も一箇所で済みます。
共通化は、見た目の統一と保守性の両方に役立ちます。
11-4. Gitで変更履歴を管理する
テーマ制作では、コードの変更履歴を残しておくと非常に便利です。Gitを使えば、いつ何を変更したかが分かり、エラーが起きても以前の状態に戻しやすくなります。
長期運用や複数人での開発では特に重要です。初心者のうちから慣れておくと、将来の制作効率が大きく変わります。
12. WordPressオリジナルテーマ作成に関するよくある質問
12-1. WordPressオリジナルテーマ作成にどれくらい時間がかかるか
作る範囲によって大きく変わります。シンプルなブログテーマなら、基本構成を理解していれば数日から数週間で形にできます。デザインの作り込みや機能追加が多い場合は、さらに時間がかかります。
12-2. PHPが苦手でもオリジナルテーマは作れるか
最低限のPHPを理解していれば作れます。WordPressテーマでは、複雑なプログラムよりも、テンプレートタグの使い方やファイル分割の理解が重要です。最初は基本関数を少しずつ覚えれば問題ありません。
12-3. オリジナルテーマと有料テーマはどちらがよいか
目的によって異なります。スピード重視なら有料テーマが便利です。独自性や細かな設計、長期運用の最適化を重視するならオリジナルテーマが向いています。
12-4. 自作テーマを配布・販売するときに注意すること
配布や販売をする場合は、コードの品質だけでなく、ライセンス、サポート範囲、更新体制も考える必要があります。特に、使用している画像やフォント、外部ライブラリの利用条件には注意が必要です。
まとめ
WordPressオリジナルテーマは、最初は難しく見えても、基本の流れを押さえれば初心者でも十分に作成できます。まずは静的HTMLを用意し、style.css と index.php でテーマとして認識させ、header.php や footer.php に分割しながら WordPress化していくのが基本です。
さらに、functions.php で機能を追加し、テンプレート階層を理解すれば、投稿ページ・固定ページ・一覧ページ・トップページまで柔軟に作れるようになります。ワードプレス オリジナルテーマを自作できるようになると、デザインの自由度だけでなく、運用しやすさや改善のしやすさも大きく向上します。
まずは小さなテーマから始めて、少しずつ機能を増やしていくことが、失敗しない近道です。