【WordPress】個人で自作テーマは作れる？必要なファイル・素材・プラグインまとめ

2026.07.07

「会社の公式サイトや自分のポートフォリオサイトを、既存のテーマ（SwellやCocoonなど）ではなく、完全にオリジナルの自作テーマで作ってみたい」

そう考えたとき、誰もが一度は「Web開発会社がチームで作るようなものを、個人で作るなんてマンパワー的に無理じゃないか？」と不安になるのではないでしょうか。

結論から言うと、個人でもコーポレートサイトの自作テーマ化は「十分可能」です。

なぜなら、プロの開発会社もすべてのプログラムをゼロから書いているわけではなく、便利なプラグインを賢く組み合わせているからです。この記事では、個人で自作テーマを作る際、「自分で用意するもの」と「プラグインに丸投げしていいもの」を分かりやすくリスト形式でまとめました。

1. 自分で必ず作成する「テーマ構成ファイル」

WordPressのテーマとしてシステムに認識させるために、以下のファイル群を自分でコーディング（PHP/CSS）する必要があります。

ファイル名役割 / 必要な理由
style.css【必須】 テーマ名や制作者情報を冒頭にコメント記述する。サイト全体のCSSもここに書く。
index.php【必須】 万が一、他のテンプレートがない場合にすべてのページを表示する大元のファイル。
functions.php【必須】 テーマの機能を有効化する（CSS/JSの読み込み、メニュー機能の有効化など）。
header.phpヘッダー部分（<head>タグやナビゲーション）を共通パーツとして切り出したもの。
footer.phpフッター部分（コピーライトやスクリプト読み込み）を共通パーツとして切り出したもの。
front-page.phpトップページ専用のテンプレート。
single.phpお知らせやブログなどの「個別記事ページ」用テンプレート。
page.php会社概要やお問い合わせなどの「固定ページ」用テンプレート。
archive.php記事の一覧ページ用テンプレート。
screenshot.png管理画面の「外観＞テーマ」で表示されるサムネイル画像（1200×900px推奨）。

一見多く見えますが、基本的には「普通のWEBサイト（HTML）」をパーツごとに切り分けて、必要な場所にWordPress専用のコード（関数）を数行埋め込んでいくだけの作業です。

2. 自分で用意する「サイトの素材・テキスト」

テーマを組み込む前に、一般的なWEB制作として以下のコンテンツデータ（原稿やデザイン）を用意する必要があります。

  • デザインデータ / コーディングデータ
    • FigmaやAdobe XD等で作成したデザイン、または事前に作成したHTML/CSS/JavaScript一式。
    • ※コードを書きながらデザインを考えると高確率で挫折するため、見た目は100%決めてからWP化に入りましょう。
  • 画像アセット
    • サイトのロゴデータ（SVGまたはPNG）
    • メインビジュアル用の高画質画像
    • 各種アイコン、プレースホルダー用の画像
  • コーポレートサイトを作成する場合の基本テキスト（原稿）
    • 会社概要の表データ（住所、設立、資本金など）
    • 企業の強み、サービス紹介文、プライバシーポリシーの文章

3. 【最重要】HTML.CSSからWordPressへの「解体＆落とし込み」の流れ

デザインカンプ（Figmaなど）から静的なHTML/CSSコーディングが終わると、手元には1枚の長〜い index.html があるはずです。これをWordPressで動かすために、「共通部分」と「そのページだけの部分」にザクザクと切り分けていく作業（分解の儀式）を行います。

言葉で聞くよりも、上・中・下に3分割するイメージを持つと一気に簡単になります。

① header.php に移植する場所

HTMLの先頭（<!DOCTYPE html>）から、ナビゲーションメニュー（ヘッダー）の終わりまでを丸ごと切り取って貼り付けます。

  • 👈 超重要： </head> タグの直前に、WordPressの命綱である <?php wp_head(); ?> というコードを必ず書き込んでおきます。これがないとプラグインが一切動きません。

② footer.php に移植する場所

サイトの最下部にあるフッターエリア（<footer>）から、最後の </html> タグまでを切り取って貼り付けます。

  • 👈 超重要： </body> タグの直前に、これまた必須コードである <?php wp_footer(); ?> を書き込んでおきます。

③ front-page.php に移植する場所

ヘッダーとフッターに挟まれていた、トップページ固有のメインコンテンツ（MV、お知らせ、作品一覧などが入った <main> 〜 </main> の中身）をそのまま貼り付けます。

