WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。
🎉 なにより、コードを書く必要はないんです。
WordPressのエディターでブロックを並べて、コピぺするだけです。
このロードマップで手に入るもの
- 「自分専用」のオリジナルテーマ
既製品ではない、あなたのこだわりが詰まった唯一無二のテーマです。 - ノーコードでのデザイン管理術
CSSを書かずに、WordPressのエディター操作だけでデザインを完結させるスキルが身につきます。 - 「壊れにくい」サイト構造
theme.jsonを活用した、色や幅を一括でスマートに管理できる最新の仕組みを理解できます。 - 自由なレイアウト構築力
PCでの2カラムやスマホでの縦並びなど、レスポンシブ対応もブロックの標準機能だけで自在に操れます。
本番環境の準備
こんな環境で始められます
- サーバーを借りてWordPressをインストールしただけの状態 → そのままテスト環境になります
- サブドメインでテスト環境を作れるレンタルサーバーがほとんど（Xserverなど）
- InstaWP（インスタ・ダブリューピー）：期間限定の使い捨て実験室のようなところ
この環境で、自作テーマのフォルダをアップロードして有効化するだけで動きます。
「ログインユーザーのみ表示」の設定をfunctions.phpに追加しておけば、自分だけが確認できる状態でテストできます。
あると便利な「前提知識」と「ツール」
前提知識について
最低限あれば楽
- テンプレート階層の理解
どのファイルがどのページに対応するか。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つのツールがあれば、ファイルの追加・編集・バックアップが楽です。
ステップ（全10回）
【準備】5つのファイルからスタートします。
【WordPress ブロックテーマ自作①】敷居は思ったより低い｜はじめての自作テーマ
WordPressのブロックテーマなら、PHPの知識がなくても、ローカル開発環境がなくても、「自作テーマ」を作り始めることができます。🎉 なによ…
【設計】必要なファイルの決定
【WordPress ブロックテーマ自作②】作り始める前の「設計図」｜必要なファイルを決める
最初に「どんなサイトにするか」を決めておくと、必要なファイルが自然と決まります。3つの選択で、自分のサイトに必要なファイル一覧が見えてくる流れを解説します。
…
【設定】theme.jsonの基本
【WordPress ブロックテーマ自作③】theme.jsonの最初の一歩｜レイアウト幅とパーツ登録
先にやっておきたいtheme.jsonの設定があります。この設定は2回に分けて進めます。この記事ではレイアウト幅とパーツ登録、次の記事ではカラーパレットの設定を…
【色】カラーパレットの設計
【WordPress ブロックテーマ自作④】色は後から変えられる！カラーパレットのslug設計とおすすめ構成
カラーパレットの設定をします。この記事では、私がおすすめするslug構成と、実際の使い方を紹介します。
📌 このシリーズの目次・準備編…
【一覧】投稿一覧（クエリループ）
【WordPress ブロックテーマ自作⑧】投稿一覧を作る｜クエリループブロックの使い方
テンプレートが揃ったら、次はブログの「顔」になる投稿一覧ページです。パーマリンクの確認から始めて、クエリループブロックを使って組んでいきましょう。
&…
【完結】テーマの仕上げ
【WordPress ブロックテーマ自作⑩】完結編「テーマを仕上げる」
総仕上げのステップです。
📌 このシリーズの目次・準備編はこちら本番環境の準備や、あると便利な前提知識・ツールは、シリーズの入口「ロー…
配布用テーマ
全10回の集大成として作ったテーマ「Naniwa-No-Code」をダウンロードできます。
- 投稿ページ（2カラム）： 日本のブログで親しまれている、サイドバー付きのレイアウト。他の記事への回遊性を高めています。
- 固定ページ（1カラム）： 大切なコンテンツをじっくり読んでいただくための、ノイズのないスッキリした設計です。
⚠️ ご利用前に必ずお読みください
本テーマはプロの制作会社ではなく、Web制作を学ぶ個人の学習成果物です。そのため、本テーマの利用によって生じたいかなる不具合についても責任を負いかねます。「自己責任」にてご利用ください。また、不具合修正や機能追加等の「アップデート」の予定はございませんので、あらかじめご了承ください。
私自身も、2026年9月頃には本ブログをこの「Naniwa-No-Code」に切り替える予定です
「便利なプラグインの導入」や「より細かい調整をする方法」などは、今後もブログ記事として発信していきますので、一緒にサイトを育てていきましょう！