WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。
🎉 なにより、コードを書く必要はないんです。
WordPressのエディターでブロックを並べて、コピぺするだけです。
▼ 先にテーマだけ欲しい方へ
このシリーズの手順で作った日本語ブロックテーマ「Naniwa-No-Code」は、無料でダウンロードできます。
WordPressブロックテーマ無料ダウンロード｜日本語・シンプル「Naniwa-No-Code」WordPressの日本語ブロックテーマ「Naniwa-No-Code」を無料で配布しています。theme.json とコアブロックだけで作った、装飾を足す前の…
このロードマップで手に入るもの
- 「自分専用」のオリジナルテーマ
既製品ではない、あなたのこだわりが詰まった唯一無二のテーマです。 - ノーコードでのデザイン管理術
CSSを書かずに、WordPressのエディター操作だけでデザインを完結させるスキルが身につきます。 - 「壊れにくい」サイト構造
theme.jsonを活用した、色や幅を一括でスマートに管理できる最新の仕組みを理解できます。 - 自由なレイアウト構築力
PCでの2カラムやスマホでの縦並びなど、レスポンシブ対応もブロックの標準機能だけで自在に操れます。
全10回の流れ
5つのファイルから始めて、最後はテーマとして仕上げるところまで進みます。
| 回 | 内容 |
|---|---|
| ① | 【準備】敷居は思ったより低い（このページ） |
| ② | 【設計】作り始める前の「設計図」 |
| ③ | 【設定】theme.jsonの最初の一歩 |
| ④ | 【色】カラーパレットのslug設計 |
| ⑤ | 【構築】ヘッダーを組む |
| ⑥ | 【構築】フッターを組む |
| ⑦ | 【表示】コンテンツを表示する |
| ⑧ | 【一覧】投稿一覧を作る |
| ⑨ | 【展開】カラムブロックでレイアウトを変える |
| ⑩ | 【完結】テーマを仕上げる |
本番環境の準備
「ログインユーザーのみ表示」の設定をfunctions.phpに追加して、自分だけが確認できる状態でテストできます。
こんな環境で始められます
- サーバーを借りてWordPressをインストールしただけの状態 → そのままテスト環境になります
- サブドメインでテスト環境を作れるレンタルサーバーがほとんど（Xserverなど）
- InstaWP（インスタ・ダブリューピー）：期間限定の使い捨て実験室のようなところ
コアサーバーで、30日間無料でお試しができます。
コアサーバーの無料お試しでWordPressを30日間試す方法｜画像付き【初心者向け】「ブログを始めてみたいけど、お金を払う前に、自分にできるか試したい」そんな方に向けて、コアサーバーの30日間無料お試しで、1円も払わずにWordPressを触っ…
この環境で、自作テーマのフォルダをアップロードして有効化するだけで動きます。
あると便利な「前提知識」と「ツール」
前提知識について
最低限あれば楽
- テンプレート階層の理解
どのファイルがどのページに対応するか。single.html は投稿ページ、index.html はデフォルト、という感覚があればOK。 - HTMLとCSSの基礎
HTML : タグの意味がわかる程度でOK。
CSS : 例えばボックスモデル（padding・margin・border）の概念を知っていると、サイトエディターで余白を調整するときに「なんか詰まってる…」「広げたいのに広がらない」がスッキリ解決できます。 - ブロックエディターの操作感
グループ・カラムなど基本ブロックの使い方を知っていると、テンプレートのイメージが掴みやすくなります
なくてもOK
CSSやJSファイルの読み込み・独自機能の追加・プラグイン的な拡張など、もっと欲張りになってきたら少しずつ必要になります。今はAIに相談しながら書ける時代なので、身構えなくて大丈夫
ページ先頭に戻るボタン・スライダーなど動きのある機能を追加したい場合は必要。とはいえ今はAIに相談しながら作れる時代なので、書けなくても大丈夫
本番環境でテストできます
あると便利な2つのツール（FTP・VSCode）
基本的にWordPressの管理画面だけでできます。
「必須ではないけど、あると作業がラクになる」——そんな2つのツールを紹介します。
● FTPクライアント
テーマフォルダをサーバーの wp-content/themes/ にアップするために使います。管理画面からのzip upload より細かい操作ができて便利です。
・FileZilla（無料・Windows/Mac対応）
・Cyberduck（無料・Mac向け、使いやすい）など
●Visual Studio Code（VSCode）
無料で使える高機能テキストエディターです。ファイルの作成や編集に使います。
最悪のケースでPHPのエラーから管理画面に入ることができず、FTPでしか復旧できないケースがあります。また管理画面から新しいファイルやフォルダを個別に追加はできません。
この2つのツールがあれば、ファイルの追加・編集・バックアップが楽です。
第1回 はじめての自作テーマ
まず揃えたい5つのファイル
ブロックテーマとして動かすのに必要なファイルは、実はたった2つ（style.cssとindex.html）ですが、今回は、5つのファイルからスタートします。
my-theme/
├── style.css ← 必須｜テーマの身分証明書
├── index.php ← 推奨｜空でOK（お守り）
├── theme.json ← 推奨｜色・サイズ・幅の設定
├── functions.php ← 任意｜スタイル登録など
└── templates/ ← テンプレートを置くフォルダ
└── index.html ← 必須｜すべての基本
/*
Theme Name: my-theme
Author: あなたの名前
Description: 自作ブロックテーマ
Version: 1.0
*/<?php{
"version": 3,
"settings": {},
"styles": {},
"templateParts":[]
}＊未ログインでアクセスするとログインページに自動でリダイレクトされます。
<?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' );
⚠️ 開発が完了したら、このコードを削除してください。削除しないと一般ユーザーがサイトを見られなくなります。
templatesフォルダの中に、index.htmlファイルを作成します。
最初は中身が空でも認識されます。ブロックマークアップは後から追加していきます。
テーマを有効化する
💡テーマフォルダを右クリックでzip圧縮
管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」からインストールして、有効化します。
wp-content/themes/ の中にテーマフォルダごとアップロード今は「土台」ができただけ
この時点でサイトを開いても、WordPressは「ブロックテーマとして認識」はしていますが、まだ何も表示するものがない状態です。
次回は、作り始める前に「どのページに、どのファイルが必要か」を決める設計図を作ります。
【WordPress ブロックテーマ自作②】作り始める前の「設計図」｜必要なファイルを決める最初に「どんなサイトにするか」を決めておくと、必要なファイルが自然と決まります。3つの選択で、自分のサイトに必要なファイル一覧が見えてくる流れを解説します。 前…