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

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

📌 このシリーズの目次・準備編はこちら
本番環境の準備や、あると便利な前提知識・ツールは、シリーズの入口「ロードマップ」にまとめています。 → ロードマップ＆配布ページ

はじめての自作テーマ

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

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

my-theme/
　├── style.css        ← 必須｜テーマの身分証明書
　├── index.php        ← 推奨｜空でOK（お守り）
　├── theme.json       ← 推奨｜色・サイズ・幅の設定
　├── functions.php    ← 任意｜スタイル登録など
　└── templates/       ← テンプレートを置くフォルダ
　　　    └── index.html  ← 必須｜すべての基本

style.css 必須

テーマの「身分証明書」です。WordPressはこのファイルのコメントを読んで、テーマ名や作者などの情報を取得します。

/*
Theme Name: my-theme
Author: あなたの名前
Description: 自作ブロックテーマ
Version: 1.0
*/

index.php 推奨

中身は空でOK。ブロックテーマでは使われませんが、古いサーバー環境でのエラー防止になる「お守り」です。

<?php

theme.json

テーマ全体の「設定ファイル」です。カラーパレット・フォントサイズ・コンテンツ幅などをここで一元管理します。これがないとデザインの管理がとても大変になります。

{
  "version": 3,
  "settings": {},
  "styles": {},
  "templateParts":[]
}

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' );

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

templates/index.html 必須

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

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

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

テーマを有効化する

管理画面から

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

FTPでアップする場合

wp-content/themes/ の中にテーマフォルダごとアップロード

WordPress管理画面「外観」→「テーマ」から自作テーマを有効化

ログインした状態でサイトを確認。これでテスト環境のできあがり！

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

今の状態

✓WordPressがブロックテーマと認識している

✓サイトエディターが使える状態になっている

✓ログインユーザーのみ表示の設定が効いている

→画面はまだ真っ白