_scoreで始めるWordPress自作テーマ開発

_scoreとは？

_scoreは、Automattic社が開発したWordPressのスターターテーマです。モダンな開発環境と必要最小限の機能を備えており、自作テーマ開発の土台として最適です。

開発環境のセットアップ

必要な準備物

  • ローカル開発環境（Local by Flywheel、Docker等）
  • コードエディタ（VSCode推奨）

オプションの開発ツール

以下は必須ではありませんが、より高度な開発のために使用できます：

  • Node.js と npm/yarn（Sassのコンパイルやアセット管理に使用）
  • Gulp（タスクランナーとして使用する場合）
WordPressテーマ開発フロー Step 1: _scoreの入手 underscores.meから Step 2: テーマの配置 wp-content/themes/に配置 Step 3: テーマの有効化 管理画面から有効化 開発作業 style.cssの編集 基本スタイル PHPファイルの編集 テンプレート functions.php 機能追加 オプション: 必要に応じてnpm/Sassを導入

インストール手順

  1. _scoreの入手方法：
    • _scoreの公式サイトにアクセス
    • テーマ名を入力して「Generate」をクリック
    • ダウンロードしたZIPファイルを解凍
  2. WordPressテーマディレクトリに配置：
    • 解凍したフォルダをwp-content/themes/に配置
    • 管理画面からテーマを有効化

これだけで基本的な開発を始めることができます。

  1. テーマ名の変更：
  • _sを自分のテーマ名に
  • Text Domain: _sを自分のテーマ名に
  • functions.phpの接頭辞_s_を変更
your-theme-name/
├── inc/                  # 機能拡張用のPHPファイル
├── js/                   # JavaScriptファイル
├── sass/                 # Sassファイル
├── template-parts/       # テンプレートパーツ
├── functions.php         # テーマの機能定義
├── header.php           # ヘッダーテンプレート
├── footer.php           # フッターテンプレート
└── style.css            # メインのスタイルシート

theme編集方法

追加の機能をfunctions.phpとは別で記述

functions.php

<?php

/**
 * カスタム機能の読み込み
 */
require get_template_directory() . '/inc/custom-functions.php';

inc\custom-functions.php

<?php

/**
 * カスタム機能の追加
 *
 * @package simple-form-theme
 */

if (! defined('ABSPATH')) {
    exit; // WordPress以外からのアクセスを防ぐ
}

// ここに独自の関数やフックを追加できます