そして、切り分けたヘッダーとフッターを合体させるために、ファイルの最初と最後に以下の「呼び出しコード」を2行書くだけです。

PHP

<?php get_header(); ?> 
<main>
 ・・・
     </main>
<?php get_footer(); ?> ```

④自分の書いたCSSをそのまま適用する「2つのルール」

HTMLの分解が終わったら、次はデザイン（CSS）の適用です。「自分が書いたCSSファイルの中身をそのまま貼り付ければいいの？」という疑問が湧くと思いますが、基本的にはそのまま丸ごと貼り付ければOKです！

ただし、WordPressの自作テーマでは以下の2つの絶対ルールを守る必要があります。

ルール①：style.css の「冒頭」にテーマ情報を書く

自作したCSSを貼り付ける際、style.css の一番最初（1行目）に、以下のような「これは私が作ったテーマです」という情報をコメント形式で書く必要があります。これがないと、WordPressがテーマとして認識してくれません。

CSS

@charset "utf-8";
/*
Theme Name: My Portfolio Theme（←あなたの決めたテーマ名）
Author: Your Name（←あなたの名前）
Description: 自作のオリジナルテーマです。
Version: 1.0
*/

/* --------------------------------------------------
   ここから下に、自分がHTMLサイトで書いたCSSを
   そのまま全部貼り付ければOK！
-------------------------------------------------- */

body {
    font-family: 'Helvetica', sans-serif;
    color: #333;
}

ルール②：functions.php で「CSSを読み込む命令」を書く

普通のHTMLサイトなら <head> の中に直接CSSのリンクを書きますが、WordPressではその書き方だとファイルの場所がズレて読み込めません。 テーマのフォルダ内にある functions.php を開き、以下のコードをそのまま貼り付けます。

PHP

<?php
function my_theme_enqueue_styles() {
    
    wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

上記のコードを書くことで、WordPressが自動で style.css を見つけ出し、先ほどの header.php にある <?php wp_head(); ?> の場所にデザインを自動で滑り込ませてくれます。

🚨 自作テーマの罠！「エディター崩れトラブル」と賢い対処法。

ここで、初めて自作テーマに挑戦する人が100%直面する重大なトラブルと、個人のマンパワーを犠牲にしないための賢いハイブリッド対処法を紹介します。

⚠️ 自作テーマ開発で必ず起きる「2つの崩れ問題」

自分でコーディングしたHTML/CSSをWordPressに反映させて、いざ投稿画面を開くと、初心者は間違いなく次の現象に直面して絶望します。

  1. 管理画面（編集画面）が真っ白＆バラバラで、編集が死ぬほどやりづらい
    WordPressの管理画面は、デフォルトでは「WordPress共通の白黒のプレビュー」しか出しません。あなたが作ったオシャレな背景色やフォントを管理画面側にも読み込ませる特殊な設定（add_theme_support( 'editor-styles' ); など）をしない限り、編集画面の見た目は素っ気ない文字の羅列のままになり、「今何を編集しているのか」が分からなくなります。
  2. 公開された実際のサイト画面で見ると、デザインがめちゃくちゃに崩れる
    あなたがHTMLを作ったときは、自分で決めたシンプルなタグ（例：<div class="my-box">）に合わせてCSSを書いたはずです。しかし、WordPressの編集画面でブロック（カラムやカバーなど）を置くと、WordPressのシステムは裏側で「自動的に、はちゃめちゃに複雑なHTMLタグや大量のクラス名」を勝手に出力します。当然、あなたのCSSにはそんな名前に対する設定は書いていないため、レイアウトが一瞬で崩壊してしまうのです。

世の中で配布されている有名テーマ（SWELLなど）は、この複雑なHTMLをあらかじめ全て想定し、数千〜数万行のCSSを裏側に仕込んでいるから崩れません。これを個人がゼロから網羅しようとすると、確実に時間が足りなくなって挫折します。

そこで、プロも現場で使っている「いいとこ取り」のハイブリッド対処法で解決します。 戦略はシンプル。「一番デザインにこだわりたい『ヘッダー・フッター』だけを完璧に自作HTML.CSSで制御し、メインの中身は『Container（箱）』と『WPCode』で賢くやりくりする」という方法です。

🛠️ 対処法①：メインコンテンツを出力する場所に「Container（箱）」を仕込む

ブロックエディターで書いた文章やブロックが画面の端から端までびよーんと広がってダサくなるのを防ぐため、page.php や single.php のメイン要素（the_content）を以下のように自作のクラスで囲っておきます。

HTML

<main class="site-main">
    <div class="content-container"> <!-- 👈 この「箱」で横幅を制限する -->
        <?php the_content(); ?>
    </div>
</main>

CSS

/* style.cssに記述 */
.content-container {
    max-width: 1200px; /* パソコン画面でも最大1200pxの幅に収める */　
　　↑※画面幅いっぱいに表示したい場合はなしにしましょう↑
    margin: 0 auto;    /* 左右中央揃えにする */
    padding: 0 20px;   /* スマホ用の左右余白 */
}

🛠️ 対処法②：神プラグイン「WPCode」でページごとのCSSを賢く小分け管理する

WordPressの「追加CSS」機能は、コードが長くなると画面が狭くて管理が地獄になります。そこで、コードスニペットプラグインである「WPCode」を導入します。

  • 「トップページ用CSS」「投稿ページ用CSS」と名前をつけて綺麗に分けて管理できる
  • 条件付きロジック機能で、「トップページの時だけこのCSSを読み込む」という高度な設定がボタン1つでできる（サイトが軽くなる！）

自作の style.css には「ヘッダー・フッターと全体の基本設定」だけを書き、各ページ固有の細かいデザイン調整は「WPCode」に小分けにして書いていく。この住み分けをすることで、個人でも驚くほど安全かつスマートに自作テーマが管理できるようになります。

「WPCode」の具体的なインストール方法や、詳しい使い方についてはこちらの記事で徹底解説しています↓↓

WPCodeプラグインでCSS、PHP、JavaScript を管理する
WordPressでサイトを運営していると、「ここにちょっとしたデザイン（CSS）を追加したい」「Googleアナリティクスのコードを貼り付...
H-dash works Labo
2026.07.08

5. プラグインに丸投げしていい「機能・要素」

自作テーマ側でイチからプログラムを書く必要はなく、「既存のプラグインを入れて、テーマ側で呼び出すだけ」で済む要素です。個人のマンパワーを節約する最大のポイントになります。

🛠️ 管理画面や編集を楽にする機能

  • カスタム入力欄の作成：Advanced Custom Fields (ACF)
    • 会社概要の住所や、サービス紹介の画像などを、管理画面から簡単に打ち替えられるようにする神プラグインです。
  • カスタム投稿タイプの追加：Custom Post Type UI (CPT UI)
    • 通常の「投稿（お知らせ）」とは別に、「施工実績」「製品紹介」といった独立した投稿機能を一瞬で作れます。

✉️ フォーム・コミュニケーション

  • お問い合わせフォーム：Contact Form 7 または MW WP Form
    • 入力チェックや自動返信メール付きのフォーム。テーマ側には専用のショートコードを1行貼るだけで設置完了します。プログラムを自作する必要は一切ありません。

📈 運用・インフラ周り

  • SEO対策（メタタグ、サイトマップ出力）：All in One SEO または Yoast SEO
    • テーマ側に複雑なSEO用コードを書かなくても、プラグインが自動で<head>内に最適なタグを出力してくれます。
  • パンくずリスト：Breadcrumb NavXT
    • サイトの階層（ホーム ＞ サービス ＞ サービスA）を自動生成してくれます。
  • セキュリティ・バックアップ：All-in-One WP Migration / SiteGuard WP Plugin

💡 個人で挫折しないための開発戦略

個人開発で最も重要なのは「全部を自作しようとしないこと」です。

CocoonやSwellのような「多機能な設定画面」をイチから作ろうとすると、膨大なPHPの知識と時間が必要になり、マンパワーが足りなくなります。しかし、特定の企業のためのコーポレートサイトであれば、そんな大掛かりな設定画面は不要です。

  1. HTML/CSS/JSで「普通のWEBサイト」をカチッと1個作る
  2. それをWordPressのルールに従ってバラバラに分解する
  3. プラグイン（ACFやContact Form 7）を使って、管理画面から文字やフォームを制御できるように繋ぎこむ

プロの開発会社でも、オリジナルテーマを作る際はこのアプローチが主流です。

まとめ

一般的なコーポレートサイト（10〜20ページ程度、お知らせと会社概要があるサイト）であれば、平日の夜や週末の時間を使って、1ヶ月〜2ヶ月あれば個人で十分に自作テーマ化が可能です。

便利なプラグインをパズルのように組み合わせる意識を持って、まずは「1枚のHTMLをWordPressで表示させる」という小さな一歩からスタートしてみませんか？

Topへ