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

WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。
🎉 なにより、コードを書く必要はないんです。
WordPressのエディターでブロックを並べて、コピぺするだけです。

🎁 このシリーズの完成テーマを先に見たい方へ
全10回の集大成として作ったテーマ「Naniwa-No-Code」を無料配布しています。デモサイトの確認やダウンロードはこちら → ロードマップ＆配布ページ

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

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

最低限あれば楽

1
テンプレート階層の理解
どのファイルがどのページに対応するか。single.html は投稿ページ、index.html はデフォルト、という感覚があればOK。
2
HTMLとCSSの基礎
HTML : タグの意味がわかる程度でOK。
CSS : 例えばボックスモデル（padding・margin・border）の概念を知っていると、サイトエディターで余白を調整するときに「なんか詰まってる…」「広げたいのに広がらない」がスッキリ解決できます。

あると作業がスムーズ（なくてもAIで補える）

3
JSONの書き方の感覚
{} や "" の基本ルールだけわかればOK。theme.json を編集するときに役立ちます。
4
ブロックエディターの操作感
グループ・カラムなど基本ブロックの使い方を知っていると、テンプレートのイメージが掴みやすくなります。

なくてもOK

✓PHP：
CSSやJSファイルの読み込み・独自機能の追加・プラグイン的な拡張など、もっと欲張りになってきたら少しずつ必要になります。今はAIに相談しながら書ける時代なので、身構えなくて大丈夫
✓JavaScript：
ページ先頭に戻るボタン・スライダーなど動きのある機能を追加したい場合は必要。とはいえ今はAIに相談しながら作れる時代なので、書けなくても大丈夫
✓ローカル開発環境：
本番環境でテストできます

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

AD – 読み進める前のひとやすみ
こんな環境で始められます
✓サーバーを借りてWordPressをインストールしただけの状態 → そのままテスト環境になります
✓サブドメインでテスト環境を作れるレンタルサーバーがほとんど（Xserverなど）
✓InstaWP（インスタ・ダブリューピー）：期間限定の使い捨て実験室のようなところ

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

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

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

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

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

基本的にWordPressの管理画面だけでできます。

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

最悪のケースでPHPのエラーから管理画面に入ることができず、FTPでしか復旧できないケースがあります。また管理画面から新しいファイルやフォルダを個別に追加はできません。

この2つのツールがあれば、ファイルの追加・編集・バックアップが楽です。

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

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

例
・FileZilla（無料・Windows/Mac対応）
・Cyberduck（無料・Mac向け、使いやすい）
2
Visual Studio Code（VSCode）
ファイルを編集するテキストエディター

無料で使える高機能テキストエディターです。ファイルの作成や編集に使います。

はじめての自作テーマ

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

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

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

my-theme/
　├── style.css        ← 必須｜テーマの身分証明書
　├── index.php        ← 推奨｜空でOK（お守り）
　├── theme.json       ← 推奨｜色・サイズ・幅の設定
　├── functions.php    ← 任意｜スタイル登録など
　└── templates/       ← テンプレートを置くフォルダ
　　　    └── index.html  ← 必須｜すべての基本
1
style.css 必須
テーマの「身分証明書」です。WordPressはこのファイルのコメントを読んで、テーマ名や作者などの情報を取得します。
/*
Theme Name: my-theme
Author: あなたの名前
Description: 自作ブロックテーマ
Version: 1.0
*/
2
index.php 推奨
中身は空でOK。ブロックテーマでは使われませんが、古いサーバー環境でのエラー防止になる「お守り」です。
<?php
3
theme.json
テーマ全体の「設定ファイル」です。カラーパレット・フォントサイズ・コンテンツ幅などをここで一元管理します。これがないとデザインの管理がとても大変になります。
{
  "version": 3,
  "settings": {},
  "styles": {},
  "templateParts":[]
}
4
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' );

⚠️ 開発が完了したら、このコードを削除してください。削除しないと一般ユーザーがサイトを見られなくなります。

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

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

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

テーマを有効化する

管理画面から

💡テーマフォルダを右クリックでzip圧縮
管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」からインストールして、有効化します。

FTPでアップする場合
1
wp-content/themes/ の中にテーマフォルダごとアップロード
2
WordPress管理画面「外観」→「テーマ」から自作テーマを有効化
3
ログインした状態でサイトを確認。これでテスト環境のできあがり！

今は「土台」ができただけ
この時点でサイトを開いても、WordPressは「ブロックテーマとして認識」はしていますが、まだ何も表示するものがない状態です。

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

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

スポンサーリンク