WordPressのことあれこれブログ

WordPressで自作テーマを作ってみよう！まずは最低限で大丈夫！

2026.02.02

WordPress

こんにちは、nekoです。
今日はWordPressでの自作のテーマ作成方法について紹介します。

実はこのブログは自作でテーマを作成していて、今のところ本当に最低限のことしか機能がありません。検索機能もなければページネーションも存在していません。これから作ればいいと思っています。

ここでは、本ブログを作るにあたってしたことを書いています。
自分のデザインでテーマ作成をやってみたい方は、ぜひ参考にしてみてください。

WordPressのテーマを自作するメリット

WordPressのテーマを自作するメリットは、自分の好みのデザインや機能を備えた理想のWebサイトを作ることができることです。

既存のテーマをいじるだけだと、自分の理想とするWebサイトを作ることは難しいですよね。有料テーマにはたくさんの機能がついていますが、自分には必要のないものがあったり、扱いづらかったりします。

自作だと好みのデザインでオリジナルの機能を持たせた、世界で一つだけのオリジナルのテーマを作ることができます。また、途中で必要だと思った機能やレイアウト調整も簡単にできます。

テーマ制作は初めは難しく感じるかもしれませんが、経験を積むとWordPressでできることの幅がさらに広がります！

WordPressのテーマを自作するための準備２つ

早速テーマ作成に入りたいところですが、その前にやるべきことが２つあります。

１つ目はHTML・CSSでの静的ファイルを用意することです。普通にコーディングしたファイルです。ここで準備した静的ファイルを、phpに反映していきます。

アイコン

neko

この作業がとても大切。

私は下記の５つのHTMLファイルと、それぞれのCSSを準備しました。

🌿トップページ
🌿固定ページ（お問い合わせ、プライバシーポリシー、このブログについて）
🌿投稿ページ
🌿投稿一覧ページ
🌿404ページ

投稿は既存のブロックエディタを使うと簡単にできますが、私は余白感もこだわりたかったので、既存のブロックエディタは使わないようにしました。プラグインを使うとオリジナルのブロックエディタも簡単に自作できました。

お問い合わせとプライバシーポリシーのページは中身は全然考えられていないので、まだ準備中の状態です。とりあえず公開すること最優先でいきます。（仕事の場合はちゃんとしますよ）

２つ目は、WordPressが動作するローカル環境を準備することです。

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

いきなり本番環境で始めてしまうと、どこかでバグが起こってしまった時にサイト全体に影響してしまいます。エラーでサイトが見られなくなってしまったら困りますよね。また、ファイルを更新するたびにサーバーにアップし直すのも面倒です。

ですので、まずはローカル環境で問題ないことを確認し、問題なければ本番環境に移行していきます。

ローカル環境を構築するのには、下記のようなツールを使うことができます。

🌿Local（ローカル）
🌿XAMPP（ザンプ）
🌿MAMP（マンプ）

私はLocalを使って作業しました。Localは初心者でもとっても簡単にできるのでおすすめです。

WordPressのテーマを自作する流れ

WordPressのテーマを自作する流れはこんな感じです。

①HTMLとCSSでWebサイトをデザインする
②作成したHTMLをPHPに移行する
③必要なPHPコードを追加したり、管理画面から調整したりする
④全てのページがきちんと動作するか確認する
⑤本番環境に移行する

HTMLをPHPに反映するときは少しずつ反映していくと、エラーが出てしまった時にどこでエラーが出たのかが分かりやすいです。

Localを使ってローカル環境を構築しよう

HTML・CSSでWebサイトがデザインできたら、ローカル環境を準備します。

※Localはインストールしているものとして説明していきます。まだインストールできていない方は、インストールしてから進めてください。

左下のプラスマークのところをホバーすると「Add Local site」と出てくるので、クリックするとWordPressサイトを追加することができます。

「Create a new site」を選択して、「Continue」ボタンをクリックします。

