独自テーマ vs 既製テーマ

必須スキル

開発環境の構築

必要なツール

開発前の準備チェックリスト

WordPressのファイル構成

テンプレート階層の概念

WordPressには「テンプレート階層」という重要な概念があります。 これは、表示するページの種類に応じて、どのテンプレートファイルを使用するかを決定するルールです。

The Loop（ループ）の仕組み

WordPressの「ループ」は、投稿を表示するための中核的な仕組みです。 基本的な構造を理解することで、様々なコンテンツの表示方法をカスタマイズできるようになります。

1
2
3
4
5
6
7
8
9
10

style.css（テーマ情報）

すべてのWordPressテーマには、テーマ情報を記述したstyle.cssファイルが必要です。 このヘッダー情報によって、WordPressがテーマとして認識します。

index.php（メインテンプレート）

index.phpはテーマの最も基本的なテンプレートファイルで、 他のテンプレートがない場合のフォールバックとして機能します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

functions.php（機能定義）

functions.phpはテーマの機能を定義するファイルです。 テーマのセットアップ、スタイルシートとスクリプトの読み込み、 メニューの登録などを行います。

• テーマのセットアップ（add_theme_support）
• スタイルシートとスクリプトの読み込み（wp_enqueue_style/script）
• メニューの登録（register_nav_menus）
• ウィジェットエリアの登録（register_sidebar）
• カスタム機能の実装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

header.php、footer.php（共通部分）

サイトの共通部分をheader.phpとfooter.phpに分離することで、 メンテナンス性が向上します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8

single.php（投稿ページ）

個別投稿を表示するためのテンプレートです。 投稿のタイトル、コンテンツ、メタ情報、コメント機能などを実装します。

• 投稿タイトルの表示
• 投稿日時と著者情報
• アイキャッチ画像の表示
• 投稿コンテンツの表示
• カテゴリーとタグの表示
• 前後の投稿へのナビゲーション
• コメント機能の実装

page.php（固定ページ）

固定ページ用のテンプレートです。 投稿ページと同様の構造ですが、カテゴリーやタグなどの投稿固有の要素は含みません。

• ページタイトルの表示
• アイキャッチ画像の表示（オプション）
• ページコンテンツの表示
• 子ページの表示（階層構造）

archive.php（アーカイブページ）

カテゴリーやタグなどのアーカイブページ用のテンプレートです。 複数の投稿を一覧表示する機能を実装します。

• アーカイブタイトルの表示
• アーカイブ説明の表示
• 投稿一覧の表示
• ページネーションの実装
• 投稿の抜粋表示

カスタムテンプレートの作成方法

特定のページに独自のレイアウトを適用したい場合は、 カスタムテンプレートを作成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

カスタム投稿タイプの登録と活用

functions.phpにカスタム投稿タイプを登録することで、 ブログ投稿以外のコンテンツタイプを作成できます。

• 実績やポートフォリオの投稿タイプ
• 商品やサービスの投稿タイプ
• イベントやニュースの投稿タイプ
• FAQやよくある質問の投稿タイプ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

カスタムタクソノミーの設定

カスタム投稿タイプに対して、独自の分類（タクソノミー）を追加できます。 これにより、より柔軟なコンテンツ管理が可能になります。

• 実績カテゴリー（Web制作、グラフィックデザインなど）
• 商品カテゴリー（カテゴリ、ブランドなど）
• イベント分類（開催地、ジャンルなど）
• スキルタグ（使用技術、難易度など）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Advanced Custom Fields（ACF）の活用

カスタムフィールドを簡単に追加するには、Advanced Custom Fieldsプラグインが便利です。 インストール後、管理画面でフィールドを設定し、テンプレートで値を取得できます。

• クライアント名やプロジェクト期間
• 使用技術やツール
• プロジェクトのURLやGitHubリポジトリ
• 画像ギャラリーや動画
• 価格や料金情報

1
2
3
4
5
6
7
8
9
10
11
12

カスタムクエリの作成と表示

特定の条件で投稿を取得するカスタムクエリを作成することで、 柔軟なコンテンツ表示が可能になります。

• 特定のカテゴリーの投稿のみ表示
• 日付範囲での絞り込み
• カスタムフィールドの値による絞り込み
• 投稿数の制限とページネーション
• ソート順の指定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

モバイルファーストの設計アプローチ

モバイルファーストの設計では、まずモバイル向けのスタイルを定義し、 その後メディアクエリを使って大きな画面サイズに対応します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

パフォーマンス最適化

1
2
3

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8

Core Web Vitalsへの対応

Googleの検索ランキング要因となるCore Web Vitalsに対応するための最適化を行います。

• LCP（Largest Contentful Paint）: 2.5秒以下
• FID（First Input Delay）: 100ms以下
• CLS（Cumulative Layout Shift）: 0.1以下
• クリティカルリソースの事前読み込み
• レンダリングブロッキングリソースの最適化

1
2
3
4
5
6
7
8
9
10
11
12
13

必須のセキュリティ対策

1
2
3
4
5
6
7
8

1
2
3

1
2
3
4
5
6
7
8
9

安全なコーディングとメンテナンス

• 子テーマの活用: アップデート時の上書きを防ぐため、カスタマイズは子テーマで実装します
• プレフィックスの使用: 関数名や変数名に固有のプレフィックスを付けて、名前空間の衝突を回避します
• コードの可読性: WordPressコーディング標準に従い、適切なコメントを記述します
• 定期的なバックアップ: テーマファイルとデータベースの定期バックアップを自動化します
• パフォーマンス監視: Google PageSpeed InsightsやGTmetrixで定期的なチェックを行います

設計から実装までの効率的なワークフロー

再利用可能なコンポーネント設計

効率的な開発のために、再利用可能なコンポーネントを作成します。 これにより、開発時間を大幅に短縮できます。

• カードコンポーネント（投稿、商品、実績など）
• ナビゲーションコンポーネント
• フォームコンポーネント
• ボタンコンポーネント
• モーダルコンポーネント

開発時間を短縮するテクニック

• スターターテーマの活用: Underscoresなどのスターターテーマをベースにする
• ビルドツールの導入: GulpやWebpackでSassのコンパイルや画像最適化を自動化
• テーマ開発用プラグインの活用: Show Current Template、Query Monitorなど
• コードスニペットの活用: よく使用するコードをスニペットとして保存
• テンプレートパーツの活用: get_template_part()でコンポーネントを分割

テーマのデバッグと品質確保

開発中は適切なデバッグ機能を有効にし、 問題の早期発見と解決を図ります。

• WP_DEBUGの有効化
• エラーログの確認
• ブラウザ開発ツールの活用
• パフォーマンス測定ツールの使用
• クロスブラウザテストの実施

成功へのロードマップ