2026年6月27日

2026年6月27日

スターターテーマ「_s(Underscores)」でWordPressのオリジナルテーマを作る方法

_s(Underscores、アンダースコアーズ)は、Automatticが公開しているWordPressのスターターテーマです。テンプレートファイルや基本的な functions.php がそろった「デザインのない土台」なので、これを複製して名前を付け替え、CSSとテンプレートを書き足していけばオリジナルテーマになります。この記事では、テーマの生成から名前の置き換え、どのファイルをどう編集していくか、作業前に知っておきたい注意点までを説明します。

_sはどんな人に向いているか

_sはクラシックテーマ(PHPのテンプレートファイルで画面を組み立てる方式)の土台です。次のような場合に向いています。

  • 既存テーマを子テーマで直すより、HTMLの構造から自分で決めたい
  • テンプレート階層やテンプレートタグを学びながら、テーマを1本作りたい
  • クライアント案件で、余計な機能を含まない軽いテーマを作りたい

一方で、WordPressの標準はブロックテーマ(サイトエディターで全体を編集する方式)に移っています。サイトエディターでヘッダーやフッターまで編集したいなら、_sではなくブロックテーマを土台にするほうが自然です。ブロックテーマを一から作る場合は、WordPress.org公式の「Create Block Theme」プラグインで雛形を作る方法があります。

また、_sは近年大きな更新が少なくなっています。土台として使う分には問題ありませんが、生成された時点のコードを自分で保守していく前提で選んでください。リポジトリの状況は変わることがあるため、着手前にGitHubの更新履歴を見ておくと安心です(2026年10月現在)。

手順1:テーマを生成する

いちばん手軽なのは、公式サイト underscores.me のジェネレーターを使う方法です。テーマ名を入力してダウンロードすると、関数名やテキストドメインが自分のテーマ名に置き換わったZIPファイルが手に入ります。

詳細オプションを開くと、次の項目も指定できます。

  • テーマのスラッグ(フォルダー名や関数の接頭辞になる)
  • 作者名、作者のURL、テーマの説明
  • Sass(SCSS)を使う構成にするかどうか

スラッグは後から変えると置き換えが大変なので、ここで決めておきます。英小文字とハイフンにしておくと、テキストドメインやハンドル名としてそのまま使えます。

GitHubから取得する場合

GitHubの Automattic/_s を直接クローンした場合は、名前の置き換えを自分で行います。READMEに置き換え手順が書かれており、要点は次の6つです(例として my-theme というスラッグにする場合)。

  1. '_s'(シングルクォート付き)をテキストドメイン 'my-theme' に置き換える
  2. _s_ を関数の接頭辞 my_theme_ に置き換える
  3. style.css の Text Domain: _s を Text Domain: my-theme に置き換える
  4. _s(先頭に半角スペース)をDocBlock用の名前 My_Theme に置き換える
  5. _s- をハンドル名の接頭辞 my-theme- に置き換える
  6. _S_(大文字)を定数の接頭辞 MY_THEME_ に置き換える

順番が大切です。たとえば4番を2番より先に実行すると、function _s_setup() の「 _s」の部分まで置き換わり、関数名が崩れます。エディターの一括置換を使い、置き換えのたびに件数を確認しながら進めてください。最後に languages/_s.pot のファイル名も変えておきます。

手順2:テーマを配置して有効化する

生成したフォルダーを wp-content/themes/ に置き、「外観」→「テーマ」から有効化します。作業は本番サイトではなく、ローカル環境かステージング環境で行います。本番で別のテーマから切り替えると、ウィジェットやメニューの配置が外れることがあるためです。

有効化した直後の見た目は、ほぼ装飾のない状態です。故障ではなく、_sがCSSをほとんど持たない土台だからです。ここから自分でデザインを足していきます。

style.css 冒頭のコメント(テーマヘッダー)には、テーマ名やバージョン、作者などが書かれています。テーマ名や説明を変えたいときは、functions.php ではなくこのヘッダーを編集します。

手順3:ファイル構成を把握する