１番上に作成したいサイト名を入力します。私の場合は「blog2026」としていますが、自分のサイト名を入力してください。後で変更できるので、迷っているなら仮でも大丈夫です。

個人的には、保存先きちんと決めておくことが大事かなと思います。私はいつも、HTML・CSSの静的ファイルとセットで保存しているので、そのフォルダを選択しました。

環境を選択します。

「Custom」を選択すると、PHPのバージョン・サーバーの種類・データベースのバージョンを選ぶことができます。

ユーザー名とパスワード、メールアドレスを入力します。ユーザー名とパスワードは、ワードプレスの管理画面に入る時に必要になります。どこかにメモしておくと良いです。

以上で、ワードプレスのサイトが作成できました！とても簡単ですね！

赤枠で囲っている、「WP Admin」ボタンをクリックするとWordPressの管理画面に入ることができます。「Open site」ボタンをクリックすると作成したWebサイトを見ることができます。

ユーザー名とパスワードを入力して、管理画面に入ることができました。

WordPressのテーマに必要なファイルを作ってみよう

それぞれのファイルを作る前に、最低限必要なファイルを２つ作成しておきます。

🌿index.php
🌿style.css

この２つがないとテーマとして認識してもらえません。
WordPressのフォルダの中の、下記の部分にテーマフォルダを作ります。

/wp-content/themes/ここにテーマフォルダを作成

この中にindex.phpとstyle.cssを作成すると、テーマとして管理画面から選択することができるようになります。
作成したテーマを選択し、有効化しておきましょう。

functions.php

functions.phpはテーマの根幹を担っている、とても大切なファイルです。
WordPressで必要な機能をまとめて記述しておくことができます。

具体例はこんな感じです↓

🌿ショートコードの定義
🌿テーマで使う関数の定義
🌿デフォルトの処理を定義
🌿管理画面の設定

functions.phpはどのファイルよりも先に読み込まれます。エラーが出やすいファイルなので、バックアップをとりながら編集していきましょう。

このブログでは、下記のことを記述しています↓

🌿外部ファイルの読み込み
🌿投稿編集画面のCSSの読み込み
🌿OGPタグ/Twitterカード設定を出力

これからもっとたくさん機能を増やしていくと思いますので、都度紹介していきますね。

style.css

「どんなテーマなのか」を記載しておく、最低限必要なファイルです。

下記のディレクトリに置きます↓
/wp-content/themes/自作テーマフォルダ/style.css

css

/*
Theme Name: blog2026
Author: neko
Description: ブログに利用するテーマです
Version: 1.0
*/

個人利用するだけのテーマであれば、テーマ名と作成者名くらい書いておくと良いでしょう。

index.php

index.phpはトップページや、全てのページの元になるファイルです。

WorsPressはページごとにテンプレートファイルを作成するのが一般的ですが、作成していない場合は全てのページでindex.phpが読み込まれます。例えば、存在しないURLを検索したとき、まず404.phpを読み込もうとしますが、404.phpが存在しない場合はindex.phpを読み込むという感じです。

php

<?php get_header(); ?>

<!-- ここにコンテンツを記載 -->

<?php get_footer(); ?>

ヘッダーとフッターを読み込み、その間に必要なコンテンツを載せます。このブログの場合だと「カテゴリボタン」「最新記事」「プロフィール」を載せました。他のページでも使うパーツは、別ファイルで作成して読み込む形にすると良いです◎

こんな感じでファイルを作成しています。
/wp-content/themes/blog2026/parts/ctg.php
/wp-content/themes/blog2026/parts/list.php
/wp-content/themes/blog2026/parts/profile.php

次の関数を使うと読み込むことができます↓
get_template_part(”)

php

<?php get_header(); ?>

  <?php get_template_part('/parts/ctg'); ?>
  <?php get_template_part('/parts/list'); ?>
  <?php get_template_part('/parts/profile'); ?>

<?php get_footer(); ?>

header.php

header.phpは全てのページで読み込みます。ページの一番上からヘッダーやメニューなどの共通部分まで全てを、作成したHTMLの静的ファイルからコピペしてきます。

