開発環境と核心概念
コードの執筆を始める前に、効率的なローカル開発環境を構築することが非常に重要です。これには、ローカルサーバーソフトウェア（XAMPP、MAMP、またはLocal by Flywheelなど）、コードエディタ（VS CodeやPHPStormなど）、そしてバージョン管理システム（Gitなど）のインストールが含まれます。ローカル環境を利用することで、オンラインサイトに影響を与えることなく、安全にテストやイテレーションを行うことができます。
WordPressのテーマのディレクトリ構造を理解することは基本です。標準的なテーマフォルダは通常、以下の場所にあります：/wp-content/themes/your-theme-name/その中で、いくつかのコアファイルが必須です：style.cssとindex.php。style.cssスタイルだけでなく、そのファイルヘッダのコメントにはテーマのメタデータも定義されており、テーマ名、作者、説明、バージョンなどが含まれます。これがWordPressがテーマを認識するための鍵となります。
もう一つの重要な概念は「テンプレートの階層」です。WordPressは、ユーザーがアクセスしたページの種類（ホームページ、記事ページ、固定ページ、カテゴリーアーカイブページなど）に応じて、自動的に適切なテンプレートファイルを選択してレンダリングします。例えば、ブログの記事にアクセスした場合、WordPressは順番に適切なテンプレートを探します。single-post.php、single.phpそして最後に、index.phpこの階層関係を理解することで、正しい場所に正しいコードを記述することができるようになります。
推薦図書 WordPressテーマ開発の入門編：最初のカスタムテーマをゼロから作成する。
基本テーマファイルを作成する
まず、あなたのテーマディレクトリ内に2つの最も基本的なファイルを作成してください：style.cssとindex.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: GNU General Public License v2 or later
Text Domain: my-first-theme
*/index.phpこれはあなたのテーマのデフォルトテンプレートファイルです。最もシンプルなバージョンでは、WordPressのヘッダー、メインループ、およびフッターの呼び出しのみを含むことができます。
<?php get_header(); ?>
<main>
備考：この翻訳はPHPコードのみを対象としたもので、HTMLコードは含まれていません。
<article>
<h2>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
終わりました。ありがとうございました。
</main>このためにindex.php正常に動作するためには、参照されている他のテンプレートコンポーネントを作成する必要があります。header.php、sidebar.phpとfooter.php。header.php通常はHTMLドキュメントのヘッダーを含んでいます。wp_head()フック呼び出しとウェブサイトのナビゲーションメニュー。footer.phpその場合は、ページの構造を閉じて関連する処理を呼び出します。wp_footer()フック。
メインループとテンプレートタグの仕組みを理解する
上記のindex.php例示の中で、if ( have_posts() ) : while ( have_posts() ) : the_post(); このコードはWordPressの「メインループ」です。これはテーマの中核部分であり、現在のページに表示されている記事一覧や個々の記事を順番に処理し、出力するために使用されます。
ループの内部では、一連の「テンプレートタグ」を使用してコンテンツを出力しています。例えば：the_title()とthe_content()これらはWordPressに組み込まれているPHP関数で、ループ内で記事データを安全に表示するために特別に設計されています。その他のよく使われるテンプレートタグには以下のものがあります：the_permalink()、the_excerpt()、the_post_thumbnail()とthe_author()その他
推薦図書 WordPressテーマ開発の究極ガイド：入門からカスタマイズまでの実践。
トピック機能とスタイルの強化
基本的テーマフレームワークの構築が完了したら、次のステップはその機能性と視覚的表現を向上させることです。これには、スクリプトやスタイルの導入、メニューやサイドバーのツールエリアの設定、そして特徴的な画像のサポートの追加が含まれます。
まず、あなたは以下の手順を通じて必要なものを入手する必要があります：functions.phpこれらの機能を安全に追加するために、テーマのルートディレクトリにファイルを作成してください。functions.phpそれはトピックが初期化される際に自動的に読み込まれます。
安全にスクリプトやスタイルを読み込む方法
テンプレートファイル内でCSSやJavaScriptファイルに直接ハードリンクを張ることは絶対に避けてください。正しい方法は、それらのファイルを別の場所に配置し、テンプレート内でそのファイルへの参照を行うことです。wp_enqueue_scriptsフック。
<?php
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 引入自定义的CSS文件
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
// 引入导航菜单的JavaScript文件（依赖jQuery）
wp_enqueue_script( 'navigation-script', get_template_directory_uri() . '/assets/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>登録されたトピックでサポートされている機能：
WordPressの多くの機能は、テーマが明示的にそのサポートを宣言する必要があります。これは、テーマの設定ファイルやスキンファイル内で特定の設定を行うことによって実現されます。add_theme_support()関数の実装。
<?php
function my_first_theme_setup() {
// 让主题支持文章和页面的“特色图像”
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 支持在文章编辑器中使用的HTML5标签
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 注册一个主导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>同様に、サイドバーのツール領域にも登録が必要です。これにより、ユーザーはバックエンドからコンテンツを動的に追加することができるようになります。
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具', 'my-first-theme' ),
'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' );カスタムページテンプレートおよびテンプレートコンポーネントの作成
テーマ機能が増えるにつれて、異なるページのニーズに応えるために、より具体的なテンプレートファイルを作成する必要があります。
推薦図書 WordPressテーマ開発実践：ゼロからプロフェッショナルレベルのウェブサイトテーマを構築する。
カスタムページテンプレートの構築
ページテンプレートを使用すると、特定のページに独自のレイアウトを設定することができます。以下の手順に従って、新しいページテンプレートを作成してください：Template Name:開始に使用するPHPファイルで大丈夫です。例えば、全幅のページテンプレートを作成するといった具合です。template-fullwidth.php。
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的页面模板
*/
get_header(); ?>
<main class="full-width">
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
<h1>あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</h1>
<div class="entry-content">
あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。
</div>
</article>
<?php endwhile; ?>
</main>
<?php get_footer(); ?>作成した後、WordPressの管理画面でページを編集する際に、「ページ属性」の「テンプレート」ドロップダウンメニューから「全幅ページテンプレート」を選択することができます。
テンプレートコンポーネントを使用してコードを整理する
複数のテンプレートで繰り返し使用されるコードブロック（記事の要約やコメントリストなど）は、「テンプレートコンポーネント」として抽出することができます。get_template_part()関数を使ってそれらを呼び出します。例えば、次のようにして関数を作成します：template-parts/content.phpこのファイルは、記事の出力形式を規定するためのものです。
はい。index.phpその中で、ループを次のように置き換えることができます：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_format() ); ?>
<?php endwhile; endif; ?>WordPressはまず、読み込みを試みます。template-parts/content-{post-format}.php（例えば）content-gallery.phpもし見つからなければ、デフォルトのものを読み込みます。template-parts/content.phpこれにより、コードの再利用性と保守性が大幅に向上しました。
概要
ゼロからWordPressのテーマを開発することは、体系的なプロジェクトです。開発者はPHP、HTML、CSS、JavaScriptのスキルだけでなく、WordPressのコアアーキテクチャ（テンプレートの階層構造、メインループ、フックシステムなど）にも深い理解を持つ必要があります。プロセスは、ローカル環境の構築や基本ファイルの作成から始まり、機能の追加やスタイルの整理を経て、最終的にはカスタムテンプレートやコンポーネントを使用して柔軟でプロフェッショナルなレイアウトを実現します。ベストプラクティスに従うことが重要であり、例えば…functions.php機能を追加し、それらをスクリプトやスタイルに安全に組み込むことは、安定した、効率的で、メンテナンスが容易なテーマを構築するための鍵です。本ガイドに記載された手順を実践することで、確かなテーマ開発の基礎を築き上げることができ、その基盤の上でさらに高度なテーマカスタマイズ機能を探求していくことができるでしょう。
FAQ よくある質問
テーマ開発には、どのようなプログラミング言語をマスターする必要がありますか？
WordPressのテーマ開発における核心言語はPHPです。なぜなら、WordPress自体がPHPで書かれているからです。ループ、関数、条件論理などを理解するためには、しっかりとしたPHPの基礎知識が必要です。
また、HTMLとCSSに精通していることが求められます。これにより、ページの構造とスタイルを作成することができます。JavaScript（特に基本的なjQueryや、Vue/Reactなどの現代のネイティブJSフレームワーク）は、フロントエンドのインタラクションや動的な効果を実現するために必要なスキルです。SQLについても基本的な知識があると、WordPressのデータクエリを理解するのに役立ちます。
テーマをWordPressの公式標準に準拠させるにはどうすればよいですか？
WordPress公式の「テーマ開発マニュアル」と「コーディング基準」に従うことが最優先事項です。これには、WordPressが提供する関数やフックの正しい使用、テーマのセキュリティ確保（データの検証、エスケープ処理、クロスサイトスクリプティング攻撃の防止）、レスポンシブデザインの実装、アクセシビリティの保証、そして十分なフロントエンドのパフォーマンス最適化が含まれます。
重要な実践の一つは、自分が作成したテーマを公式の「テーマチェック」プラグインでテストすることです。このプラグインにより、テーマが標準の準拠性、セキュリティ、パフォーマンスなどの面で抱えている可能性のある問題が詳細にリストアップされます。
子主题（Child Theme）是什么？我什么时候需要它？
サブテーマとは、別のテーマ（親テーマ）に依存して存在するテーマのことです。サブテーマを使用することで、親テーマのファイルを直接編集することなく、その機能やスタイルを変更したり拡張したりすることができます。
既存のテーマ（例えば人気のあるビジネステーマ）を基にカスタマイズしたい場合は、サブテーマを使用する必要があります。これにより、親テーマがアップデートされても、自分で加えたカスタマイズが上書きされるのを防ぐことができます。サブテーマを作成するには、特定のヘッダー情報を含むファイルを用意するだけです。style.cssファイルと1つのfunctions.phpファイル。
テーマ開発中に遭遇したPHPエラーをどのようにデバッグするか？
まず、ローカル開発環境で以下のことを確認してください：wp-config.phpこのファイルでWordPressのデバッグモードを有効にします。define( 'WP_DEBUG', true );この行のコードは以下のように設定されています：trueまた、複数の設定を同時に行うこともできます。define( 'WP_DEBUG_LOG', true );このようにすると、エラーログが以下の場所に書き込まれます：/wp-content/debug.logそのファイルはページ上に直接表示されることはなく、ユーザーに影響を与えることはありません。
また、ブラウザの開発者ツール（F12キーを押す）を使用して、フロントエンドのJavaScriptのエラーやネットワークリクエスト、CSSの問題をチェックすることも、デバッグプロセスにおいて欠かせない要素です。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語