最初に、どのファイルが何を担当しているかを押さえておくと、編集する場所に迷いません。主なものは次のとおりです。

my-theme/
├── style.css            テーマヘッダーと基本のCSS
├── functions.php        テーマ機能の登録、CSS・JSの読み込み
├── header.php / footer.php
├── index.php            すべての一覧の最終的な受け皿
├── single.php / page.php / archive.php / search.php / 404.php
├── sidebar.php / comments.php
├── template-parts/
│   ├── content.php        投稿の本文部分
│   ├── content-page.php   固定ページの本文部分
│   ├── content-search.php 検索結果の1件分
│   └── content-none.php   該当なしのとき
├── inc/
│   ├── template-tags.php      投稿日・著者などの出力関数
│   ├── template-functions.php body_class の追加など
│   ├── customizer.php         カスタマイザーの設定
│   └── custom-header.php      カスタムヘッダー
└── js/navigation.js     スマホ用メニューの開閉

single.php や archive.php は、ループの中で get_template_part( 'template-parts/content', ... ) を呼び出し、記事1件分の表示を template-parts/ に任せています。記事の見た目を変えたいときは、多くの場合 single.php ではなく template-parts/content.php を編集します。

functions.php のセットアップ関数(例では my_theme_setup())では、add_theme_support() でタイトルタグやアイキャッチ画像、カスタムロゴなどの機能を有効にし、register_nav_menus() でメニューの位置を登録しています。不要な機能はここで外し、必要なものを足していきます。

手順4:CSSと開発用ツールを使う

デザインは style.css に書いていくのが基本です。Sass構成で生成した場合は sass/ フォルダーのSCSSを編集し、コンパイルして style.css を作ります。

_sには package.json と composer.json が含まれており、Node.jsとComposerがあれば次のようなコマンドが使えます。

cd wp-content/themes/my-theme

# 依存パッケージのインストール
composer install
npm install

# SCSS を監視して変更のたびに style.css を生成
npm run watch

# コーディング規約(WordPress Coding Standards)でPHPを検査
composer lint:wpcs

# 配布用のZIPを作る
npm run bundle

使えるスクリプト名はバージョンによって異なることがあるため、package.json の scripts 欄と composer.json の scripts 欄で確認してください。Sassを使わない場合は、これらのツールを入れなくてもテーマとして動きます。

CSSやJavaScriptを追加するときは、header.php に <link> や <script> を直書きせず、functions.php のスクリプト登録関数の中で wp_enqueue_style() と wp_enqueue_script() を使います。プラグインとの読み込み順の調整や重複の回避は、WordPressに任せたほうが安全だからです。

つまずきやすい点

置き換え漏れで致命的なエラーになる関数名の接頭辞を一部だけ置き換えると、同じ名前の関数が二重に定義されて画面が真っ白になることがあります。wp-config.php で WP_DEBUG を有効にし、ログでエラーの行を確かめてください。

別の_s製テーマと関数名がぶつかる接頭辞を _s_ のまま使っていると、同じく_sから作られたプラグインや子テーマと衝突します。生成時に、ほかと重ならないスラッグを付けておくことが予防策です。

テンプレートが反映されないarchive-news.php のようなファイルを追加しても表示が変わらないときは、ファイル名がテンプレート階層の命名規則に合っているかを確認します。WordPressは条件に合うテンプレートを優先順に探し、見つからなければ index.php を使います。

公開前の確認公開前には「Theme Check」プラグインで、必須項目の不足や非推奨関数の使用がないかを検査できます。配布しない自社用テーマでも、問題の早期発見に役立ちます。

まとめ

  • _sはクラシックテーマ用のスターターテーマで、装飾のない土台から自分のテーマを作れます。
  • underscores.me で名前を付けて生成すれば、関数名やテキストドメインの置き換えが済んだ状態で始められます。GitHubから取得した場合はREADMEの順番どおりに置き換えます。
  • 記事の見た目は template-parts/content.php、機能の追加は functions.php、テーマ名は style.css のヘッダーで変えます。
  • サイトエディターで全体を編集したい場合は、ブロックテーマを土台にするほうが向いています。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