私の場合はヘッダーから下は各ページそれぞれ違うので、ヘッダーまでコピペしました。

このとき、</head>タグの直前にwp_head()を書くことを忘れないようにしましょう。
これは、WordPressで用意されているコードをheadに出力してくれる関数です。これを書かないとWordPressが動かないので注意です！

php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- headの内容を記載 -->
    <?php wp_head();?>
  </head>
  <body>
    <div class="wrapper">
      <header class="header">        
      </header>

footer.php

footer.phpも全てのページで読み込みます。フッターからページの一番下まで全てを、作成したHTMLの静的ファイルからコピペしてきます。

このとき、</body>タグの直前にwp_footer()を書くことを忘れないようにしましょう。
これは、ページの最後に読み込まれるべきスクリプトを出力してくれる関数です。こちらも書かないとWordPressが動かないので注意です！

php

      <footer class="footer">
      </footer>
    </div>
    <?php wp_footer(); ?> 
  </body>
</html>

single.php

single.phpは投稿ページを表示するためのファイルです。ブログだと書いた記事を表示するページ！一番よく目にされることになるので、大切なファイルです。

目次、前後の記事へのリンクや関連記事へのリンク、他のSNSへの共有リンクなど記述することで、読者にWebサイト内を回遊してもらえるようになります。

（このブログではまだこれらの要素がありません…早く準備しなくては！）

今現在(2026.2.2)はこのブログは下記の内容を表示するように設定しています。

①ヘッダー
②タイトル
③日付
④アイキャッチ画像
⑤コンテンツ
⑥プロフィール
⑦フッター

php

<?php get_header(); ?>

<div class="single">
  <!-- メイン -->
  <div class="single__main">
    <h1 class="single__title single__title--main"><?php the_title(); ?></h1>

    <?php if(get_the_date() === get_the_modified_date()): ?>
      <p class="single__date"><?php echo get_the_date(); ?></p>
    <?php else: ?>
      <p class="single__date"><span class="single__date--cach"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/cached.svg"></span><?php echo get_the_modified_date(); ?></p>
    <?php endif; ?>

    <?php 
      $category = get_the_category();
      $category = $category[0];
    ?>
    <div class="single__tag"><a class="single__tagA" href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->cat_name; ?></a></div>

    <?php the_content(); ?>
  </div>

  <!-- サイド -->
  <div class="single__side">
    <?php get_template_part('/parts/profile'); ?>
  </div>
</div>

<?php get_footer(); ?>

page.php

page.phpは固定ページを表示するためのファイルです。お問い合わせ、プライバシーポリシーなどを表示するのに使います。

固定ページは作成したままだとどこからもアクセスする手段がありません。メニューやフッターにリンクを設定しておきましょうね。

固定ページごとに参照するファイルを変えたい場合は、下記のようにファイルを作成します。

page-privacypolicy.php
page-contact.php

このようにしておくと、https://◾️△◾️△.com/contact/を検索したときはpage-contact.phpを参照することになります。必要な場合で大丈夫ですが、わたしは初めからこうしておくのが好きです。（お問い合わせページとプライバシーポリシーでは、結構デザインが違うことが多いので）

まだ準備中なので、こんな感じです↓

php

<?php get_header(); ?>
<div class="contact">
  <h1 class="contact__title"><? the_title();?></h1>

  <p class="contact__detail">準備中です。しばらくお待ちください。</p>
</div>
<?php get_footer(); ?>

404.php

404.phpは存在しないページにアクセスしたときに表示されるファイルです。

フロントページに戻るボタンがあると親切だと思います。
おすすめの記事なんかを載せておいても良いかもですね。

Webサイトによっては遊び心のあるユニークな演出をしているサイトもありますよ。

WordPressを本番環境にアップロードしよう

ファイルが準備できたら、本番環境にアップロードしていきます。
本番環境で準備すべきものは、下記の２つです。

