初心者向け｜WordPressテーマの最小構成と仮レイアウトまとめ

2025-08-27

記事内にプロモーションを含む場合があります。

WordPressでオリジナルテーマを作りながら、
プラグインの導入やカスタマイズの検証をしてみたい。

でも、いきなり全部のテンプレートを揃えるのは大変…。
そんなときに役立つのが、“最低限の構成だけを揃えた検証用テーマ”です。

このページでは、

HTMLからPHPに移行したときの実装を試してみたい
CSSの反映や適用範囲など、スタイルの当たり方を確認したい
プラグイン導入後に表示や動作をすぐにチェックしてみたい

といった、“カスタマイズや構造理解を深めるためのベース”として使える、
シンプルなテーマ構成と仮レイアウトをご紹介します。

ワンクリックで目的地へGO！

必要なフォルダ＆ファイル構成（最小ベース）

ここでは「見た目の確認」と「最低限の機能」がスムーズにできるよう、
無駄を省いたシンプルな構成を紹介します。

最低限、以下のようなファイルを準備しておくとスムーズです。

sample-theme/
├── style.css            ← テーマ情報用（WordPressに認識される用）
├── assets/
│   └── style.css       ← 実際のスタイルを書くファイル
├── index.php            ← 仮レイアウトのメイン
├── header.php
├── footer.php
├── functions.php        ← CSS読み込み用
└── template-parts/
    └── breadcrumb.php   ← パンくず表示用テンプレート

補足｜CSSを分ける理由

WordPressのテーマでは、style.css にテーマ情報（名前・バージョンなど）を書く必要がありますが、
実際のスタイルは別ファイル（例：assets/style.scss や css/style.css）に分けるのが一般的です。

理由は主にこの2つ：

構造とデザインを分けることで管理がしやすい
Sassなどのプリプロセッサで書く場合、style.css とは別出力が必要

こうしておけば、後々のテーマ開発やカスタマイズでも混乱せず、メンテナンスしやすくなります◎

各ファイルの最低限コード例（コピペOK）

このまま貼り付ければ、テーマとして動作する最小セットになります◎

ローカル環境や WP STUDIO などで動かしてみると、ファイルごとの役割やつながりがより具体的に理解できますよ。

WP STUDIOを使ってこのコードを動かしたい方は、以下のアコーディオンを開いてご覧ください。
※不要な方は閉じたままでOKです👇

WP STUDIOを使ってテーマを試す簡単ステップ（※クリックで開きます）

WP STUDIOのアプリをすでにインストールしている方は、以下の手順ですぐにこのテーマを表示できます。

準備ステップ（初回のみ）

①WP STUDIOを起動

②「サイトを追加」からサイト名・保存先・ドメインを設定（すべてデフォルトでもOK）

③サイトが作成されたら、Finder をクリック

④wp-content/themes/ フォルダ内に新しいテーマフォルダ（例：sample-theme）を作成

ファイル配置場所の確認

作った sample-theme フォルダの中に、これから紹介する以下のファイルをコピペして保存してください：

style.css
index.php
header.php
footer.php
など、記事で紹介しているファイルすべてVS Codeなどのエディタで作成して保存していきましょう。

記事内にあるコードをコピペすれば、そのまま動くテーマとして反映されます！

※コーディングに慣れていない方も、まずはそのまま貼り付けて動かしてみるだけでOKです。

Localで試したい方はこちら

ありぃブログ

初心者でも安心！Localを使ったWordPressのローカル環境の作り方 | ありぃブログ今回の記事では、Localアプリがインストール済みの状態を前提に、ローカル環境にWordPressをインストールと初期設定を完了させる手順を解説します。これにより、WEBサイト…

style.css

/*
Theme Name: Sample Theme
Author: あなたの名前
Description: WordPressの学習や検証に使える最小構成のテーマ
Version: 1.0
*/

この情報があるだけで、WordPressはこのフォルダを「テーマ」として認識してくれます。
管理画面の「外観＞テーマ」から、有効化できるようになります◎

⚠ style.css に実際のスタイルは書かないようにしましょう！
あくまでテーマ認識用のメタデータファイルとして扱います。

index.php

<?php get_header(); ?>

<main class="site-main">

  <div class="page-heading">
    <h2>メインコンテンツ</h2>
    <p>これはテスト用のコンテンツです。</p>
  </div>

</main>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header class="site-header">
  <h1>ヘッダー部分</h1>
</header>

header.php に wp_head() があるか確認しておきましょう。
これは <head> タグ内に記述されている必要があります。
プラグインやスタイルシートが正しく読み込まれなくなるため、必ず含まれているか確認しましょう。

footer.php

<footer class="site-footer">
  <p>フッター部分</p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

footer.php に wp_footer() が入っているか確認しておきましょう。
こちらも <body> 閉じタグ直前に記述されている必要があります。JavaScriptの読み込みやプラグイン動作に影響します。

functions.php（CSS読み込み用）

<?php
function sample_theme_enqueue_styles() {
  wp_enqueue_style('main-style', get_theme_file_uri('/assets/style.css'), [], '1.0');
}
add_action('wp_enqueue_scripts', 'sample_theme_enqueue_styles');

外部CSS（今回の場合は /assets/style.css）をテーマに読み込むための処理です。

assets/ style.scss（→ style.css にコンパイル）

.site-header {
  background-color: #fce4ec;
  padding: 20px;
  text-align: center;
}

.site-main {
  background-color: #e3f2fd;
  padding: 60px 20px;
  min-height: 600px;
}

.page-heading {
  padding: 60px 0;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.site-footer {
  background-color: #ede7f6;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}

WordPress管理画面で有効化｜示チェック

①WP STUDIO内の管理画面→WP管理画面（http://◯◯◯.local/wp-admin）にアクセス

②「外観」→「テーマ」から sample-theme を有効化

③表示確認すれば、自作テーマが反映されているはずです！

ヘッダー・フッターに背景色がついている
スタイル（余白・文字サイズなど）が反映されている
パンくずリストの表示位置・見た目が整っている

この時点で表示されていれば、テーマ構成とCSSの読み込みはOK！
この状態をベースに、パンくず以外のUIパーツやテンプレートの練習にも活用できます。

最後に

このミニマルなテーマ構成は、

パンくずの実装
カスタムテンプレートの追加
プラグインを使った表示確認
など、WordPressの構造理解やカスタマイズの練習にぴったりです。

このテーマでカバーできる構成と役割

ファイル名	役割・目的
`style.css`	テーマ情報（WordPressに認識させるために必要）
`functions.php`	CSSなどの外部ファイル読み込み処理
`header.php` / `footer.php`	共通レイアウト・`wp_head()` `wp_footer()` の出力
`index.php`	仮レイアウトの表示確認・構造のベース
`template-parts/breadcrumb.php`	パーツテンプレートの読み込み・再利用構造の練習用
`assets/style.scss`	実際のスタイル定義用（自由に調整＆拡張可能）

これだけで、WordPressテーマの動作・表示・スタイルの適用確認まで一通りOKです◎
パンくずに限らず、さまざまなカスタマイズ検証のベースとして活用できます。

今後追加するかもしれないファイル一覧（参考）

ファイル名	目的・追加タイミング
`page.php`	固定ページ専用のレイアウト切り替えが必要なとき
`single.php`	投稿ページに本文や個別表示の処理を入れたいとき
`screenshot.png`	テーマ一覧で表示されるサムネイル（任意）
`style.css` 内 `Tags:`	テーマを分類したい場合（公式登録や検索対応時）
`functions.php` 内 `add_theme_support()` 系	アイキャッチ・メニュー・カスタムロゴなどを追加したいとき