【WordPress】ブロックテーマ自作の敷居は思ったより低い｜はじめての自作テーマ

WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。

🎉 なにより、コードを書く必要はないんです
ブロックテーマのテンプレートファイルに書くのは「ブロックマークアップ」と呼ばれるHTMLコメントです。しかもこれ、自分で書かなくてもいいんです。
WordPressのエディターでブロックを並べて、コピーするだけ。

【最重要】詳しくはこちら👇

【WordPress】ブロックマークアップの読み方・書き方入門

自作テーマ作成が楽になる前提知識

AD – 読み進める前のひとやすみ
最低限あればOK（ないと辛い）
1
テンプレート構造の理解
どのファイルがどのページに対応するか。single.html は投稿ページ、index.html はデフォルト、という感覚があればOK。
2
HTMLとCSSの基礎
タグの読み書きができる程度でOK。特にボックスモデル（padding・margin・border）の概念を知っていると、サイトエディターで余白を調整するときに「なんか詰まってる…」「広げたいのに広がらない」がスッキリ解決できます。
あると作業がスムーズ（なくてもAIで補える）
3
JSONの書き方の感覚
{} や "" の基本ルールだけわかればOK。theme.json を編集するときに役立ちます。
4
ブロックエディターの操作感
グループ・カラムなど基本ブロックの使い方を知っていると、テンプレートのイメージが掴みやすくなります。
🙆 なくてもOK
✓PHP：
テンプレートファイルの作成には不要。ただしCSSやJSファイルの読み込み・独自機能の追加・プラグイン的な拡張など、もっと欲張りになってきたら少しずつ必要になります。こちらも今はAIに相談しながら書ける時代なので、最初から身構えなくて大丈夫
✓JavaScript：
標準ブロックだけで作るなら不要。ページ先頭に戻るボタン・スライダーなど動きのある機能を追加したい場合は必要。とはいえ今はAIに相談しながら作れる時代なので、ゼロから書けなくても大丈夫
✓ローカル開発環境：
本番環境でテストできます

本番環境でテストできる理由

AD – 読み進める前のひとやすみ
こんな環境で始められます
✓サーバーを借りてWordPressをインストールしただけの状態 → そのままテスト環境になります
✓サブドメインでテスト環境を作れるレンタルサーバーがほとんど（Xserverなど）
✓シンフリーサーバーなど無料で使えるレンタルサーバーを活用する方法も

この環境で、自作テーマのフォルダをアップロードして有効化するだけで動きます。

ただし、工事中のサイトを外部に見せないための「ひと工夫」をしておきましょう！

「ログインユーザーのみ表示」の設定をfunctions.phpに追加しておけば、自分だけが確認できる状態でテストできます。

あると便利な2つのツール（FTP・VSCode）

AD – 読み進める前のひとやすみ

「必須ではないけど、あると作業がぐっとラクになる」——そんな2つのツールを紹介します。

WordPress管理画面の「テーマファイルエディター」からも既存ファイルの編集はできますが、更新に失敗するとサイトが真っ白になることがあります。また「テーマファイルエディター」から新しいファイルやフォルダの追加はできません。

この2つのツールがあれば、ファイルの追加・編集・バックアップがすべて安心して行えます。

1
FTPクライアント
ファイルをサーバーにアップロードするツール

テーマフォルダをサーバーの wp-content/themes/ にアップするために使います。管理画面からのzip upload より細かい操作ができて便利です。

おすすめ
・ FileZilla（無料・Windows/Mac対応）
・ Cyberduck（無料・Mac向け、使いやすい）
・ FTP Drive（Xserverユーザーは専用アプリも便利）
2
Visual Studio Code（VSCode）
ファイルを編集するテキストエディター

無料で使える高機能テキストエディターです。theme.json や functions.php の編集に使います。

VSCodeが便利な理由
・ コードに色がついて読みやすい（シンタックスハイライト）
・ JSONの構文エラーをその場で教えてくれる
・ $schema を設定すると theme.json の補完が効く
・ 無料・Windows/Mac両対応

⚠️ PHPのエラーが出るとサイトが真っ白になり、FTPでしか復旧できなくなることがあります。

💡 VSCodeでファイルを編集してFTPでアップする方法なら、ローカルに保存したファイル自体がバックアップになります。万が一のときも慌てずに済みます。

はじめての自作テーマ

AD – 読み進める前のひとやすみ

まず揃えたい4つのファイル

ブロックテーマとして動かすのに必要なファイルは、実はたった2つ（style.cssとindex.html）ですが、今回は、4つのファイルからスタートします。