🌿サーバー
🌿ドメイン

私は全てXServer（エックスサーバー）で準備しました。サーバーの料金は1年で1万円程度です。ドメインは種類によって金額が変わります。私は1000円くらいのものを選びました。

サーバー契約の詳しい手順は、それぞれのサーバーのサイトを見てみてください。

＜本番アップロードの手順＞
①データベースの移行
②FTPソフトでファイルのアップロード
③データベース内のドメイン変換

順を追って説明しますね。

データベースの移行

ここまではローカル環境で作業してきました。ローカル環境にあるデータベースをエクスポートし、本番環境にあるデータベースにインポートする必要があります。

まずはエクスポートします。方法はとても簡単。
Localのアプリを開き、Databaseのタブをクリックします。「Open AdminNeo」をクリックするとデータベースの情報が表示されます。

全てのテーブルにチェックを付けて、左上のエクスポートと書いてあるところをクリックします。

形式はこのままで大丈夫です。再度エクスポートをクリックしたらsqlファイルが保存できます。

次に本番環境のデータベースにインポートします。phpMyAdminというツールを使うと簡単です。

Xserverでは管理画面から利用できるようになっています。
データベースのユーザー名とパスワードを入力すると、データベースが表示されます。

インポートというタブをクリックします。先ほどエクスポートしたファイルを選択し、一番下のインポートボタンをクリックしてください。

これでインポートが完了しました。

FTPソフトでファイルのアップロード

FTPソフトを使ってサーバーと接続し、WordPress関連のファイルを全てアップロードします。

この時、wp-config.phpのデータベース情報を書き換えることをお忘れなく。
先ほどインポートしたデータベースの名前、ユーザー名、パスワードが必要です。

アイコン

neko

‘local’と’root’の部分を変更してね

php

define( 'DB_NAME', 'local' );
define( 'DB_USER', 'root' );
define( 'DB_PASSWORD', 'root' );

データベース内のドメイン変換

データベースの移行は完了しましたが、データベース内のドメインが本番のものになっていません。

私の場合はこんな状態↓
ローカル：http://blog2026.local
本番：https://wordpressnoblog.com

データベース内にドメインがいくつ含まれているか分かりません。ひとつひとつ手作業で修正するわけにはいきませんよね。

そんな時はSearch Replace DBというツールを使って、データベースの書き換えを行うと早いです。

以下のページからダウンロードすることができます。
https://interconnectit.com/search-and-replace-for-wordpress-databases/

zipファイルがダウンロードできたら、解凍しておいてください。

解凍したフォルダを本番サーバーにアップロードします。
/wp-content/のある階層と同じところOK◎

アップしたフォルダにアクセスするとこんな画面が表示されます↓

「Replace」の右側の枠に「移行元ドメイン」、「with」の右側の枠に「移行先ドメイン」を入力します。
それとデータベースの情報を入力したら、「Test connection」をクリックです。

接続成功したら「success」みたいな感じで表示されます。

「Do a safe test run」をクリックして変更して問題ないか確認できたら、「Search and Replace」をクリックして数秒で完了です！

サイトにアクセスすると、無事表示されているはず。

※私は編集画面でJSON確立エラーみたいなのが出ていました。設定＞パーマリンク設定＞変更を保存をすると直りました。こういうことはよくあるみたいなので、エラーが出た人はやってみてください。

WordPressのテーマを自作する方法まとめ

今回はWordPressのテーマを自作する流れについて簡単に紹介しました。

このブログもまだまだアップデートすべきところがたくさん！
アップデートしつつ記事にしていこうと思うので、一緒に自作のテーマ作りを楽しみましょう〜！

neko

アイコン

Web制作会社で4年目のフロントエンドエンジニア。HTML・CSS・JavaScriptを用いた実装や、WordPressのオリジナルテーマ構築を行っています。

本ブログでは、最低限動作する状態からスタートし、設計・実装・カスタマイズを重ねながら、ブログを段階的にブラッシュアップしていく過程を発信しています。