完全機能するWordPressテーマを構築するには、一連のコアファイルを用意する必要があります。これらのファイルがテーマの骨格を形成しており、それぞれに特定の役割があります。
最も基本的なファイルには以下のものが含まれます：
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
まずは`style.css`ファイルの作成から始めましょう。ファイルの冒頭には、テーマに関する情報を記載したヘッダーコメントを追加する必要があります。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/次に、`index.php`ファイルを作成します。最も基本的なバージョンでは、ヘッダーとフッターを読み込み、記事をループ処理して出力する必要があります。
<?php get_header(); ?>
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div class="entry-content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
<p>記事はありません。</p>
endif; 終わり
</main>
<?php get_footer(); ?>`header.php`および`footer.php`ファイルには、それぞれウェブサイト全体で共通に使用されるヘッダー部分とフッター部分のHTML構造が含まれています。`functions.php`ファイルは、テーマの機能を拡張するために使用されます。
テンプレートの階層とループを理解する
WordPressは、異なるページコンテンツの表示方法を決定するためのインテリジェントなテンプレート階層システムを採用しています。例えば、個別の記事にアクセスすると、WordPressはまず`single.php`を探します。カテゴリページにアクセスすると`category.php`を探し、これらのファイルが存在しない場合は`archive.php`を探し、最終的には`index.php`に戻ります。
「主循環（Main Loop）とは何か？」
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
推薦図書 WordPressテーマ開発完全ガイド：入門から上級まで。
他のテンプレートファイルを作成する
トピックをより専門的なものにするために、よく使われるテンプレートファイルをいくつか作成するべきです。例えば、`single.php`を作成して記事を個別に表示するようにするといいでしょう。
<?php get_header(); ?>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div class="post-meta">
发布于： | 作者：
</div>
<div class="post-content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
</main>
<?php get_footer(); ?>同様に、`page.php`を作成してページのテンプレートを定義したり、`archive.php`を作成してカテゴリーやタグなどのアーカイブページのテンプレートを定義することもできます。
メニューとサイドバーの統合
現代のテーマには、通常、カスタマイズ可能なナビゲーションメニューやサイドバーのツールエリアが含まれています。これらの機能は、`functions.php`ファイルを通じて登録および有効化する必要があります。
登録ナビゲーションメニュー
`functions.php`に以下のコードを追加すると、テーマにメニュー項目（例えば「メインメニュー」）を登録することができます。
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );登録後、ユーザーはWordPressの管理画面（バックエンド）の「外観」→「メニュー」でメニューを指定した場所に割り当てることができます。その後、`header.php`ファイル内でメニューを表示したい場所に以下のコードを追加して、そのメニューを呼び出します：
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>ツールバーのサイドバーを追加します。
ウィジェットはWordPressにおいて非常に柔軟な機能です。サイドバーを追加するにも、`functions.php`内で「ウィジェットエリア」を登録する必要があります。
関数 my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'my-first-theme' )、
'id' => 'sidebar-1'、
'description' => __( 'Add widget here., 'my-first-theme' ), 'description' => __( 'Add widget here.
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );その後、サイドバーを表示したいテンプレートファイル（例えば`sidebar.php`）内で`dynamic_sidebar()`関数を使用してサイドバーを出力します。
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>最後に、`index.php`または`single.php`内で`get_sidebar();`を使用してこのサイドバーファイルを読み込むことを忘れないでください。
推薦図書 WordPressテーマ開発者ガイド：カスタムテーマをゼロから作る。
スタイルとスクリプトを追加する
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
スタイルシートを導入する
`style.css`は必須ですが、WordPressでは自動的に読み込まれません。そのため、明示的に読み込み処理を行う必要があります。一般的には、メインのスタイルシートとリセットスタイルシートを別々に管理します。
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );現代のCSS開発における実践方法
2026年のフロントエンド開発においては、レスポンシブデザインとアクセシビリティへの配慮が非常に重要です。`style.css`や独立した`main.css`ファイル内でメディアクエリを使用することで、ウェブサイトがさまざまなデバイス上で正常に表示されるようにする必要があります。
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}テストとデバッグ
テーマの開発が完了した後、テストは欠かせない工程です。異なる環境、ブラウザ、デバイスで包括的なテストを行う必要があります。
デバッグモードを有効にします。
開発中は、必ずWordPressのデバッグモードを有効にしてください。これにより、PHPのエラーや警告、通知を迅速に発見することができます。`wp-config.php`ファイルを開き、以下のコードを見つけて追加してください：
推薦図書 2026年WordPressテーマ開発の進歩ガイド：ゼロからレスポンシブな企業ウェブサイトの構築まで。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全テーマ単位テスト
公式のWordPressテーマ用ユニットテストデータを使用して、テーマを全面的にテストすることをお勧めします。このデータには、さまざまなタイプの記事、ページ、メディア、コメントなどが含まれており、テーマがさまざまなコンテンツに対応した際にも正しく表示されるかを確認するのに役立ちます。スタイルやレイアウトに問題がないかをチェックするのに最適です。
概要
基本的`style.css`ファイルと`index.php`ファイルを作成したことから、テンプレートの階層構造やループの仕組みを理解し、メニューやサイドバーの設定方法、そしてスタイルシートの安全な読み込み方法まで、基本的でありながらも完全なカスタムWordPressテーマを構築する全てのプロセスを経験しました。テーマ開発は反復的な作業であることを忘れずにください。最もシンプルなバージョンから始め、徐々に機能を追加し、細部を洗練させていくことが最善の方法です。テンプレートタグ、アクションフック、フィルターについて継続的に学ぶことで、より強力で柔軟なテーマを作成することができるでしょう。
FAQ よくある質問
WordPressテーマを開発するには、どのような基礎知識が必要ですか？
HTML、CSS、PHPの基礎知識を習得する必要があります。JavaScriptにもある程度の理解があると、インタラクティブな機能を追加する際に役立ちます。さらに、WordPressの基本概念（記事、ページ、カテゴリ、タグ、ウィジェット、メニューなど）に精通していることが不可欠です。
なぜ私のテーマの変更がバックエンドで反映されないのでしょうか？
これは通常、ブラウザのキャッシュやWordPressのキャッシュが原因です。まずはブラウザを強制更新してみてください（Ctrl + F5 または Cmd + Shift + R）。それでも問題が解決しない場合は、スタイルやスクリプトが正しくキューに追加されているかを確認し、`functions.php`ファイルに文法エラーがないかをチェックしてください。非常にまれなケースですが、サーバーやプラグインのキャッシュを削除する必要がある場合もあります。
どうやって私のテーマを多言語に対応させることができるでしょうか？
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
カスタムテーマとサブテーマの違いは何ですか？
カスタムテーマとは、ゼロから完全に新しく開発されたテーマのことです。一方、サブテーマとは既存の「親テーマ」をベースにしており、親テーマのすべての機能、スタイル、テンプレートファイルを継承しています。サブテーマを使用すると、必要な部分（主にスタイルや一部のテンプレートファイル）のみを変更または追加することができ、親テーマを直接変更する必要はありません。これにより、人気のあるテーマをカスタマイズしたりアップグレードしたりする際に、自分が加えた変更内容が上書きされるのを防ぐことができ、より安全で効率的な方法となります。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語