my-theme/
　├── style.css　← 必須｜テーマの身分証明書
　├── theme.json　← 推奨｜色・サイズ・幅の設定
　├── functions.php　← 任意｜スタイル登録など
　└── templates/　← テンプレートを置くフォルダ
　　　    └── index.html　← 必須｜すべての基本
1
style.css 必須
テーマの「身分証明書」です。WordPressはこのファイルのコメントを読んで、テーマ名や作者などの情報を取得します。
/*
Theme Name: my-theme
Author: あなたの名前
Description: 自作ブロックテーマ
Version: 1.0
*/
2
theme.json
テーマ全体の「設定ファイル」です。カラーパレット・フォントサイズ・コンテンツ幅などをここで一元管理します。これがないとデザインの管理がとても大変になります。
{
  “version”: 3,
  “settings”: {},
  “styles”: {},
  “templateParts”:[]
}
3
functions.php
機能を拡張する際に使用する重要なファイルです。ここに、テスト中のサイトを外部に見せないための機能を追加します。
＊未ログインでアクセスするとログインページに自動でリダイレクトされます。
<?php

function my_require_login() {
    global $pagenow;
    if (
        ! is_user_logged_in() &&
        $pagenow !== 'wp-login.php' &&
        ! ( defined( 'DOING_AJAX' ) && DOING_AJAX ) &&
        ! ( defined( 'DOING_CRON' ) && DOING_CRON )
    ) {
        auth_redirect();
    }
}
add_action( 'init', 'my_require_login' );

⚠️ テスト完了後は必ずこのコードを削除してください。削除しないと一般ユーザーがサイトを見られなくなります。

4
templates/index.html 必須
ブロックテーマの「心臓部」です。 このファイルが存在することで、WordPressがブロックテーマと認識し、サイトエディターが使えるようになります。

templatesフォルダの中に、index.htmlファイルを作成します。

最初は中身が空でも認識されます。ブロックマークアップは後から追加していきます。

テーマを有効化する

💡テーマフォルダを右クリックでzip圧縮すれば管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」からそのままインストールするできます。
FTPでアップして有効化する流れ
1
wp-content/themes/ の中にテーマフォルダを作成してアップロード
2
WordPress管理画面「外観」→「テーマ」から自作テーマを有効化
3
ログインした状態でサイトを確認。これでテスト環境のできあがり！

今は「土台」ができただけ

AD – 読み進める前のひとやすみ

この時点でサイトを開いても、真っ白な画面が表示されるだけです。
templates/index.html が空なので、WordPressは「ブロックテーマとして認識」はしていますが、まだ何も表示するものがない状態です。

今の状態
✓WordPressがブロックテーマと認識している
✓サイトエディターが使える状態になっている
✓ログインユーザーのみ表示の設定が効いている
→画面はまだ真っ白

ここからの流れ

AD – 読み進める前のひとやすみ

土台ができたら、次はこんな流れで自作テーマを育てていきます。

STEP
2
サイトの設計を決める
まず「どんなサイトにしたいか」を決めます。ここが決まると、必要なファイルが自然と決まります。
選択①ブログ型（投稿一覧がトップ）or ホームページ型（固定ページがトップ）
選択②サイドバーあり or なし（2カラム or 1カラム）
結果必要なテンプレートファイルが決まる
STEP
3
theme.jsonでデザインの土台を作る
コンテンツを作る前に「サイト全体の色・フォント・幅」を決めておきます。あとから変えると手間が増えるので、最初にざっくり決めておくのがコツです。
・ テーマカラーをカラーパレットに登録
・ フォントサイズのプリセットを設定
・ コンテンツ幅（contentSize・wideSize）を決める
STEP
4
パーツを作る（ヘッダー・フッター）
すべてのページで共通して使う部品を先に作ります。一度作れば使い回せるのがブロックテーマの便利なところです。
・ parts/header.html ← サイトタイトル・ナビゲーション
・ parts/footer.html ← コピーライトなど
STEP
5
テンプレートを作る
パーツを組み合わせて、ページごとのレイアウトを作ります。
エディターでブロックを並べてコピーするだけ——コードを書く必要はありません。
・ templates/index.html ← 投稿一覧（クエリーループ）
・ templates/single.html ← 投稿個別ページ
・ templates/page.html ← 固定ページ　など

🎉 index.html などのHTMLファイルはエディターで組み立てて、コピーして、貼り付けるだけです。
コードをゼロから書く必要は一切ありません

「エディターで組む → コピー → 貼り付け」——この繰り返しで、自分だけのテーマが完成します。

💡 STEP 2で設計を決めたら、あとは少しずつ積み上げていけばOK。気がついたら自分のサイトができあがり、これからはカスタマイズも自由自在です😊

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク